diff --git a/resources/views/layouts/parts/custom-styles.blade.php b/resources/views/layouts/parts/custom-styles.blade.php
index bfdcc851289..b31334e7331 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 9d45706e77b..a3e65b483c9 100644
--- a/tests/Settings/SettingsTest.php
+++ b/tests/Settings/SettingsTest.php
@@ -101,4 +101,17 @@ public function test_updating_and_removing_app_icon()
             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');
+    }
 }