✨ feat(theme-switcher)!: respect `theme_default` when JS is enabled (#224)
BREAKING CHANGE: changes the behaviour of `theme_default`main
Óscar Fernández
1 year ago
committed by
GitHub
parent
c2664c85cd
commit
bf31f7ff47
File diff suppressed because one or more lines are too long
@ -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');
|
||||
}
|
||||
})();
|
||||
|
||||
@ -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"))}();
|
||||
|
||||
@ -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.setAttribute("role", "button");
|
||||
let togglePressed = currentTheme === "dark" ? "true" : "false";
|
||||
themeSwitcher.setAttribute("aria-pressed", togglePressed);
|
||||
themeSwitcher.addEventListener("click", switchTheme);
|
||||
themeResetter.addEventListener("click", resetTheme);
|
||||
|
||||
// Update the theme based on system preference if the user hasn't manually changed the theme.
|
||||
// Update the theme based on system preference if necessary.
|
||||
if (!defaultTheme) {
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
|
||||
const newTheme = e.matches ? "dark" : "light";
|
||||
setTheme(newTheme);
|
||||
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");
|
||||
}
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue