dark-mode: adjust the search

This includes the search box as well as the search results page.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/sass/dark-mode.css

@@ -10,6 +10,7 @@
     $fixed-width-font-color:  #4e443c;
     $button-bg-color:         rgba(223, 221, 213, 0.33);
     $button-bg-hover-color:   rgba(250, 250, 250, 0.9);
+    $mark-color:              #ff0;
     $base-border-color:       #d8d7cf;
     $callout-color:           #e9e8e0;
     $highlight-bg-color:      #eee0b5;
@@ -28,6 +29,7 @@
         $nav-link-color:          #979594;
         $fixed-width-font-color:  #afa7a0;
         $button-bg-hover-color:   rgba(223, 221, 213, 0.6);
+        $mark-color:              #aeae74;
         $base-border-color:       #b3b2a7;
         $callout-color:           #555555;
         $highlight-bg-color:      #7d724f;
@@ -82,6 +84,14 @@
                 color: var(--light-font-color);
                 background-color: #5e5951;
             }
+
+            form#search {
+                @include box-shadow(none);
+            }
+
+            input.pagefind-ui__search-input {
+                background: var(--main-bg);
+            }
         }
     }
 
@@ -103,6 +113,7 @@
         --fixed-width-font-color:       #{$fixed-width-font-color};
         --button-bg-color:              #{$button-bg-color};
         --button-bg-hover-color:        #{$button-bg-hover-color};
+        --mark-color:                   #{$mark-color};
         --base-border-color:            #{$base-border-color};
         --base-border-color-darker-8:   #{darken($base-border-color, 8%)};
         --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};

assets/sass/normalize.scss

@@ -141,7 +141,7 @@ h1 {
  */
 
 mark {
-  background: #ff0;
+  background: var(--mark-color);
   color: #000;
 }