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

JavaScript modularization

Browse source
This commit is contained in:
Lucas Larroche 2021-07-09 17:42:10 +07:00
parent 366e0a55d6
commit 9575624834
21 changed files with 1629 additions and 1048 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,125 +0,0 @@
/*!
* Theme Switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
/**
* Config
*/
var switcher = {
button: {
element: 'BUTTON',
class: 'contrast switcher theme-switcher',
on: '<i>Turn on dark mode</i>',
off: '<i>Turn off dark mode</i>'
},
target: 'body', // Button append in target
selector: 'button.theme-switcher', // Button selector in Dom
currentTheme: systemColorScheme()
};
/**
* Init
*/
themeSwitcher();
/**
* Get System Color Scheme
*
* @return {string}
*/
function systemColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
else {
return 'light';
}
}
/**
* Display Theme Switcher
*/
function themeSwitcher() {
// Insert Switcher
var button = document.createElement(switcher.button.element);
button.className = switcher.button.class;
document.querySelector(switcher.target).appendChild(button);
// Set Current Theme
setTheme(switcher.currentTheme);
// Click Listener on Switcher
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].addEventListener('click', function(event) {
// Switch Theme
if (switcher.currentTheme == 'light') {
setTheme('dark');
}
else {
setTheme('light');
}
}, false);
}
}
/**
* Set Theme
*
* @param {string} set
*/
function setTheme(set) {
// Text toggle
if (set == 'light') {
var label = switcher.button.on;
}
else {
var label = switcher.button.off;
}
// Apply theme
document.querySelector('html').setAttribute('data-theme', set);
var switchers = document.querySelectorAll(switcher.selector);
for (var i = 0; i < switchers.length; i++) {
switchers[i].innerHTML = label;
switchers[i].setAttribute('aria-label', stripTags(label));
}
switcher.currentTheme = set;
}
/**
* Strip tags
*
* @param {string} html
* @return {string}
*/
function stripTags(html) {
return html.replace(/<[^>]*>?/gm, '');
}
})();