self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-17 18:26:17 +02:00
Code Issues Releases Activity

Merge pull request #145 from mattermost/system-theme

Browse Source 
Add support for system-theme (dark/default)
This commit is contained in:
Jesús Espino 2021-03-30 21:23:48 +02:00 committed by GitHub
commit ad50065699
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/src/components/sidebar/sidebarSettingsMenu.tsx
View File

@ -19,11 +19,12 @@ type Props = {
const SidebarSettingsMenu = React.memo((props: Props) => {
const {intl} = props
const updateTheme = (theme: Theme) => {
setTheme(theme)
const whiteLogo = (theme.sidebarWhiteLogo === 'true')
const updateTheme = (theme: Theme | null) => {
const consolidatedTheme = setTheme(theme)
const whiteLogo = (consolidatedTheme.sidebarWhiteLogo === 'true')
props.setWhiteLogo(whiteLogo)
}
return (
<div className='SidebarSettingsMenu'>
<MenuWrapper>
@ -120,6 +121,11 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
onClick={async () => updateTheme(lightTheme)}
/>
<Menu.Text
id='system-theme'
name={intl.formatMessage({id: 'Sidebar.system-theme', defaultMessage: 'System theme'})}
onClick={async () => updateTheme(null)}
/>
</Menu.SubMenu>
</Menu>
</MenuWrapper>

4
webapp/src/main.tsx
View File

@ -4,11 +4,11 @@ import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import {loadTheme} from './theme'
import {initThemes} from './theme'
import './styles/variables.scss'
import './styles/main.scss'
import './styles/labels.scss'
loadTheme()
initThemes()
ReactDOM.render(<App/>, document.getElementById('main-app'))

36
webapp/src/theme.ts
View File

@ -87,8 +87,18 @@ export const lightTheme = {
sidebarWhiteLogo: 'false',
}
export function setTheme(theme: Theme): void {
const consolidatedTheme = {...defaultTheme, ...theme}
export function setTheme(theme: Theme | null): 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-fg', consolidatedTheme.mainFg)
@ -113,7 +123,7 @@ export function setTheme(theme: Theme): void {
document.documentElement.style.setProperty('--prop-pink', consolidatedTheme.propPink)
document.documentElement.style.setProperty('--prop-red', consolidatedTheme.propRed)
localStorage.setItem('theme', JSON.stringify(consolidatedTheme))
return consolidatedTheme
}
export function loadTheme(): Theme {
@ -121,14 +131,22 @@ export function loadTheme(): Theme {
if (themeStr) {
try {
const theme = JSON.parse(themeStr)
setTheme(theme)
return theme
return setTheme(theme)
} catch (e) {
setTheme(defaultTheme)
return defaultTheme
return setTheme(null)
}
} else {
setTheme(defaultTheme)
return defaultTheme
return setTheme(null)
}
}
export function initThemes(): void {
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
darkThemeMq.addEventListener('change', () => {
const themeStr = localStorage.getItem('theme')
if (!themeStr) {
setTheme(null)
}
})
loadTheme()
}