From 3683a0f2b6a0750f858afd4dd3e65bb9caf3ef5b Mon Sep 17 00:00:00 2001
From: Timothée Andres <andres.timothee@gmail.com>
Date: Sat, 19 Apr 2025 09:07:57 +0000
Subject: [PATCH] fix: theme switcher toggling incorrectly (#553)
---
assets/js/anatole-theme-switcher.js | 33 +++++++++++++++++++--------------
1 files changed, 19 insertions(+), 14 deletions(-)
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index 7346969..2eb8879 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -1,29 +1,33 @@
const getStoredThemeStyle = () => localStorage.getItem('theme');
-const setThemeClass = (style) => {
+const setThemeStyle = (style) => {
+ localStorage.setItem('theme', style);
const html = document.documentElement;
const prevTheme = [...html.classList].find((c) => c.match(/theme--(light|dark)/));
- if (!prevTheme) return;
- html.classList.remove(prevTheme);
+ if (prevTheme) {
+ html.classList.remove(prevTheme);
+ }
html.classList.add(`theme--${style}`);
};
-const setThemeStyle = (style) => {
- localStorage.setItem('theme', style);
- setThemeClass(style);
+const setDarkTheme = () => {
+ setThemeStyle('dark');
+};
+const setLightTheme = () => {
+ setThemeStyle('light');
};
const switchTheme = () => {
const currThemeStyle = getStoredThemeStyle();
switch (currThemeStyle) {
case 'light':
- setThemeStyle('dark');
+ setDarkTheme();
break;
case 'dark':
- setThemeStyle('light');
+ setLightTheme();
break;
default:
- setThemeStyle('light');
+ setLightTheme();
break;
}
};
@@ -37,14 +41,15 @@
false,
);
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
+window
+ .matchMedia('(prefers-color-scheme: dark)')
+ .addEventListener('change', (e) => (e.matches ? setDarkTheme() : setLightTheme()), false);
const currThemeStyle = getStoredThemeStyle();
if (currThemeStyle) {
setThemeStyle(currThemeStyle);
+} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ setDarkTheme();
} else {
- const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
- if (userPrefersDark) {
- setThemeStyle('dark');
- }
+ setLightTheme();
}
--
Gitblit v1.10.0