luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for system-theme (dark/default)

Browse source
This commit is contained in:
Jesús Espino 2021-03-20 08:52:24 +01:00
parent c8a06c6a8e
commit bc9be643a5
2 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
webapp/src/components/sidebar.tsx
View file

@ -363,6 +363,11 @@ class Sidebar extends React.Component<Props, State> {
name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})} name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
onClick={async () => this.updateTheme(lightTheme)} onClick={async () => this.updateTheme(lightTheme)}
/> />
<Menu.Text
id='system-theme'
name={intl.formatMessage({id: 'Sidebar.system-theme', defaultMessage: 'System theme'})}
onClick={async () => this.updateTheme(null)}
/>
</Menu.SubMenu> </Menu.SubMenu>
</Menu> </Menu>
</MenuWrapper> </MenuWrapper>
@ -370,9 +375,9 @@ class Sidebar extends React.Component<Props, State> {
) )
} }
private updateTheme(theme: Theme) { private updateTheme(theme: Theme | null) {
setTheme(theme) const consolidatedTheme = setTheme(theme)
const whiteLogo = (theme.sidebarWhiteLogo === 'true') const whiteLogo = (consolidatedTheme.sidebarWhiteLogo === 'true')
this.setState({whiteLogo}) this.setState({whiteLogo})
} }

32
webapp/src/theme.ts
View file

@ -87,8 +87,18 @@ export const lightTheme = {
sidebarWhiteLogo: 'false', sidebarWhiteLogo: 'false',
} }
export function setTheme(theme: Theme): void { export function setTheme(theme: Theme | null): Theme {
const consolidatedTheme = {...defaultTheme, ...theme} let consolidatedTheme = defaultTheme
if (theme) {
consolidatedTheme = {...defaultTheme, ...theme}
localStorage.setItem('theme', JSON.stringify(consolidatedTheme))
} else {
localStorage.setItem('theme', '')
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
if (darkThemeMq.matches) {
consolidatedTheme = {...defaultTheme, ...darkTheme}
}
}
document.documentElement.style.setProperty('--main-bg', consolidatedTheme.mainBg) document.documentElement.style.setProperty('--main-bg', consolidatedTheme.mainBg)
document.documentElement.style.setProperty('--main-fg', consolidatedTheme.mainFg) document.documentElement.style.setProperty('--main-fg', consolidatedTheme.mainFg)
@ -113,22 +123,26 @@ export function setTheme(theme: Theme): void {
document.documentElement.style.setProperty('--prop-pink', consolidatedTheme.propPink) document.documentElement.style.setProperty('--prop-pink', consolidatedTheme.propPink)
document.documentElement.style.setProperty('--prop-red', consolidatedTheme.propRed) document.documentElement.style.setProperty('--prop-red', consolidatedTheme.propRed)
localStorage.setItem('theme', JSON.stringify(consolidatedTheme)) return consolidatedTheme
} }
export function loadTheme(): Theme { export function loadTheme(): Theme {
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
darkThemeMq.addListener(() => {
const themeStr = localStorage.getItem('theme')
if (!themeStr) {
setTheme(null)
}
})
const themeStr = localStorage.getItem('theme') const themeStr = localStorage.getItem('theme')
if (themeStr) { if (themeStr) {
try { try {
const theme = JSON.parse(themeStr) const theme = JSON.parse(themeStr)
setTheme(theme) return setTheme(theme)
return theme
} catch (e) { } catch (e) {
setTheme(defaultTheme) return setTheme(null)
return defaultTheme
} }
} else { } else {
setTheme(defaultTheme) return setTheme(null)
return defaultTheme
} }
} }