Improved Darkmode (#167)v0.9.0

* Slightly adjusted the color scheme
* Adjusted Link Colors
* Made the look more minimalistic
* Updated Screenshots
* Added event listener to change theme automatically

6 files changed, 27 insertions, 45 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index 852e54e..08a33a3 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -3,7 +3,7 @@
 :root {
     --bg-color: #fff;
     --secondary-bg-color: #eeeeee;
-    --heading-color: #5f5f5f;
+    --heading-color: #464646;
     --body-color: rgba(0, 0, 0, 0.7);
     --post-color: rgba(0, 0, 0, 0.44);
     --border-color: rgba(0, 0, 0, 0.15);
@@ -14,17 +14,18 @@
     --tag-color: #424242;
     --blockquote-text-color: #858585;
     --blockquote-border-color: #dfe2e5;
+    --link-color: #0366d7;
     --thumbnail-height: 15em;
     scroll-padding-top: 100px;
 }
 
 html[data-theme='dark'] {
-    --bg-color: #292a2d;
-    --secondary-bg-color: #2c2d32;
-    --heading-color: rgb(169, 169, 179);
+    --bg-color: #010408;
+    --secondary-bg-color: rgb(56, 56, 56);;
+    --heading-color: #c9d1d9;
     --body-color: rgb(169, 169, 179);
     --post-color: rgba(0, 0, 0, 0.44);
-    --border-color: rgb(38, 38, 38);
+    --border-color: #30363d;
     --form-border-color: rgb(169, 169, 179);
     --form-button-hover-border-color: #fff;
     --pre-bg-color: rgb(33, 33, 45);
@@ -32,6 +33,7 @@ html[data-theme='dark'] {
     --tag-color: rgb(191, 191, 191);
     --blockquote-text-color: #808080;
     --blockquote-border-color: #424242;
+    --link-color: #58a6fe;
 }
 
 html {
@@ -41,7 +43,7 @@ html {
 
 body {
     color: var(--body-color);
-    font-family: 'Verdana', sans-serif;
+    font-family: 'PingHei', 'PingFang SC', Helvetica Neue, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
     font-size: 15px;
     width: 100%;
     margin: 0 auto 30px auto;
@@ -56,6 +58,7 @@ p {
 
 a {
     text-decoration: none;
+    color: var(--link-color);
 }
 
 blockquote {
@@ -100,12 +103,11 @@ pre {
 a:link,
 a:visited {
     opacity: 1;
-    color: var(--tag-color);
 }
 
 a:hover,
 a:active {
-    color: #2660ab;
+    color: var(--link-color);
 }
 
 /*basic styles ends*/
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
index 6a4f006..904d9e4 100644
--- a/assets/css/style.rtl.css
+++ b/assets/css/style.rtl.css
@@ -3,7 +3,7 @@
 :root {
     --bg-color: #fff;
     --secondary-bg-color: #eeeeee;
-    --heading-color: #5f5f5f;
+    --heading-color: #464646;
     --body-color: rgba(0, 0, 0, 0.7);
     --post-color: rgba(0, 0, 0, 0.44);
     --border-color: rgba(0, 0, 0, 0.15);
@@ -14,17 +14,18 @@
     --tag-color: #424242;
     --blockquote-text-color: #858585;
     --blockquote-border-color: #dfe2e5;
+    --link-color: #0366d7;
     --thumbnail-height: 15em;
     scroll-padding-top: 100px;
 }
 
 html[data-theme='dark'] {
-    --bg-color: #292a2d;
-    --secondary-bg-color: #2c2d32;
-    --heading-color: rgb(169, 169, 179);
+    --bg-color: #010408;
+    --secondary-bg-color: rgb(56, 56, 56);;
+    --heading-color: #c9d1d9;
     --body-color: rgb(169, 169, 179);
     --post-color: rgba(0, 0, 0, 0.44);
-    --border-color: rgb(38, 38, 38);
+    --border-color: #30363d;
     --form-border-color: rgb(169, 169, 179);
     --form-button-hover-border-color: #fff;
     --pre-bg-color: rgb(33, 33, 45);
@@ -32,6 +33,7 @@ html[data-theme='dark'] {
     --tag-color: rgb(191, 191, 191);
     --blockquote-text-color: #808080;
     --blockquote-border-color: #424242;
+    --link-color: #58a6fe;
 }
 
 html {
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index 5326c4f..4b69913 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -8,51 +8,26 @@ function setTheme(style) {
     localStorage.setItem('theme', style);
 }
 
-// Check if a theme was set manually
-function getMode()  {
-    return localStorage.getItem('mode') ? localStorage.getItem('mode') : null;
-}
-
-function setMode(mode)  {
-    localStorage.setItem('mode', mode);
-}
-
 function init() {
     // initialize default value
     const theme = getTheme();
-    const mode = getMode();
 
     // check if a preferred color theme is set for users that have never been to our site
     const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
     if (theme === null) {
         if (userPrefersDark) {
             setTheme('dark');
-            setMode('auto');
-        } else if (userPrefersLight){
-            setTheme('light');
-            setMode('auto');
         } else if (!document.documentElement.getAttribute('data-theme')) {
             setTheme('light');
         } else {
             setTheme(document.documentElement.getAttribute('data-theme'));
         }
     } else {
-
-        if (mode === 'auto') {
-            if (userPrefersDark) {
-                document.documentElement.setAttribute('data-theme', 'dark');
-            } else if (userPrefersLight){
-                document.documentElement.setAttribute('data-theme', 'light');
-            } 
-        }
-        else {
-            // load a user set theme theme
-            if (theme === 'light') {
-                document.documentElement.setAttribute('data-theme', 'light');
-            } else {
-                document.documentElement.setAttribute('data-theme', 'dark');
-            }
+        // load a stored theme
+        if (theme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
         }
     }
 }
@@ -66,12 +41,15 @@ function switchTheme() {
     } else {
         setTheme('light');
     }
-    setMode('user');
 }
 
+// Manual Switch
 document.addEventListener('DOMContentLoaded', function () {
     const themeSwitcher = document.querySelector('.theme-switch');
     themeSwitcher.addEventListener('click', switchTheme, false);
 }, false);
 
-init();
+// Automatic Switching
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
+
+init();
\ No newline at end of file
diff --git a/images/screenshot.png b/images/screenshot.png
index feb5286..94b4025 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/screenshot_dark.png b/images/screenshot_dark.png
index 939a6cd..5c9bfce 100644
--- a/images/screenshot_dark.png
+++ b/images/screenshot_dark.png
diff --git a/images/tn.png b/images/tn.png
index 5761d32..b68fe3d 100644
--- a/images/tn.png
+++ b/images/tn.png