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

Prettify code

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 12:33:20 +07:00
parent 868e5d20cb
commit 5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,69 +6,63 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>'
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
// Init
init() {
this.scheme = this._scheme;
this.initSwitchers();
},
// Prefered color scheme
get preferedColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
else {
} else {
return 'light';
}
},
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
}
else {
this.scheme = 'dark';
}
}.bind(this), false);
}.bind(this));
buttons.forEach(
function (button) {
button.addEventListener(
'click',
function (event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
} else {
this.scheme = 'dark';
}
}.bind(this),
false
);
}.bind(this)
);
},
// Add new button
addButton(config) {
// Insert Switcher
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
},
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
}
else {
} else {
this._scheme = 'light';
}
}
@ -82,33 +76,31 @@ export const themeSwitcher = {
this.applyScheme();
},
// Get scheme
get scheme() {
return this._scheme;
},
// Apply scheme
applyScheme() {
// Root attribute
document.querySelector('html').setAttribute('data-theme', this.scheme);
// Buttons text
const buttons = document.querySelectorAll(this.buttonsTarget);
let text;
buttons.forEach(function(button) {
if (this.scheme == 'dark') {
text = this.change.dark;
}
else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this));
}
}
buttons.forEach(
function (button) {
if (this.scheme == 'dark') {
text = this.change.dark;
} else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this)
);
},
};
export default themeSwitcher;
export default themeSwitcher;