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 "Feature: modal"

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 00:12:34 +07:00 • committed by GitHub
parent 39314102d2
commit d5544ea021
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
115 changed files with 3754 additions and 6410 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,6 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
change: {
@ -23,21 +22,36 @@ export const themeSwitcher = {
// Prefered color scheme
get preferedColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
} else {
return 'light';
}
},
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(button => {
button.addEventListener('click', () => {
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
}, false);
});
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);
@ -46,11 +60,19 @@ export const themeSwitcher = {
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
} else {
this._scheme = 'light';
}
}
// Set to Dark
else if (scheme == 'dark' || scheme == 'light') {
this._scheme = scheme;
}
// Set to Apply theme
this.applyScheme();
},
@ -61,14 +83,22 @@ 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(
button => {
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
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)
);
},
};