mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-17 03:35:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: lint

Browse source
This commit is contained in:
Lucas Larroche 2024-01-27 13:53:19 +07:00
parent 672b67896c
commit 7487498805
53 changed files with 1789 additions and 1078 deletions
Download patch file Download diff file Expand all files Collapse all files

88
docs/js/src/theme-switcher.js
View file

@ -6,90 +6,96 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
_scheme: "auto",
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>',
light: "<i>Turn on dark mode</i>",
dark: "<i>Turn off dark mode</i>",
},
buttonsTarget: '.theme-switcher',
localStorageKey: 'picoPreferredColorScheme',
buttonsTarget: ".theme-switcher",
localStorageKey: "picoPreferredColorScheme",
// Init
init() {
this.scheme = this.schemeFromLocalStorage;
this.initSwitchers();
this.scheme = this.schemeFromLocalStorage
this.initSwitchers()
},
// Get color scheme from local storage
get schemeFromLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
if (typeof window.localStorage !== "undefined") {
if (window.localStorage.getItem(this.localStorageKey) !== null) {
return window.localStorage.getItem(this.localStorageKey);
return window.localStorage.getItem(this.localStorageKey)
}
}
return this._scheme;
return this._scheme
},
// Preferred color scheme
get preferredColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
},
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
const buttons = document.querySelectorAll(this.buttonsTarget)
buttons.forEach(button => {
button.addEventListener('click', () => {
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
}, false);
});
button.addEventListener(
"click",
() => {
this.scheme == "dark"
? (this.scheme = "light")
: (this.scheme = "dark")
},
false
)
})
},
// Add new button
addButton(config) {
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
let button = document.createElement(config.tag)
button.className = config.class
document.querySelector(config.target).appendChild(button)
},
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
if (scheme == "auto") {
this.preferredColorScheme == "dark"
? (this._scheme = "dark")
: (this._scheme = "light")
} else if (scheme == "dark" || scheme == "light") {
this._scheme = scheme
}
else if (scheme == 'dark' || scheme == 'light') {
this._scheme = scheme;
}
this.applyScheme();
this.schemeToLocalStorage();
this.applyScheme()
this.schemeToLocalStorage()
},
// Get scheme
get scheme() {
return this._scheme;
return this._scheme
},
// Apply scheme
applyScheme() {
document.querySelector('html').setAttribute('data-theme', this.scheme);
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(
button => {
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}
);
document.querySelector("html").setAttribute("data-theme", this.scheme)
const buttons = document.querySelectorAll(this.buttonsTarget)
buttons.forEach(button => {
const text = this.scheme == "dark" ? this.change.dark : this.change.light
button.innerHTML = text
button.setAttribute("aria-label", text.replace(/<[^>]*>?/gm, ""))
})
},
// Store scheme to local storage
schemeToLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.setItem(this.localStorageKey, this.scheme);
if (typeof window.localStorage !== "undefined") {
window.localStorage.setItem(this.localStorageKey, this.scheme)
}
},
};
}
export default themeSwitcher;
export default themeSwitcher