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

Revert "Merge branch 'master' into dev"

Browse source 
This reverts commit 6a6d67dbab, reversing
changes made to ba4bd765d8.
This commit is contained in:
Lucas Larroche 2021-12-19 09:50:55 +07:00
parent 6a6d67dbab
commit 41314ab4b0
83 changed files with 2367 additions and 1839 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
change: {
@ -22,36 +23,21 @@ export const themeSwitcher = {
// Prefered color scheme
get preferedColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
} else {
return 'light';
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '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(button => {
button.addEventListener('click', () => {
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
}, false);
});
},
// Add new button
addButton(config) {
// Insert Switcher
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
@ -60,19 +46,11 @@ export const themeSwitcher = {
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
} else {
this._scheme = 'light';
}
this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
}
// Set to Dark
else if (scheme == 'dark' || scheme == 'light') {
this._scheme = scheme;
}
// Set to Apply theme
this.applyScheme();
},
@ -83,22 +61,14 @@ export const themeSwitcher = {
// 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 => {
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this)
}
);
},
};