diff options
author | 2024-01-20 13:28:04 +0800 | |
---|---|---|
committer | 2024-01-20 13:28:04 +0800 | |
commit | 075bffd481f2cba552b5d3025b6ecd6ad0fb74e1 (patch) | |
tree | b2cbbfffea9ba14bcef052ca9e8035517b865f99 /pydis_site | |
parent | Dark: 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.js | 6 |
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); |