Nexus-Polestar/public/scripts/theme.js

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)'
}