From 7559cb72da7e8b84dd81b33d54ba6c6abd156fd7 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 20:55:34 +0800 Subject: Dark: Name JS & CSS files according to their content We have the CSS for the navbar in base.css, the relevant files only contain code for the theme toggle, so they should be named as such. If we ever implement CSS variables per-theme, they could then be done in `themes.css`. --- pydis_site/static/js/base/themes.js | 91 +++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 pydis_site/static/js/base/themes.js (limited to 'pydis_site/static/js/base/themes.js') diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js new file mode 100644 index 00000000..2a57cad4 --- /dev/null +++ b/pydis_site/static/js/base/themes.js @@ -0,0 +1,91 @@ +"use strict"; + +const defaultTheme = "light"; +const lightStylesheet = document.getElementById("bulma-css"); +const darkStylesheet = document.getElementById("bulma-css-dark"); + +// Get saved preference for the site in local storage, optionally accounting +// for system preference used when a page loads. +function getCurrentTheme(systemPrefers) { + const theme = localStorage.getItem("theme"); + + if (theme !== null && theme !== "") + return theme; + + if (systemPrefers !== undefined) + return systemPrefers; + + return defaultTheme; +} + +// Disable & enable the correct CSS stylesheets based on chosen theme. +function setStyleSheets(newTheme) { + switch (newTheme) { + case "light": + lightStylesheet.disabled = false; + darkStylesheet.disabled = true; + break; + case "dark": + lightStylesheet.disabled = true; + darkStylesheet.disabled = false; + break; + } + + document.querySelector("html").setAttribute("data-theme", newTheme); +} + +// Reflect chosen theme on the switch toggle. +function toggleThemeSwitch(newTheme) { + const switchToggle = document.getElementById("theme-switch"); + const knob = document.getElementById("theme-knob"); + + switch (newTheme) { + case "light": + knob.classList.remove("dark"); + knob.classList.add("light"); + setTimeout(function() { + switchToggle.classList.remove("dark"); + switchToggle.classList.add("light"); + }, 100); + break; + case "dark": + knob.classList.remove("light"); + knob.classList.add("dark"); + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); + break; + } +} + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + let theme; + const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); + + if (systemPrefersDark.matches) + theme = getCurrentTheme("dark"); + else + theme = getCurrentTheme(); + + setStyleSheets(theme); + toggleThemeSwitch(theme); + + systemPrefersDark.addEventListener("change", ({matches: isDark}) => { + const newTheme = isDark ? "dark" : "light"; + // Let the new system preference take precedence over toggle preference + // on page reloads. + localStorage.removeItem("theme"); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }) + + const switchToggle = document.getElementById("theme-switch"); + switchToggle.addEventListener("click", () => { + const newTheme = getCurrentTheme() === "light" ? "dark" : "light"; + localStorage.setItem("theme", newTheme); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }); +}); -- cgit v1.2.3 From 9f04f20268230e8bc2594c325214cde3678335b0 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 18 Jan 2024 07:46:54 +0800 Subject: Dark: Improve order of switching stylesheets --- pydis_site/static/js/base/themes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/js/base/themes.js') diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js index 2a57cad4..c1a5f006 100644 --- a/pydis_site/static/js/base/themes.js +++ b/pydis_site/static/js/base/themes.js @@ -26,8 +26,8 @@ function setStyleSheets(newTheme) { darkStylesheet.disabled = true; break; case "dark": - lightStylesheet.disabled = true; darkStylesheet.disabled = false; + lightStylesheet.disabled = true; break; } -- cgit v1.2.3 From 05bbeda4e060f341a64b4d47fd618224f6b73bb1 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 18 Jan 2024 10:02:12 +0800 Subject: Dark: Set correct theme immediately when the script loads This fixes the latency previously observed on page loads. We still have to put switch toggling after page loads though. Genius idea by wookie. Co-authored-by: wookie184 --- pydis_site/static/js/base/themes.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'pydis_site/static/js/base/themes.js') diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js index c1a5f006..9c279d21 100644 --- a/pydis_site/static/js/base/themes.js +++ b/pydis_site/static/js/base/themes.js @@ -59,19 +59,19 @@ function toggleThemeSwitch(newTheme) { } } -// Executed when the page has finished loading. -document.addEventListener("DOMContentLoaded", () => { - let theme; - const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); +let theme; +const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); - if (systemPrefersDark.matches) - theme = getCurrentTheme("dark"); - else - theme = getCurrentTheme(); +if (systemPrefersDark.matches) + theme = getCurrentTheme("dark"); +else + theme = getCurrentTheme(); - setStyleSheets(theme); - toggleThemeSwitch(theme); +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 -- cgit v1.2.3 From 4de6d4064bb072e4ad9ab96035e3e6e635ff8753 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 18 Jan 2024 10:59:09 +0800 Subject: Dark: Possibly fix FOUC during theme switch --- pydis_site/static/js/base/themes.js | 8 ++++---- pydis_site/templates/base/navbar.html | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'pydis_site/static/js/base/themes.js') diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js index 9c279d21..c5de8d91 100644 --- a/pydis_site/static/js/base/themes.js +++ b/pydis_site/static/js/base/themes.js @@ -22,12 +22,12 @@ function getCurrentTheme(systemPrefers) { function setStyleSheets(newTheme) { switch (newTheme) { case "light": - lightStylesheet.disabled = false; - darkStylesheet.disabled = true; + lightStylesheet.rel = "stylesheet"; + darkStylesheet.rel = "stylesheet alternate"; break; case "dark": - darkStylesheet.disabled = false; - lightStylesheet.disabled = true; + darkStylesheet.rel = "stylesheet"; + lightStylesheet.rel = "stylesheet alternate"; break; } diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 3aa860cf..2fcd8ad8 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -1,9 +1,9 @@ {% load static %} {% block head %} - - - + + + {% endblock %}