From 54cb434cd3514a870261b96af2d404b109a43794 Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Mon, 25 Nov 2024 16:37:09 +0100
Subject: [PATCH] Increase dark mode contrast

---
 themes/maik-blog/assets/js/theme.js          |  8 ++++----
 themes/maik-blog/assets/scss/_header.scss    |  4 ++--
 themes/maik-blog/assets/scss/_logo.scss      |  4 ++--
 themes/maik-blog/assets/scss/_main.scss      | 16 ++++++++--------
 themes/maik-blog/assets/scss/_menu.scss      |  4 ++--
 themes/maik-blog/assets/scss/_variables.scss | 13 +++++++++++--
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/themes/maik-blog/assets/js/theme.js b/themes/maik-blog/assets/js/theme.js
index 87842ed..f21c6ff 100644
--- a/themes/maik-blog/assets/js/theme.js
+++ b/themes/maik-blog/assets/js/theme.js
@@ -8,8 +8,8 @@ var metaThemeColor = document.querySelector("meta[name=theme-color]");
 if (theme !== null) {
     document.body.classList.toggle("dark-theme", isDark);
     isDark
-        ? metaThemeColor.setAttribute("content", "#252627")
-        : metaThemeColor.setAttribute("content", "#fafafa");
+        ? metaThemeColor.setAttribute("content", "#1b1c1c")
+        : metaThemeColor.setAttribute("content", "#f9f9f9");
 }
 
 themeToggle.addEventListener("click", () => {
@@ -20,6 +20,6 @@ themeToggle.addEventListener("click", () => {
             document.body.classList.contains("dark-theme") ? "dark" : "light"
         );
     document.body.classList.contains("dark-theme")
-        ? metaThemeColor.setAttribute("content", "#252627")
-        : metaThemeColor.setAttribute("content", "#fafafa");
+        ? metaThemeColor.setAttribute("content", "#1b1c1c")
+        : metaThemeColor.setAttribute("content", "#f9f9f9");
 });
diff --git a/themes/maik-blog/assets/scss/_header.scss b/themes/maik-blog/assets/scss/_header.scss
index 7218d3c..200a7f4 100644
--- a/themes/maik-blog/assets/scss/_header.scss
+++ b/themes/maik-blog/assets/scss/_header.scss
@@ -1,5 +1,5 @@
 .header {
-    background: #fafafa;
+    background: $light-navbar;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -7,7 +7,7 @@
     padding: 20px;
 
     .dark-theme & {
-        background: #242626;
+        background: $dark-navbar;
     }
 
     &__right {
diff --git a/themes/maik-blog/assets/scss/_logo.scss b/themes/maik-blog/assets/scss/_logo.scss
index 7b5bf63..8b9179e 100644
--- a/themes/maik-blog/assets/scss/_logo.scss
+++ b/themes/maik-blog/assets/scss/_logo.scss
@@ -22,13 +22,13 @@
         display: inline-block;
         width: 10px;
         height: 1rem;
-        background: #252627;
+        background: $light-color;
         margin-left: 2px;
         border-radius: 1px;
         animation: cursor 1s infinite;
 
         .dark-theme & {
-            background: #fafafa;
+            background: $dark-color;
         }
     }
 
diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 57c4ea5..2a62962 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -2,14 +2,14 @@
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
-    background: #212020;
+    background: $scrollbar-background;
 }
 
 ::-webkit-scrollbar-thumb {
     background: #888;
 
     &:hover {
-        background: #dcdcdc;
+        background: $scrollbar-color;
     }
 }
 
@@ -141,7 +141,7 @@ figure {
         padding: 5px;
 
         .dark-theme & {
-            background-color: #ffffff4f;
+            background-color: $dark-image-border;
         }
     }
 
@@ -243,11 +243,11 @@ figure {
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        background-color: #212020ec;
+        background-color: transparentize(darken($dark-background, 5%), 0.08);
         z-index: 10000;
 
         figcaption {
-            color: #ddd3c6;
+            color: $dark-color;
             font-size: 1.5rem;
         }
 
@@ -257,7 +257,7 @@ figure {
             text-decoration: underline;
             cursor: pointer;
             display: block;
-            color: #999288;
+            color: transparentize($dark-color, 0.43);
         }
     }
 }
@@ -417,12 +417,12 @@ svg {
 }
 
 .screen-reader-text:focus {
-    background-color: #f1f1f1;
+    background-color: $screen-reader-text-background;
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
     clip-path: none;
-    color: #21759b;
+    color: $screen-reader-text-color;
     display: block;
     font-size: 14px;
     font-size: 0.875rem;
diff --git a/themes/maik-blog/assets/scss/_menu.scss b/themes/maik-blog/assets/scss/_menu.scss
index 871d0c0..2804586 100644
--- a/themes/maik-blog/assets/scss/_menu.scss
+++ b/themes/maik-blog/assets/scss/_menu.scss
@@ -1,11 +1,11 @@
 .menu {
-    background: #fafafa;
+    background: $light-navbar;
     border-right: 1px solid;
     margin-right: 18px;
     z-index: 9999;
 
     .dark-theme & {
-        background: #252627;
+        background: $dark-navbar;
     }
 
     @media #{$media-size-phone} {
diff --git a/themes/maik-blog/assets/scss/_variables.scss b/themes/maik-blog/assets/scss/_variables.scss
index 1541a84..d9102bd 100644
--- a/themes/maik-blog/assets/scss/_variables.scss
+++ b/themes/maik-blog/assets/scss/_variables.scss
@@ -6,13 +6,22 @@ $light-background-secondary: #eaeaea;
 $light-color: #222;
 $light-color-secondary: #767676;
 $light-border-color: #dcdcdc;
+$light-navbar: #f9f9f9;
 
 /* dark theme colors */
-$dark-background: #272a2b;
+$dark-background: #1c1f1f;
 $dark-background-secondary: #3b3d42;
-$dark-color: #ddd3c6;
+$dark-color: #eee9e2;
 $dark-color-secondary: #73747b;
 $dark-border-color: #4a4b50;
+$dark-navbar: #1b1c1c;
+$dark-image-border: #ffffff3f;
+
+$scrollbar-background: #212020;
+$scrollbar-color: #dcdcdc;
+
+$screen-reader-text-background: #f1f1f1;
+$screen-reader-text-color: #21759b;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-phone-min: "(min-width: 684px)";