122 lines
3.2 KiB
JavaScript
122 lines
3.2 KiB
JavaScript
/**
|
|
* Light Switch @version v0.1.4
|
|
*/
|
|
|
|
(function () {
|
|
let lightSwitch = document.getElementById('lightSwitch');
|
|
if (!lightSwitch) {
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* @function darkmode
|
|
* @summary: changes the theme to 'dark mode' and save settings to local stroage.
|
|
* Basically, replaces/toggles every CSS class that has '-light' class with '-dark'
|
|
*/
|
|
function darkMode() {
|
|
document.querySelectorAll('.bg-light').forEach((element) => {
|
|
element.className = element.className.replace(/-light/g, '-dark');
|
|
});
|
|
|
|
document.querySelectorAll('.link-dark').forEach((element) => {
|
|
element.className = element.className.replace(/link-dark/, 'text-white');
|
|
});
|
|
|
|
document.body.classList.add('bg-dark');
|
|
|
|
if (document.body.classList.contains('text-dark')) {
|
|
document.body.classList.replace('text-dark', 'text-light');
|
|
} else {
|
|
document.body.classList.add('text-light');
|
|
}
|
|
|
|
// Tables
|
|
var tables = document.querySelectorAll('table');
|
|
for (var i = 0; i < tables.length; i++) {
|
|
// add table-dark class to each table
|
|
tables[i].classList.add('table-dark');
|
|
}
|
|
|
|
// set light switch input to true
|
|
if (!lightSwitch.checked) {
|
|
lightSwitch.checked = true;
|
|
}
|
|
localStorage.setItem('lightSwitch', 'dark');
|
|
}
|
|
|
|
/**
|
|
* @function lightmode
|
|
* @summary: changes the theme to 'light mode' and save settings to local stroage.
|
|
*/
|
|
function lightMode() {
|
|
document.querySelectorAll('.bg-dark').forEach((element) => {
|
|
element.className = element.className.replace(/-dark/g, '-light');
|
|
});
|
|
|
|
document.querySelectorAll('.text-white').forEach((element) => {
|
|
element.className = element.className.replace(/text-white/, 'link-dark');
|
|
});
|
|
|
|
document.body.classList.add('bg-light');
|
|
|
|
if (document.body.classList.contains('text-light')) {
|
|
document.body.classList.replace('text-light', 'text-dark');
|
|
} else {
|
|
document.body.classList.add('text-dark');
|
|
}
|
|
|
|
// Tables
|
|
var tables = document.querySelectorAll('table');
|
|
for (var i = 0; i < tables.length; i++) {
|
|
if (tables[i].classList.contains('table-dark')) {
|
|
tables[i].classList.remove('table-dark');
|
|
}
|
|
}
|
|
|
|
if (lightSwitch.checked) {
|
|
lightSwitch.checked = false;
|
|
}
|
|
localStorage.setItem('lightSwitch', 'light');
|
|
}
|
|
|
|
/**
|
|
* @function onToggleMode
|
|
* @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state.
|
|
*/
|
|
function onToggleMode() {
|
|
if (lightSwitch.checked) {
|
|
darkMode();
|
|
} else {
|
|
lightMode();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @function getSystemDefaultTheme
|
|
* @summary: get system default theme by media query
|
|
*/
|
|
function getSystemDefaultTheme() {
|
|
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
if (darkThemeMq.matches) {
|
|
return 'dark';
|
|
}
|
|
return 'light';
|
|
}
|
|
|
|
function setup() {
|
|
var settings = localStorage.getItem('lightSwitch');
|
|
if (settings == null) {
|
|
settings = getSystemDefaultTheme();
|
|
}
|
|
|
|
if (settings == 'dark') {
|
|
lightSwitch.checked = true;
|
|
}
|
|
|
|
lightSwitch.addEventListener('change', onToggleMode);
|
|
onToggleMode();
|
|
}
|
|
|
|
setup();
|
|
})();
|