self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-15 09:14:11 +02:00
Code Issues Releases Activity

Fix #61; Set dark mode property colors

Browse Source
This commit is contained in:
Chen-I Lim 2021-03-05 14:27:42 -08:00
parent 2297cd0b52
commit 6ed49cc22b
2 changed files with 60 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/src/styles/main.scss
View File

@ -133,7 +133,6 @@ button {
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
}
.octo-spacer {

69
webapp/src/theme.ts
View File

@ -9,6 +9,17 @@ export type Theme = {
sidebarBg: string
sidebarFg: string
sidebarWhiteLogo: string
propDefault: string,
propGray: string,
propBrown: string,
propOrange: string,
propYellow: string,
propGreen: string,
propBlue: string,
propPurple: string,
propPink: string,
propRed: string,
}
export const defaultTheme = {
@ -19,9 +30,22 @@ export const defaultTheme = {
sidebarBg: '20, 93, 191',
sidebarFg: '255, 255, 255',
sidebarWhiteLogo: 'true',
propDefault: '#fff',
propGray: '#EDEDED',
propBrown: '#F7DDC3',
propOrange: '#ffd3c1',
propYellow: '#f7f0b6',
propGreen: '#c7eac3',
propBlue: '#B1D1F6',
propPurple: '#e6d0ff',
propPink: '#ffd6e9',
propRed: '#ffa9a9',
}
export const darkTheme = {
...defaultTheme,
mainBg: '55, 53, 47',
mainFg: '200, 200, 200',
buttonBg: '80, 170, 221',
@ -29,9 +53,22 @@ export const darkTheme = {
sidebarBg: '75, 73, 67',
sidebarFg: '255, 255, 255',
sidebarWhiteLogo: 'true',
propDefault: 'hsla(0, 100%, 100%, 0.4)',
propGray: 'hsla(0, 0%, 70%, 0.4)',
propBrown: 'hsla(25, 60%, 40%, 0.4)',
propOrange: 'hsla(35, 100%, 50%, 0.4)',
propYellow: 'hsla(48, 100%, 70%, 0.4)',
propGreen: 'hsla(120, 100%, 70%, 0.4)',
propBlue: 'hsla(240, 100%, 70%, 0.4)',
propPurple: 'hsla(270, 100%, 64%, 0.4)',
propPink: 'hsla(310, 100%, 80%, 0.4)',
propRed: 'hsla(4, 100%, 70%, 0.4)',
}
export const lightTheme = {
...defaultTheme,
mainBg: '255, 255, 255',
mainFg: '55, 53, 47',
buttonBg: '80, 170, 221',
@ -42,15 +79,29 @@ export const lightTheme = {
}
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))
const consolidatedTheme = {...defaultTheme, ...theme}
document.documentElement.style.setProperty('--main-bg', consolidatedTheme.mainBg)
document.documentElement.style.setProperty('--main-fg', consolidatedTheme.mainFg)
document.documentElement.style.setProperty('--body-color', consolidatedTheme.mainFg)
document.documentElement.style.setProperty('--button-bg', consolidatedTheme.buttonBg)
document.documentElement.style.setProperty('--button-fg', consolidatedTheme.buttonFg)
document.documentElement.style.setProperty('--sidebar-bg', consolidatedTheme.sidebarBg)
document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg)
document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo)
document.documentElement.style.setProperty('--prop-default', consolidatedTheme.propDefault)
document.documentElement.style.setProperty('--prop-gray', consolidatedTheme.propGray)
document.documentElement.style.setProperty('--prop-brown', consolidatedTheme.propBrown)
document.documentElement.style.setProperty('--prop-orange', consolidatedTheme.propOrange)
document.documentElement.style.setProperty('--prop-yellow', consolidatedTheme.propYellow)
document.documentElement.style.setProperty('--prop-green', consolidatedTheme.propGreen)
document.documentElement.style.setProperty('--prop-blue', consolidatedTheme.propBlue)
document.documentElement.style.setProperty('--prop-purple', consolidatedTheme.propPurple)
document.documentElement.style.setProperty('--prop-pink', consolidatedTheme.propPink)
document.documentElement.style.setProperty('--prop-red', consolidatedTheme.propRed)
localStorage.setItem('theme', JSON.stringify(consolidatedTheme))
}
export function loadTheme(): Theme {