This repository has been archived on 2024-05-27. You can view files and clone it, but cannot push or open issues or pull requests.
Nexus-Polestar/public/scripts/theme.js
2023-07-23 20:45:17 -04:00

49 lines
No EOL
2.3 KiB
JavaScript
Executable file

let AppTheme = localStorage.getItem('AppTheme')
if (AppTheme == null) {Theme('Dark')} else {Theme(AppTheme)}
function Theme(theme) {
if (theme === 'Auto') {
document.querySelector('html').setAttribute('theme', 'auto')
setTimeout(() => {ThemeIsAuto()}, 200)
} else if (theme === 'Light') {
document.querySelector('html').setAttribute('theme', 'light')
setTimeout(() => {ThemeIsLight()}, 200)
} else if (theme === 'Dark') {
document.querySelector('html').setAttribute('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)'
}