Fixed dark mode for icon search

squidfunk · Feb 15, 2021 · c5cbbd9 · c5cbbd9
1 parent 77b7858
commit c5cbbd9
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 16 deletions.
diff --git a/material/assets/manifest.json b/material/assets/manifest.json
@@ -5,12 +5,12 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.00ecb175.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3f4c5856.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.3f4c5856.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.45122f27.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.45122f27.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.fa8597d9.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.fa8597d9.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.e03a20ad.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.e03a20ad.min.css.map",
   "overrides/assets/javascripts/bundle.js": "overrides/assets/javascripts/bundle.e5217812.min.js",
   "overrides/assets/javascripts/bundle.js.map": "overrides/assets/javascripts/bundle.e5217812.min.js.map",
-  "overrides/assets/stylesheets/main.css": "overrides/assets/stylesheets/main.c2cc92d1.min.css",
-  "overrides/assets/stylesheets/main.css.map": "overrides/assets/stylesheets/main.c2cc92d1.min.css.map"
+  "overrides/assets/stylesheets/main.css": "overrides/assets/stylesheets/main.01a7853e.min.css",
+  "overrides/assets/stylesheets/main.css.map": "overrides/assets/stylesheets/main.01a7853e.min.css.map"
 }
diff --git a/material/assets/stylesheets/main.45122f27.min.css b/material/assets/stylesheets/main.45122f27.min.css
diff --git a/material/assets/stylesheets/main.45122f27.min.css.map b/material/assets/stylesheets/main.45122f27.min.css.map
diff --git a/material/assets/stylesheets/main.fa8597d9.min.css b/material/assets/stylesheets/main.fa8597d9.min.css
diff --git a/material/assets/stylesheets/main.fa8597d9.min.css.map b/material/assets/stylesheets/main.fa8597d9.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.45122f27.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.fa8597d9.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e03a20ad.min.css' | url }}">

diff --git a/.../assets/stylesheets/main.c2cc92d1.min.css → .../assets/stylesheets/main.01a7853e.min.css b/.../assets/stylesheets/main.c2cc92d1.min.css → .../assets/stylesheets/main.01a7853e.min.css
diff --git a/material/overrides/assets/stylesheets/main.01a7853e.min.css.map b/material/overrides/assets/stylesheets/main.01a7853e.min.css.map
diff --git a/material/overrides/assets/stylesheets/main.c2cc92d1.min.css.map b/material/overrides/assets/stylesheets/main.c2cc92d1.min.css.map
diff --git a/material/overrides/main.html b/material/overrides/main.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.c2cc92d1.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.01a7853e.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

diff --git a/src/assets/stylesheets/main/layout/_search.scss b/src/assets/stylesheets/main/layout/_search.scss
@@ -259,7 +259,7 @@
 
     // Adjust appearance when search is active
     [data-md-toggle="search"]:checked ~ .md-header & {
-      box-shadow: 0 0 px2rem(12px) var(--md-default-fg-color--lightest);
+      box-shadow: 0 0 px2rem(12px) hsla(0, 0%, 0%, 0.07);
     }
 
     // [tablet portrait -]: Search modal

diff --git a/src/overrides/assets/stylesheets/main/_shame.scss b/src/overrides/assets/stylesheets/main/_shame.scss
@@ -47,7 +47,13 @@
 
     // Icon search input
     .md-input {
-      box-shadow: 0 0 px2rem(12px) var(--md-default-fg-color--lightest);
+      background: var(--md-default-bg-color);
+      box-shadow: 0 0 px2rem(12px) hsla(0, 0%, 0%, 0.07);
+
+      // Slate theme, i.e. dark mode
+      [data-md-color-scheme="slate"] & {
+        background: var(--md-code-bg-color);
+      }
     }
   }
 
@@ -99,7 +105,7 @@
       padding: px2rem(4px) px2rem(12px);
       border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
 
-      // TODO:
+      // Omit border on last child
       &:last-child {
         border-bottom: none;
       }
@@ -113,6 +119,11 @@
       img {
         width: px2rem(18px);
         height: px2rem(18px);
+
+        // Slate theme, i.e. dark mode
+        [data-md-color-scheme="slate"] &[src*=squidfunk] {
+          filter: invert(1);
+        }
       }
     }
   }