✨ 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 () {
|
(function () {
|
||||||
// Get the current theme from the browser's local storage.
|
// Get the default theme from the HTML data-theme attribute.
|
||||||
// This allows the user's theme preference to persist across sessions.
|
const defaultTheme = document.documentElement.getAttribute('data-theme');
|
||||||
const currentTheme = localStorage.getItem('theme');
|
|
||||||
|
|
||||||
// Check if the current theme is stored in local storage.
|
// Set the data-default-theme attribute only if defaultTheme is not null.
|
||||||
if (currentTheme) {
|
if (defaultTheme) {
|
||||||
// If a theme is found in local storage, apply it to the document.
|
document.documentElement.setAttribute('data-default-theme', defaultTheme);
|
||||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
}
|
||||||
|
|
||||||
|
// 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 {
|
} 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;
|
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');
|
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.
|
// Get the theme switcher button elements.
|
||||||
const themeSwitcher = document.querySelector(".theme-switcher");
|
const themeSwitcher = document.querySelector(".theme-switcher");
|
||||||
const themeResetter = document.querySelector(".theme-resetter");
|
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.
|
function getSystemThemePreference() {
|
||||||
let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');
|
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) {
|
function setTheme(theme, saveToLocalStorage = false) {
|
||||||
document.documentElement.setAttribute("data-theme", theme);
|
document.documentElement.setAttribute("data-theme", theme);
|
||||||
currentTheme = theme;
|
currentTheme = theme;
|
||||||
let togglePressed = theme === "dark" ? "true" : "false";
|
themeSwitcher.setAttribute("aria-pressed", theme === "dark");
|
||||||
themeSwitcher.setAttribute("aria-pressed", togglePressed);
|
|
||||||
|
|
||||||
if (saveToLocalStorage) {
|
if (saveToLocalStorage) {
|
||||||
localStorage.setItem("theme", theme);
|
localStorage.setItem("theme", theme);
|
||||||
themeResetter.classList.add("has-custom-theme");
|
themeResetter.classList.add("has-custom-theme");
|
||||||
themeResetter.setAttribute("aria-hidden", "false");
|
|
||||||
} else {
|
} else {
|
||||||
localStorage.removeItem("theme");
|
localStorage.removeItem("theme");
|
||||||
themeResetter.classList.remove("has-custom-theme");
|
themeResetter.classList.remove("has-custom-theme");
|
||||||
themeResetter.setAttribute("aria-hidden", "true");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dispatch a custom event for comment systems.
|
// Dispatch a custom event for comment systems.
|
||||||
const event = new CustomEvent("themeChanged", {
|
window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
|
||||||
detail: { theme: theme }
|
|
||||||
});
|
|
||||||
window.dispatchEvent(event);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetTheme() {
|
function resetTheme() {
|
||||||
setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
setTheme(defaultTheme || getSystemThemePreference());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to switch between dark and light themes.
|
// Function to switch between dark and light themes.
|
||||||
function switchTheme() {
|
function switchTheme() {
|
||||||
// Set the new theme based on the current theme.
|
setTheme(currentTheme === "dark" ? "light" : "dark", true);
|
||||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
|
||||||
setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize the theme switcher button.
|
// Initialize the theme switcher button.
|
||||||
themeSwitcher.addEventListener("click", switchTheme, false);
|
themeSwitcher.addEventListener("click", switchTheme);
|
||||||
themeResetter.addEventListener("click", resetTheme, false);
|
themeResetter.addEventListener("click", resetTheme);
|
||||||
|
|
||||||
themeSwitcher.setAttribute("role", "button");
|
// Update the theme based on system preference if necessary.
|
||||||
let togglePressed = currentTheme === "dark" ? "true" : "false";
|
if (!defaultTheme) {
|
||||||
themeSwitcher.setAttribute("aria-pressed", togglePressed);
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
|
||||||
|
setTheme(e.matches ? "dark" : "light");
|
||||||
// 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);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// Set initial ARIA attribute and custom theme class.
|
||||||
|
themeSwitcher.setAttribute("aria-pressed", currentTheme === "dark");
|
||||||
if (localStorage.getItem("theme")) {
|
if (localStorage.getItem("theme")) {
|
||||||
themeResetter.classList.add("has-custom-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