From ef38468fa7970e862052ea77c759fd6fd1420156 Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Tue, 9 Apr 2024 10:00:22 +0300 Subject: [PATCH] feat(dark-mode): enhance form elements and hr visibility This commit improves the visibility and aesthetics of form elements (input, select, textarea) and horizontal rules (hr) in dark mode by adjusting their styles. Specifically, it sets a darker background color, lighter text color, and modifies border colors to ensure these elements are both visually appealing and easily distinguishable against the dark background. Additionally, placeholder text color has been adjusted to maintain readability without being overly prominent. The removal of a fixed width on the navigation bar (`nav`) style is aimed at enhancing responsiveness and flexibility in various screen sizes, promoting a better user experience across devices. These changes contribute to a more cohesive and accessible dark mode theme, aligning with modern web design practices that prioritize user comfort and interface adaptability. --- www/main.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/www/main.js b/www/main.js index f779a659..bb2bfec6 100644 --- a/www/main.js +++ b/www/main.js @@ -18,7 +18,6 @@ i { nav { display: block; - /*width: 660px;*/ margin: 0 auto 10px; } @@ -116,6 +115,22 @@ body.dark-mode button { color: #ccc; } +body.dark-mode input, +body.dark-mode select, +body.dark-mode textarea { + background-color: #333; + color: #e0e0e0; + border: 1px solid #444; +} + +body.dark-mode input::placeholder, +body.dark-mode textarea::placeholder { + color: #bbb; +} + +body.dark-mode hr { + border-top: 1px solid #444; +}