From: Dan Brown <redacted>
Date: Thu, 27 Nov 2025 21:55:32 +0000 (+0000)
Subject: Styles: Made non-active dark/light css variables exist by default
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/bb350639c6be27c746ab886c70f620e39eebfa05

Styles: Made non-active dark/light css variables exist by default

This means that it would be possible to jump between light/dark mode
with just the class, and no reload needed.
Not something we'll directly use right now, but may be useful in
customizations.
---

diff --git a/resources/views/layouts/parts/custom-styles.blade.php b/resources/views/layouts/parts/custom-styles.blade.php
index bfdcc8512..b31334e73 100644
--- a/resources/views/layouts/parts/custom-styles.blade.php
+++ b/resources/views/layouts/parts/custom-styles.blade.php
@@ -1,15 +1,22 @@
-@php
-    $settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
-@endphp
 <style>
     :root {
-        --color-primary: {{ setting('app-color' . $settingSuffix) }};
-        --color-primary-light: {{ setting('app-color-light' . $settingSuffix) }};
-        --color-link: {{ setting('link-color' . $settingSuffix) }};
-        --color-bookshelf: {{ setting('bookshelf-color' . $settingSuffix)}};
-        --color-book: {{ setting('book-color' . $settingSuffix)}};
-        --color-chapter: {{ setting('chapter-color' . $settingSuffix)}};
-        --color-page: {{ setting('page-color' . $settingSuffix)}};
-        --color-page-draft: {{ setting('page-draft-color' . $settingSuffix)}};
+        --color-primary: {{ setting('app-color') }};
+        --color-primary-light: {{ setting('app-color-light') }};
+        --color-link: {{ setting('link-color') }};
+        --color-bookshelf: {{ setting('bookshelf-color') }};
+        --color-book: {{ setting('book-color') }};
+        --color-chapter: {{ setting('chapter-color') }};
+        --color-page: {{ setting('page-color') }};
+        --color-page-draft: {{ setting('page-draft-color') }};
+    }
+    :root.dark-mode {
+        --color-primary: {{ setting('app-color-dark') }};
+        --color-primary-light: {{ setting('app-color-light-dark') }};
+        --color-link: {{ setting('link-color-dark') }};
+        --color-bookshelf: {{ setting('bookshelf-color-dark') }};
+        --color-book: {{ setting('book-color-dark') }};
+        --color-chapter: {{ setting('chapter-color-dark') }};
+        --color-page: {{ setting('page-color-dark') }};
+        --color-page-draft: {{ setting('page-draft-color-dark') }};
     }
 </style>
diff --git a/tests/Settings/SettingsTest.php b/tests/Settings/SettingsTest.php
index 9d45706e7..a3e65b483 100644
--- a/tests/Settings/SettingsTest.php
+++ b/tests/Settings/SettingsTest.php
@@ -101,4 +101,17 @@ class SettingsTest extends TestCase
             file_get_contents(public_path('favicon.ico')),
         );
     }
+
+    public function test_both_light_and_dark_colors_are_used_in_the_base_view()
+    {
+        // To allow for dynamic color changes on the front-end where desired.
+        $this->setSettings(['page-color' => 'superlightblue', 'page-color-dark' => 'superdarkblue']);
+
+        $resp = $this->get('/login');
+
+        $resp->assertSee(':root {');
+        $resp->assertSee('superlightblue');
+        $resp->assertSee(':root.dark-mode {');
+        $resp->assertSee('superdarkblue');
+    }
 }