mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: Store color scheme in localStorage

Browse source
This commit is contained in:
Lucas Larroche 2022-03-13 10:15:42 +07:00
parent 732893455e
commit 8c64ef2e1a
2 changed files with 22 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
* Theme switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
export const themeSwitcher = {
@ -14,13 +14,24 @@ export const themeSwitcher = {
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
localStorageKey: 'picoPreferedColorScheme',
// Init
init() {
this.scheme = this._scheme;
this.scheme = this.schemeFromLocalStorage;
this.initSwitchers();
},
// Get color scheme from local storage
get schemeFromLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
if (window.localStorage.getItem(this.localStorageKey) !== null) {
return window.localStorage.getItem(this.localStorageKey);
}
}
return this._scheme;
},
// Prefered color scheme
get preferedColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@ -52,6 +63,7 @@ export const themeSwitcher = {
this._scheme = scheme;
}
this.applyScheme();
this.schemeToLocalStorage();
},
// Get scheme
@ -71,6 +83,13 @@ export const themeSwitcher = {
}
);
},
// Store scheme to local storage
schemeToLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.setItem(this.localStorageKey, this.scheme);
}
},
};
export default themeSwitcher;