tobias/t-r.de
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replaced PicoCSS with fork (https://github.com/Yohn/PicoCSS) and added theme switching js file

Browse Source
This commit is contained in:
eclipse 2025-02-07 00:40:47 +01:00
parent c9b743c843
commit df450ff517
3 changed files with 2175 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2342
theme/static/css/pico.amber.css
View File

File diff suppressed because it is too large Load Diff

12
theme/static/css/pico.amber.min.css vendored
View File

File diff suppressed because one or more lines are too long

79
theme/static/js/SwitchColorMode.js Normal file
View File

@ -0,0 +1,79 @@
/*!
* Minimal theme switcher using a checkbox
*
* Pico.css - https://picocss.com
* Copyright 2019-2025 - Licensed under MIT
* Modified by Yohn https://github.com/Yohn/PicoCSS
*/
const SwitchColorMode = {
// Config
_scheme: "auto",
toggleSelector: "input[name='color-mode-toggle']",
rootAttribute: "data-theme",
localStorageKey: "picoPreferredColorScheme",
// Init
init() {
this.checkbox = document.querySelector(this.toggleSelector);
if (!this.checkbox) {
console.error("Theme switcher toggle not found");
return;
}
// 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();
});
},
// Get color scheme from local storage
get schemeFromLocalStorage() {
return window.localStorage?.getItem(this.localStorageKey);
},
// Get the default theme from the <html> attribute
get schemeFromHTML() {
return document.documentElement.getAttribute(this.rootAttribute) ?? "auto";
},
// Preferred color scheme from system
get preferredColorScheme() {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
},
// Set scheme
set scheme(scheme) {
if (scheme === "auto") {
this._scheme = this.preferredColorScheme;
} else if (scheme === "dark" || scheme === "light") {
this._scheme = scheme;
}
this.applyScheme();
},
// Get scheme
get scheme() {
return this._scheme;
},
// Apply scheme
applyScheme() {
document.documentElement.setAttribute(this.rootAttribute, this._scheme);
},
// Store scheme to local storage
schemeToLocalStorage() {
window.localStorage?.setItem(this.localStorageKey, this.scheme);
},
};
// Init
SwitchColorMode.init();