diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php
index 37270cf31..005fddfd0 100644
--- a/app/Config/setting-defaults.php
+++ b/app/Config/setting-defaults.php
@@ -22,6 +22,14 @@ return [
     'chapter-color'        => '#af4d0d',
     'page-color'           => '#206ea7',
     'page-draft-color'     => '#7e50b1',
+    'app-color-dark'       => '#195785',
+    'app-color-light-dark' => 'rgba(32,110,167,0.15)',
+    'link-color-dark'      => '#195785',
+    'bookshelf-color-dark' => '#ff5454',
+    'book-color-dark'      => '#389f60',
+    'chapter-color-dark'   => '#ee7a2d',
+    'page-color-dark'      => '#429fe3',
+    'page-draft-color-dark' => '#a66ce8',
     'app-custom-head'      => false,
     'registration-enabled' => false,
 
diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index aa560e8e0..c1b6af4c6 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -22,9 +22,6 @@ header {
   border-bottom: 1px solid #DDD;
   box-shadow: $bs-card;
   @include lightDark(border-bottom-color, #DDD, #000);
-  @include whenDark {
-    filter: saturate(0.8) brightness(0.8);
-  }
   .header-links {
     display: flex;
     align-items: center;
diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 3fc419046..19333faf7 100644
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -433,7 +433,7 @@ body.flexbox {
     display: none;
   }
   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    @include lightDark(opacity, 0.6, 0.7);
+    @include lightDark(opacity, 0.6, 0.75);
     transition: opacity ease-in-out 120ms;
     &:hover, &:focus-within {
       opacity: 1 !important;
@@ -442,7 +442,6 @@ body.flexbox {
       opacity: 1 !important;
     }
   }
-
 }
 
 @include smaller-than($m) {
diff --git a/resources/views/common/custom-styles.blade.php b/resources/views/common/custom-styles.blade.php
index f81939109..d261110c7 100644
--- a/resources/views/common/custom-styles.blade.php
+++ b/resources/views/common/custom-styles.blade.php
@@ -1,11 +1,21 @@
-<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
+<style id="custom-styles"
+       data-color="{{ setting('app-color') }}"
+       data-color-dark="{{ setting('app-color-dark') }}"
+       data-color-light="{{ setting('app-color-light') }}"
+       data-color-light-dark="{{ setting('app-color-light-dark') }}">
+
+    @php
+        $settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
+    @endphp
+
     :root {
-        --color-primary: {{ setting('app-color') }};
-        --color-primary-light: {{ setting('app-color-light') }};
-        --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')}};
+        --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)}};
     }
 </style>