64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
|
function prefersColor(mode){
|
||
|
|
return `(prefers-color-scheme: ${mode})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function systemMode() {
|
||
|
|
if (window.matchMedia) {
|
||
|
|
return window.matchMedia(prefersColor(dark)).matches ? dark : light;
|
||
|
|
}
|
||
|
|
return light;
|
||
|
|
}
|
||
|
|
|
||
|
|
function currentMode() {
|
||
|
|
let acceptable_chars = light + dark;
|
||
|
|
acceptable_chars = [...acceptable_chars];
|
||
|
|
let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();
|
||
|
|
|
||
|
|
return [...mode]
|
||
|
|
.filter(letter => acceptable_chars.includes(letter))
|
||
|
|
.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeMode(is_dark_mode) {
|
||
|
|
if(is_dark_mode) {
|
||
|
|
bank.setItem(storageKey, light)
|
||
|
|
elemAttribute(doc, mode_data, light);
|
||
|
|
} else {
|
||
|
|
bank.setItem(storageKey, dark);
|
||
|
|
elemAttribute(doc, mode_data, dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function pickModePicture(mode) {
|
||
|
|
elems('picture').forEach(function(picture){
|
||
|
|
let source = picture.firstElementChild;
|
||
|
|
const picture_data = picture.dataset;
|
||
|
|
const images = [picture_data.lit, picture_data.dark];
|
||
|
|
source.src = mode == 'dark' ? images[1] : images[0];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setMermaidTheme(mode) {
|
||
|
|
bank.setItem(mermaidThemeKey, mode);
|
||
|
|
let theme_input = elem('.color_choice');
|
||
|
|
theme_input.value = mode;
|
||
|
|
}
|
||
|
|
|
||
|
|
function setUserColorMode(mode = false) {
|
||
|
|
const is_dark_mode = currentMode() == dark;
|
||
|
|
const stored_mode = bank.getItem(storageKey);
|
||
|
|
const sys_mode = systemMode();
|
||
|
|
if(stored_mode) {
|
||
|
|
mode ? changeMode(is_dark_mode) : elemAttribute(doc, mode_data, stored_mode);
|
||
|
|
} else {
|
||
|
|
mode === true ? changeMode(is_dark_mode) : changeMode(sys_mode!==dark);
|
||
|
|
}
|
||
|
|
const user_mode = doc.dataset.mode;
|
||
|
|
doc.dataset.systemmode = sys_mode;
|
||
|
|
user_mode ? pickModePicture(user_mode) : false;
|
||
|
|
|
||
|
|
setMermaidTheme(user_mode);
|
||
|
|
}
|
||
|
|
|
||
|
|
setUserColorMode();
|