From 88dbed325858196dccd7e8786fea3e8713196ef5 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sun, 18 Apr 2021 13:20:08 +0000
Subject: [PATCH] Improved Darkmode (#167)
---
assets/css/style.rtl.css | 12 +++--
images/tn.png | 0
assets/js/anatole-theme-switcher.js | 42 +++++----------------
images/screenshot_dark.png | 0
images/screenshot.png | 0
assets/css/style.css | 18 +++++----
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 @@
--tag-color: rgb(191, 191, 191);
--blockquote-text-color: #808080;
--blockquote-border-color: #424242;
+ --link-color: #58a6fe;
}
html {
@@ -41,7 +43,7 @@
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 @@
a {
text-decoration: none;
+ color: var(--link-color);
}
blockquote {
@@ -100,12 +103,11 @@
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 @@
--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 @@
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 @@
} 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
Binary files differ
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
Binary files differ
diff --git a/images/tn.png b/images/tn.png
index 5761d32..b68fe3d 100644
--- a/images/tn.png
+++ b/images/tn.png
Binary files differ
--
Gitblit v1.10.0