const light_icon = `
`
const light_module_icon = `
`
const light_expand_icon = `
`
const light_settings_icon = `
`
const light_lang_icon = `
`
const light_close_icon = `
`
const rootCss = document.querySelector(':root')
const button = document.getElementById('theme_switcher')
/* INFO: Changes the icons to match the theme */
const module_list_icon = document.getElementById('modules_list_icon')
const module_expand = document.getElementById('module_expand_icon')
const settings_expand = document.getElementById('settings_expand_icon')
const settings_icon = document.getElementById('setting_icon')
const lang_switcher = document.getElementById('lang_switcher')
const close_icons = document.getElementsByClassName('close_icon')
let sys_theme = localStorage.getItem('/system/theme')
if (!sys_theme) sys_theme = setData('dark')
if (sys_theme === 'light') setLight()
button.addEventListener('click', () => {
switch (sys_theme) {
case 'dark': setLight(); break;
case 'light': setDark(); break;
}
})
function setDark() {
rootCss.style.setProperty('--background', '#181c20')
rootCss.style.setProperty('--font', '#ffffff')
rootCss.style.setProperty('--desc', '#c9c9c9')
rootCss.style.setProperty('--spliter', '#283136')
rootCss.style.setProperty('--dim', '#1d2327')
rootCss.style.setProperty('--icon', '#48565e')
rootCss.style.setProperty('--icon-bc', '#313a3f')
rootCss.style.setProperty('--button', 'var(--background)')
sys_theme = setData('dark')
for (const close_icon of close_icons) {
close_icon.innerHTML = '
'
}
settings_icon.innerHTML = '
'
module_expand.innerHTML = '
'
settings_expand.innerHTML = ''
button.innerHTML = '
'
module_list_icon.innerHTML = '
'
lang_switcher.innerHTML = '
'
}
function setLight() {
rootCss.style.setProperty('--background', '#eff1f6')
rootCss.style.setProperty('--font', '#181c20')
rootCss.style.setProperty('--desc', '#484d53')
rootCss.style.setProperty('--spliter', '#4f6069')
rootCss.style.setProperty('--dim', '#e0e0e0')
rootCss.style.setProperty('--icon', '#acacac')
rootCss.style.setProperty('--icon-bc', '#c9c9c9')
rootCss.style.setProperty('--button', '#b3b3b3')
sys_theme = setData('light')
for (const close_icon of close_icons) {
close_icon.innerHTML = light_close_icon
}
settings_icon.innerHTML = light_settings_icon
module_expand.innerHTML = light_expand_icon
settings_expand.innerHTML = light_expand_icon
button.innerHTML = light_icon
module_list_icon.innerHTML = light_module_icon
lang_switcher.innerHTML = light_lang_icon
}
function setData(mode) {
localStorage.setItem('/system/theme', mode)
return localStorage.getItem('/system/theme')
}