focalboard/webapp/src/theme.ts

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

export type Theme = {
    mainBg: string
    mainFg: string
    buttonBg: string
    buttonFg: string
    sidebarBg: string
    sidebarFg: string
    sidebarWhiteLogo: string
}

export const defaultTheme = {
    mainBg: '255, 255, 255',
    mainFg: '55, 53, 47',
    buttonBg: '22, 109, 224',
    buttonFg: '255, 255, 255',
    sidebarBg: '20, 93, 191',
    sidebarFg: '255, 255, 255',
    sidebarWhiteLogo: 'true',
}

export const darkTheme = {
    mainBg: '55, 53, 47',
    mainFg: '200, 200, 200',
    buttonBg: '80, 170, 221',
    buttonFg: '255, 255, 255',
    sidebarBg: '75, 73, 67',
    sidebarFg: '255, 255, 255',
    sidebarWhiteLogo: 'true',
}

export const lightTheme = {
    mainBg: '255, 255, 255',
    mainFg: '55, 53, 47',
    buttonBg: '80, 170, 221',
    buttonFg: '255, 255, 255',
    sidebarBg: '247, 246, 243',
    sidebarFg: '55, 53, 47',
    sidebarWhiteLogo: 'false',
}

export function setTheme(theme: Theme): void {
    document.documentElement.style.setProperty('--main-bg', theme.mainBg)
    document.documentElement.style.setProperty('--main-fg', theme.mainFg)
    document.documentElement.style.setProperty('--body-color', theme.mainFg)
    document.documentElement.style.setProperty('--button-bg', theme.buttonBg)
    document.documentElement.style.setProperty('--button-fg', theme.buttonFg)
    document.documentElement.style.setProperty('--sidebar-bg', theme.sidebarBg)
    document.documentElement.style.setProperty('--sidebar-fg', theme.sidebarFg)
    document.documentElement.style.setProperty('--sidebar-white-logo', theme.sidebarWhiteLogo)
    localStorage.setItem('theme', JSON.stringify(theme))
}

export function loadTheme(): Theme {
    const themeStr = localStorage.getItem('theme')
    if (themeStr) {
        try {
            const theme = JSON.parse(themeStr)
            setTheme(theme)
            return theme
        } catch (e) {
            setTheme(defaultTheme)
            return defaultTheme
        }
    } else {
        setTheme(defaultTheme)
        return defaultTheme
    }
}