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/js/anatole-theme-switcher.js | 42 ++++++++++--------------------------------
1 files changed, 10 insertions(+), 32 deletions(-)
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
--
Gitblit v1.10.0