2024-11-10 16:43:55 -05:00
|
|
|
/*!
|
2025-01-11 02:16:13 -05:00
|
|
|
* Minimal theme switcher using a checkbox
|
2024-11-10 16:43:55 -05:00
|
|
|
*
|
|
|
|
|
* Pico.css - https://picocss.com
|
2025-02-06 04:28:07 -05:00
|
|
|
* Copyright 2019-2025 - Licensed under MIT
|
2025-01-11 02:16:13 -05:00
|
|
|
* Modified by Yohn https://github.com/Yohn/PicoCSS
|
2024-11-10 16:43:55 -05:00
|
|
|
*/
|
|
|
|
|
|
2025-01-11 02:16:13 -05:00
|
|
|
const SwitchColorMode = {
|
2024-11-12 00:35:16 -05:00
|
|
|
// Config
|
|
|
|
|
_scheme: "auto",
|
2025-01-11 02:16:13 -05:00
|
|
|
toggleSelector: "input[name='color-mode-toggle']",
|
2024-11-12 00:35:16 -05:00
|
|
|
rootAttribute: "data-theme",
|
|
|
|
|
localStorageKey: "picoPreferredColorScheme",
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Init
|
|
|
|
|
init() {
|
2025-01-11 02:16:13 -05:00
|
|
|
this.checkbox = document.querySelector(this.toggleSelector);
|
|
|
|
|
if (!this.checkbox) {
|
|
|
|
|
console.error("Theme switcher toggle not found");
|
|
|
|
|
return;
|
|
|
|
|
}
|
2025-02-06 04:28:07 -05:00
|
|
|
|
|
|
|
|
// If first visit, use the theme from <html> attribute; otherwise, use stored preference
|
|
|
|
|
this.scheme = this.schemeFromLocalStorage ?? this.schemeFromHTML;
|
|
|
|
|
|
|
|
|
|
// Set checkbox state based on the applied theme
|
|
|
|
|
this.checkbox.checked = this.scheme === "dark";
|
|
|
|
|
|
|
|
|
|
// Listen for user changes
|
|
|
|
|
this.checkbox.addEventListener("change", () => {
|
|
|
|
|
this.scheme = this.checkbox.checked ? "dark" : "light";
|
|
|
|
|
this.schemeToLocalStorage();
|
|
|
|
|
});
|
2024-11-12 00:35:16 -05:00
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Get color scheme from local storage
|
|
|
|
|
get schemeFromLocalStorage() {
|
2025-02-06 04:28:07 -05:00
|
|
|
return window.localStorage?.getItem(this.localStorageKey);
|
2024-11-12 00:35:16 -05:00
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2025-02-06 04:28:07 -05:00
|
|
|
// Get the default theme from the <html> attribute
|
|
|
|
|
get schemeFromHTML() {
|
|
|
|
|
return document.documentElement.getAttribute(this.rootAttribute) ?? "auto";
|
2024-11-12 00:35:16 -05:00
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2025-02-06 04:28:07 -05:00
|
|
|
// Preferred color scheme from system
|
|
|
|
|
get preferredColorScheme() {
|
|
|
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
2024-11-12 00:35:16 -05:00
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Set scheme
|
|
|
|
|
set scheme(scheme) {
|
2025-01-11 02:16:13 -05:00
|
|
|
if (scheme === "auto") {
|
2024-11-12 00:35:16 -05:00
|
|
|
this._scheme = this.preferredColorScheme;
|
2025-01-11 02:16:13 -05:00
|
|
|
} else if (scheme === "dark" || scheme === "light") {
|
2024-11-12 00:35:16 -05:00
|
|
|
this._scheme = scheme;
|
|
|
|
|
}
|
|
|
|
|
this.applyScheme();
|
|
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Get scheme
|
|
|
|
|
get scheme() {
|
|
|
|
|
return this._scheme;
|
|
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Apply scheme
|
|
|
|
|
applyScheme() {
|
2025-02-06 04:28:07 -05:00
|
|
|
document.documentElement.setAttribute(this.rootAttribute, this._scheme);
|
2024-11-12 00:35:16 -05:00
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
|
2024-11-12 00:35:16 -05:00
|
|
|
// Store scheme to local storage
|
|
|
|
|
schemeToLocalStorage() {
|
|
|
|
|
window.localStorage?.setItem(this.localStorageKey, this.scheme);
|
|
|
|
|
},
|
2024-11-10 16:43:55 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Init
|
2025-02-06 04:28:07 -05:00
|
|
|
SwitchColorMode.init();
|
