more options to adjust color scheme

Author: heidkaemper

dist/toolbar.js

@@ -0,0 +1,29 @@
+@mixin light {
+    --color-text: #555;
+    --color-text-shadow: #fff;
+    --color-background: #fff;
+    --color-cell-border: #ddd;
+    --color-cell-hover: #ebebeb;
+}
+
+@mixin dark {
+    --color-text: #EDF2F7;
+    --color-text-shadow: #4A5568;
+    --color-background: #252a37;
+    --color-cell-border: #2D3748;
+    --color-cell-hover: #4A5568;
+}
+
+#toolbar {
+    @include light;
+}
+
+#toolbar[theme="dark"] {
+    @include dark;
+}
+
+#toolbar[theme="auto"] {
+    @media (prefers-color-scheme: dark) {
+        @include dark;
+    }
+}

resources/css/themes.scss

@@ -1,23 +1,11 @@
+@use "themes";
+
 @keyframes loaded {
     from { opacity: 0 }
     to { opacity: 1 }
 }
 
 #toolbar {
-    --color-text: #555;
-    --color-text-shadow: #fff;
-    --color-background: #fff;
-    --color-cell-border: #ddd;
-    --color-cell-hover: #ebebeb;
-
-    @media (prefers-color-scheme: dark) {
-        --color-text: #EDF2F7;
-        --color-text-shadow: #4A5568;
-        --color-background: #1A202C;
-        --color-cell-border: #2D3748;
-        --color-cell-hover: #4A5568;
-    }
-
     position: fixed;
     bottom: 0;
     left: 0;
@@ -98,7 +86,7 @@
     }
 
     &.debugbarClosed {
-        left: 40px;
+        left: 41px;
     }
 
     &.debugbarOpen,

resources/css/toolbar.scss

@@ -34,6 +34,7 @@
     class:isHidden
     class:debugbarClosed={ debugbarStatus === 'closed' }
     class:debugbarMinimized={ debugbarStatus === 'minimized' }
+    theme={toolbar?.theme ?? 'auto'}
 >
     {#if toolbar?.breakpoints}
         <Breakpoints breakpoints={toolbar.breakpoints}/>

resources/js/Toolbar.svelte

@@ -29,6 +29,7 @@ public function __invoke(Request $request)
             'template' => $this->getTemplate(),
             'cp_link' => $this->getCpLink(),
             'visibility' => config('statamic.toolbar.components.visibility', true),
+            'theme' => env('STATAMIC_TOOLBAR_THEME', config('debugbar.theme', 'auto')),
         ];
 
         $toolbarData = array_filter($toolbarData, fn ($value) => ! is_null($value));