aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site
diff options
context:
space:
mode:
authorGravatar hedy <[email protected]>2024-01-20 13:28:04 +0800
committerGravatar hedy <[email protected]>2024-01-20 13:28:04 +0800
commit075bffd481f2cba552b5d3025b6ecd6ad0fb74e1 (patch)
treeb2cbbfffea9ba14bcef052ca9e8035517b865f99 /pydis_site
parentDark: Restore border on github cards (diff)
Dark: Fix switch toggle when system preference is used
Thanks to wookie for finding the bug.
Diffstat (limited to 'pydis_site')
-rw-r--r--pydis_site/static/js/base/themes.js6
1 files changed, 4 insertions, 2 deletions
diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index f79b759d..46dba7b9 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -2,6 +2,7 @@
const defaultTheme = "light";
const stylesheet = document.getElementById("bulma-css");
+const htmlTag = document.querySelector("html");
// We include the dark stylesheet in base template to include the rel="preload",
// but remove the actual rel="stylesheet" element here because we won't need it.
@@ -32,7 +33,7 @@ function setStyleSheets(newTheme) {
break;
}
- document.querySelector("html").setAttribute("data-theme", newTheme);
+ htmlTag.setAttribute("data-theme", newTheme);
}
// Reflect chosen theme on the switch toggle.
@@ -73,6 +74,7 @@ setStyleSheets(theme);
// Executed when the page has finished loading.
document.addEventListener("DOMContentLoaded", () => {
toggleThemeSwitch(theme);
+
systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
const newTheme = isDark ? "dark" : "light";
// Let the new system preference take precedence over toggle preference
@@ -84,7 +86,7 @@ document.addEventListener("DOMContentLoaded", () => {
const switchToggle = document.getElementById("theme-switch");
switchToggle.addEventListener("click", () => {
- const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
+ const newTheme = htmlTag.getAttribute("data-theme") === "light" ? "dark" : "light";
localStorage.setItem("theme", newTheme);
setStyleSheets(newTheme);
toggleThemeSwitch(newTheme);