let AppColor = localStorage.getItem('AppColor')
if (AppColor == null) {Color('Green')} else {Color(AppColor)}

function Color(color) {
    if (color === 'Green') {
        document.querySelector('html').setAttribute('color', 'green')
        setTimeout(() => {ColorIsGreen()}, 200)
    } else if (color === 'Orange') {
        document.querySelector('html').setAttribute('color', 'orange')
        setTimeout(() => {ColorIsOrange()}, 200)
    } else if (color === 'Red') {
        document.querySelector('html').setAttribute('color', 'red')
        setTimeout(() => {ColorIsRed()}, 200)
    }else if (color === 'Blue') {
        document.querySelector('html').setAttribute('color', 'blue')
        setTimeout(() => {ColorIsBlue()}, 200)
    }else if (color === 'Pink') {
        document.querySelector('html').setAttribute('color', 'pink')
        setTimeout(() => {ColorIsPink()}, 200)
    }else if (color === 'Gray') {
        document.querySelector('html').setAttribute('color', 'gray')
        setTimeout(() => {ColorIsGray()}, 200)
    }
    localStorage.setItem('AppColor', color)
}

function ColorIsReset() {
    document.querySelector(".color #green").setAttribute('class', 'color')
    document.querySelector(".color #green").style.border = '1px rgba(255, 255, 255, 0.1) solid'

    document.querySelector(".color #orange").setAttribute('class', 'color')
    document.querySelector(".color #orange").style.border = '1px rgba(255, 255, 255, 0.1) solid'

    document.querySelector(".color #red").setAttribute('class', 'color')
    document.querySelector(".color #red").style.border = '1px rgba(255, 255, 255, 0.1) solid'

    document.querySelector(".color #blue").setAttribute('class', 'color')
    document.querySelector(".color #blue").style.border = '1px rgba(255, 255, 255, 0.1) solid'

    document.querySelector(".color #pink").setAttribute('class', 'color')
    document.querySelector(".color #pink").style.border = '1px rgba(255, 255, 255, 0.1) solid'

    document.querySelector(".color #gray").setAttribute('class', 'color')
    document.querySelector(".color #gray").style.border = '1px rgba(255, 255, 255, 0.1) solid'
}

function ColorIsGreen() {
    ColorIsReset()
    document.querySelector(".color #green").setAttribute('class', 'color color-active')
    document.querySelector(".color #green").style.border = '1px var(--TabActiveBackground) solid'
}
function ColorIsOrange() {
    ColorIsReset()
    document.querySelector(".color #orange").setAttribute('class', 'color color-active')
    document.querySelector(".color #orange").style.border = '1px var(--TabActiveBackground) solid'
}
function ColorIsRed() {
    ColorIsReset()
    document.querySelector(".color #red").setAttribute('class', 'color color-active')
    document.querySelector(".color #red").style.border = '1px var(--TabActiveBackground) solid'
}
function ColorIsBlue() {
    ColorIsReset()
    document.querySelector(".color #blue").setAttribute('class', 'color color-active')
    document.querySelector(".color #blue").style.border = '1px var(--TabActiveBackground) solid'
}
function ColorIsPink() {
    ColorIsReset()
    document.querySelector(".color #pink").setAttribute('class', 'color color-active')
    document.querySelector(".color #pink").style.border = '1px var(--TabActiveBackground) solid'
}
function ColorIsGray() {
    ColorIsReset()
    document.querySelector(".color #gray").setAttribute('class', 'color color-active')
    document.querySelector(".color #gray").style.border = '1px var(--TabActiveBackground) solid'
}