Dark mode for search (laravel#281)

* Dark mode for search * wip * Compile Assets --------- Co-authored-by: driesvints <[email protected]>
DigitalCloud · Apr 2, 2023 · a950dfc · a950dfc
1 parent 3073415
commit a950dfc
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/public/build/assets/app-0b249f60.css b/public/build/assets/app-0b249f60.css
diff --git a/public/build/assets/app-14f3b684.css b/public/build/assets/app-14f3b684.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-0b249f60.css",
+    "file": "assets/app-14f3b684.css",
     "isEntry": true,
     "src": "resources/css/app.css"
   },

diff --git a/resources/css/_search.css b/resources/css/_search.css
@@ -1,7 +1,9 @@
 @import '@docsearch/css/dist/_variables.css';
 @import '@docsearch/css/dist/modal.css';
 
-:root{--docsearch-primary-color:#FF2E1F;}
+:root{--docsearch-primary-color:theme('colors.red.500');}
+
+html[data-theme=dark]:root{--docsearch-primary-color:theme('colors.red.700');}
 
 .DocSearch-Button {
     width: 100%;

diff --git a/resources/views/partials/theme.blade.php b/resources/views/partials/theme.blade.php
@@ -3,8 +3,10 @@
         if (localStorage.theme === 'system') {
             if (e.matches) {
                 document.documentElement.classList.add('dark');
+                document.documentElement.setAttribute('data-theme', 'dark');
             } else {
                 document.documentElement.classList.remove('dark');
+                document.documentElement.setAttribute('data-theme', 'light');
             }
         }
 
@@ -20,20 +22,25 @@ function updateTheme() {
             case 'system':
                 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                     document.documentElement.classList.add('dark');
+                    document.documentElement.setAttribute('data-theme', 'dark');
                 } else {
                     document.documentElement.classList.remove('dark');
+                    document.documentElement.setAttribute('data-theme', 'light');
                 }
+
                 document.documentElement.setAttribute('color-theme', 'system');
                 break;
 
             case 'dark':
                 document.documentElement.classList.add('dark');
                 document.documentElement.setAttribute('color-theme', 'dark');
+                document.documentElement.setAttribute('data-theme', 'dark');
                 break;
 
             case 'light':
                 document.documentElement.classList.remove('dark');
                 document.documentElement.setAttribute('color-theme', 'light');
+                document.documentElement.setAttribute('data-theme', 'light');
                 break;
         }