dark mode: adjust colors for manual pages' drop-downs

The light mode colors in the versions and the translation drop-down boxes are waaaay to bright in dark mode. Signed-off-by: Johannes Schindelin <[email protected]>
git · Oct 20, 2024 · 1bebf7e · 1bebf7e
1 parent 9944956
commit 1bebf7e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css
@@ -18,6 +18,9 @@
     $main-bg:                 #fcfcfa;
     $bg-color:                #f0efe7 url($baseurl + "images/bg/body.jpg");
     $sidebar-bg-color:        #efefe7;
+    $no-changes-bg-color:     #f5f5f3;
+    $dropdown-active-bg-color: #fff;
+    $versions-footer-bg-color: #eae9e0;
 
     @if $mode == dark {
         $orange:                  #d7834f;
@@ -37,6 +40,9 @@
         $main-bg:                 #333333;
         $bg-color:                #2a2a2aff;
         $sidebar-bg-color:        #3d3d3a;
+        $no-changes-bg-color:     #515150;
+        $dropdown-active-bg-color: #515150;
+        $versions-footer-bg-color: #1f1f1e;
 
         :root#{$theme} {
             div#masthead {
@@ -100,6 +106,14 @@
             input.pagefind-ui__search-input {
                 background: var(--main-bg);
             }
+
+            #reference-version {
+                background-color: rgba(111, 110, 105, 0.33);
+            }
+
+            #l10n-versions-dropdown footer a {
+                color: #6969dd;
+            }
         }
     }
 
@@ -132,6 +146,9 @@
         --main-bg:                      #{$main-bg};
         --sidebar-bg-color:             #{$sidebar-bg-color};
         --bg-color:                     #{$bg-color};
+        --no-changes-bg-color:          #{$no-changes-bg-color};
+        --dropdown-active-bg-color:     #{$dropdown-active-bg-color};
+        --versions-footer-bg-color:     #{$versions-footer-bg-color};
     }
 }
 

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
@@ -298,7 +298,7 @@ a.dropdown-trigger {
   &.active {
     position: relative;
     z-index: 200;
-    background-color: #fff !important;
+    background-color: var(--dropdown-active-bg-color) !important;
     @include border-top-left-radius(3px);
     @include border-top-right-radius(3px);
     border: solid 1px var(--base-border-color-darker-8);

diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss
@@ -131,7 +131,7 @@ h3.plumbing {
     font-size: 11px;
     font-weight: normal;
     color: var(--font-color);
-    background-color: #eae9e0;
+    background-color: var(--versions-footer-bg-color);
     @include border-bottom-left-radius(3px);
     @include border-bottom-right-radius(3px);
 
@@ -285,7 +285,7 @@ ol.reference-previous-versions {
         @include border-bottom-left-radius(10px);
         font-size: 10px;
         font-style: italic;
-        background-color: #f5f5f3;
+        background-color: var(--no-changes-bg-color);
       }
     }
   }