alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ feat(theme-switcher)!: respect theme_default when JS is enabled (#224)

Browse Source 
BREAKING CHANGE: changes the behaviour of `theme_default`
This commit is contained in:
Óscar Fernández
2023-11-25 00:08:58 +01:00
committed by GitHub
parent c2664c85cd
commit bf31f7ff47
28 changed files with 76 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
static/js/initializeTheme.js
View File

@@ -1,17 +1,22 @@
(function () {
// Get the current theme from the browser's local storage.
// This allows the user's theme preference to persist across sessions.
const currentTheme = localStorage.getItem('theme');
// Get the default theme from the HTML data-theme attribute.
const defaultTheme = document.documentElement.getAttribute('data-theme');
// Check if the current theme is stored in local storage.
if (currentTheme) {
// If a theme is found in local storage, apply it to the document.
document.documentElement.setAttribute('data-theme', currentTheme);
// Set the data-default-theme attribute only if defaultTheme is not null.
if (defaultTheme) {
document.documentElement.setAttribute('data-default-theme', defaultTheme);
}
// Attempt to retrieve the current theme from the browser's local storage.
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
document.documentElement.setAttribute('data-theme', storedTheme);
} else if (defaultTheme) {
document.documentElement.setAttribute('data-theme', defaultTheme);
} else {
// If no theme is found in local storage, determine if the user's system prefers a dark color scheme.
// If no theme is found in local storage and no default theme is set, use user's system preference.
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Set the document's theme attribute to match the system preference.
document.documentElement.setAttribute('data-theme', isSystemDark ? 'dark' : 'light');
}
})();

2
static/js/initializeTheme.min.js vendored
View File

@@ -1 +1 @@
!function(){var e=localStorage.getItem("theme");e?document.documentElement.setAttribute("data-theme",e):(e=window.matchMedia("(prefers-color-scheme: dark)").matches,document.documentElement.setAttribute("data-theme",e?"dark":"light"))}();
!function(){var t=document.documentElement.getAttribute("data-theme"),e=(t&&document.documentElement.setAttribute("data-default-theme",t),localStorage.getItem("theme"));e?document.documentElement.setAttribute("data-theme",e):t?document.documentElement.setAttribute("data-theme",t):(e=window.matchMedia("(prefers-color-scheme: dark)").matches,document.documentElement.setAttribute("data-theme",e?"dark":"light"))}();

48
static/js/themeSwitcher.js
View File

@@ -1,60 +1,54 @@
// Get the theme switcher button elements.
const themeSwitcher = document.querySelector(".theme-switcher");
const themeResetter = document.querySelector(".theme-resetter");
const defaultTheme = document.documentElement.getAttribute('data-default-theme');
// Retrieve theme from either the localStorage or the data-theme attribute on the document element.
let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');
function getSystemThemePreference() {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
// Determine the initial theme.
let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme') || getSystemThemePreference();
function setTheme(theme, saveToLocalStorage = false) {
document.documentElement.setAttribute("data-theme", theme);
currentTheme = theme;
let togglePressed = theme === "dark" ? "true" : "false";
themeSwitcher.setAttribute("aria-pressed", togglePressed);
themeSwitcher.setAttribute("aria-pressed", theme === "dark");
if (saveToLocalStorage) {
localStorage.setItem("theme", theme);
themeResetter.classList.add("has-custom-theme");
themeResetter.setAttribute("aria-hidden", "false");
} else {
localStorage.removeItem("theme");
themeResetter.classList.remove("has-custom-theme");
themeResetter.setAttribute("aria-hidden", "true");
}
// Dispatch a custom event for comment systems.
const event = new CustomEvent("themeChanged", {
detail: { theme: theme }
});
window.dispatchEvent(event);
window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
}
function resetTheme() {
setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
setTheme(defaultTheme || getSystemThemePreference());
}
// Function to switch between dark and light themes.
function switchTheme() {
// Set the new theme based on the current theme.
const newTheme = currentTheme === "dark" ? "light" : "dark";
setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
setTheme(currentTheme === "dark" ? "light" : "dark", true);
}
// Initialize the theme switcher button.
themeSwitcher.addEventListener("click", switchTheme, false);
themeResetter.addEventListener("click", resetTheme, false);
themeSwitcher.addEventListener("click", switchTheme);
themeResetter.addEventListener("click", resetTheme);
themeSwitcher.setAttribute("role", "button");
let togglePressed = currentTheme === "dark" ? "true" : "false";
themeSwitcher.setAttribute("aria-pressed", togglePressed);
// Update the theme based on system preference if the user hasn't manually changed the theme.
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
const newTheme = e.matches ? "dark" : "light";
setTheme(newTheme);
});
// Update the theme based on system preference if necessary.
if (!defaultTheme) {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
setTheme(e.matches ? "dark" : "light");
});
}
// Set initial ARIA attribute and custom theme class.
themeSwitcher.setAttribute("aria-pressed", currentTheme === "dark");
if (localStorage.getItem("theme")) {
themeResetter.classList.add("has-custom-theme");
} else {
themeResetter.classList.remove("has-custom-theme");
}

2
static/js/themeSwitcher.min.js vendored
View File

@@ -1 +1 @@
const themeSwitcher=document.querySelector(".theme-switcher"),themeResetter=document.querySelector(".theme-resetter");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e);var r="dark"===(currentTheme=e)?"true":"false",r=(themeSwitcher.setAttribute("aria-pressed",r),t?(localStorage.setItem("theme",e),themeResetter.classList.add("has-custom-theme"),themeResetter.setAttribute("aria-hidden","false")):(localStorage.removeItem("theme"),themeResetter.classList.remove("has-custom-theme"),themeResetter.setAttribute("aria-hidden","true")),new CustomEvent("themeChanged",{detail:{theme:e}}));window.dispatchEvent(r)}function resetTheme(){setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeResetter.addEventListener("click",resetTheme,!1),themeSwitcher.setAttribute("role","button");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}),localStorage.getItem("theme")?themeResetter.classList.add("has-custom-theme"):themeResetter.classList.remove("has-custom-theme");
const themeSwitcher=document.querySelector(".theme-switcher"),themeResetter=document.querySelector(".theme-resetter"),defaultTheme=document.documentElement.getAttribute("data-default-theme");function getSystemThemePreference(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme")||getSystemThemePreference();function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,themeSwitcher.setAttribute("aria-pressed","dark"===e),t?(localStorage.setItem("theme",e),themeResetter.classList.add("has-custom-theme")):(localStorage.removeItem("theme"),themeResetter.classList.remove("has-custom-theme")),window.dispatchEvent(new CustomEvent("themeChanged",{detail:{theme:e}}))}function resetTheme(){setTheme(defaultTheme||getSystemThemePreference())}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme),themeResetter.addEventListener("click",resetTheme),defaultTheme||window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}),themeSwitcher.setAttribute("aria-pressed","dark"===currentTheme),localStorage.getItem("theme")&&themeResetter.classList.add("has-custom-theme");