49 lines
2.3 KiB
JavaScript
49 lines
2.3 KiB
JavaScript
|
let AppTheme = localStorage.getItem('AppTheme')
|
||
|
|
if (AppTheme == null) {Theme('Dark')} else {Theme(AppTheme)}
|
||
|
|
|
||
|
|
function Theme(theme) {
|
||
|
|
if (theme === 'Auto') {
|
||
|
|
document.querySelector('html').setAttribute('class', 'theme-auto')
|
||
|
|
setTimeout(() => {ThemeIsAuto()}, 200)
|
||
|
|
} else if (theme === 'Light') {
|
||
|
|
document.querySelector('html').setAttribute('class', 'theme-light')
|
||
|
|
setTimeout(() => {ThemeIsLight()}, 200)
|
||
|
|
} else if (theme === 'Dark') {
|
||
|
|
document.querySelector('html').setAttribute('class', 'theme-dark')
|
||
|
|
setTimeout(() => {ThemeIsDark()}, 200)
|
||
|
|
}
|
||
|
|
localStorage.setItem('AppTheme', theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
function ThemeIsReset() {
|
||
|
|
document.querySelector(".theme #auto").setAttribute('class', 'theme')
|
||
|
|
document.querySelector(".theme #auto").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||
|
|
document.querySelector(".theme #auto > p").style.color = 'gray'
|
||
|
|
|
||
|
|
document.querySelector(".theme #light").setAttribute('class', 'theme')
|
||
|
|
document.querySelector(".theme #light").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||
|
|
document.querySelector(".theme #light > p").style.color = 'gray'
|
||
|
|
|
||
|
|
document.querySelector(".theme #dark").setAttribute('class', 'theme')
|
||
|
|
document.querySelector(".theme #dark").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||
|
|
document.querySelector(".theme #dark > p").style.color = 'gray'
|
||
|
|
}
|
||
|
|
|
||
|
|
function ThemeIsAuto() {
|
||
|
|
ThemeIsReset()
|
||
|
|
document.querySelector(".theme #auto").setAttribute('class', 'theme theme-active')
|
||
|
|
document.querySelector(".theme #auto").style.border = '1px var(--TabActiveBackground) solid'
|
||
|
|
document.querySelector(".theme #auto > p").style.color = 'var(--TabActiveBackground)'
|
||
|
|
}
|
||
|
|
function ThemeIsLight() {
|
||
|
|
ThemeIsReset()
|
||
|
|
document.querySelector(".theme #light").setAttribute('class', 'theme theme-active')
|
||
|
|
document.querySelector(".theme #light").style.border = '1px var(--TabActiveBackground) solid'
|
||
|
|
document.querySelector(".theme #light > p").style.color = 'var(--TabActiveBackground)'
|
||
|
|
}
|
||
|
|
function ThemeIsDark() {
|
||
|
|
ThemeIsReset()
|
||
|
|
document.querySelector(".theme #dark").setAttribute('class', 'theme theme-active')
|
||
|
|
document.querySelector(".theme #dark").style.border = '1px var(--TabActiveBackground) solid'
|
||
|
|
document.querySelector(".theme #dark > p").style.color = 'var(--TabActiveBackground)'
|
||
|
|
}
|