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,9 @@
     $fixed-width-font-color:  #4e443c;
     $button-bg-color:         #dfddd554;
     $button-bg-hover-color:   #fafafae5;
+    $button-color:            #{$link-color};
+    $mark-bg-color:           #ff0;
+    $mark-color:              #000;
     $base-border-color:       #d8d7cf;
     $callout-color:           #e9e8e0;
     $highlight-bg-color:      #eee0b5;
@@ -28,6 +31,9 @@
         $nav-link-color:          #979594;
         $fixed-width-font-color:  #afa7a0;
         $button-bg-hover-color:   #dfddd599;
+        $button-color:            #{$button-bg-hover-color};
+        $mark-bg-color:           #898882;
+        $mark-color:              #d2d2d2;
         $base-border-color:       #b3b2a7;
         $callout-color:           #555555;
         $highlight-bg-color:      #47412d;
@@ -80,6 +86,14 @@
                 color: var(--light-font-color);
                 background-color: #5e5951;
             }
+
+            form#search {
+                @include box-shadow(none);
+            }
+
+            input.pagefind-ui__search-input {
+                background: var(--main-bg);
+            }
         }
     }
 
@@ -101,6 +115,9 @@
         --fixed-width-font-color:       #{$fixed-width-font-color};
         --button-bg-color:              #{$button-bg-color};
         --button-bg-hover-color:        #{$button-bg-hover-color};
+        --button-color:                 #{$button-color};
+        --mark-bg-color:                #{$mark-bg-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,8 +141,8 @@ h1 {
  */
 
 mark {
-  background: #ff0;
-  color: #000;
+  background: var(--mark-bg-color);
+  color: var(--mark-color);
 }
 
 /**

assets/sass/search.scss

@@ -174,8 +174,8 @@ ol.full-search-results {
 }
 
 button {
-  border-color: var(--link-color);
-  color: var(--link-color);
+  border-color: var(--button-color);
+  color: var(--button-color);
   background: var(--callout-color);
   font-weight: bold;
   @include border-radius(3px);