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

Use blue theme by default (rename to defaultTheme)

Browse source
This commit is contained in:
Chen-I Lim 2021-01-04 11:19:03 -08:00
parent 2b6370daa4
commit 8ac0a9ba14
4 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/i18n/en.json
View file

@ -47,6 +47,7 @@
"Sidebar.add-board": "+ Add Board",
"Sidebar.add-template": "+ New template",
"Sidebar.dark-theme": "Dark theme",
"Sidebar.default-theme": "Default theme",
"Sidebar.delete-board": "Delete board",
"Sidebar.delete-template": "Delete",
"Sidebar.duplicate-board": "Duplicate board",
@ -56,7 +57,6 @@
"Sidebar.export-archive": "Export archive",
"Sidebar.import-archive": "Import archive",
"Sidebar.light-theme": "Light theme",
"Sidebar.mattermost-theme": "Mattermost theme",
"Sidebar.no-views-in-board": "No pages inside",
"Sidebar.select-a-template": "Select a template",
"Sidebar.set-language": "Set language",

1
webapp/i18n/es.json
View file

@ -35,7 +35,6 @@
"Sidebar.export-archive": "Exportar Archivo",
"Sidebar.import-archive": "Importar Archivo",
"Sidebar.light-theme": "Apariencia Clara",
"Sidebar.mattermost-theme": "Aparencia Mattermost",
"Sidebar.no-views-in-board": "No hay páginas dentro",
"Sidebar.set-language": "Establecer idioma",
"Sidebar.set-theme": "Establecer apariencia",

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

@ -7,7 +7,7 @@ import {Archiver} from '../archiver'
import {Board, MutableBoard} from '../blocks/board'
import {BoardView, MutableBoardView} from '../blocks/boardView'
import mutator from '../mutator'
import {darkTheme, lightTheme, mattermostTheme, setTheme} from '../theme'
import {defaultTheme, darkTheme, lightTheme, setTheme} from '../theme'
import {WorkspaceTree} from '../viewModel/workspaceTree'
import Button from '../widgets/buttons/button'
import IconButton from '../widgets/buttons/iconButton'
@ -302,6 +302,11 @@ class Sidebar extends React.Component<Props, State> {
name={intl.formatMessage({id: 'Sidebar.set-theme', defaultMessage: 'Set theme'})}
position='top'
>
<Menu.Text
id='default-theme'
name={intl.formatMessage({id: 'Sidebar.default-theme', defaultMessage: 'Default theme'})}
onClick={async () => setTheme(defaultTheme)}
/>
<Menu.Text
id='dark-theme'
name={intl.formatMessage({id: 'Sidebar.dark-theme', defaultMessage: 'Dark theme'})}
@ -312,11 +317,6 @@ class Sidebar extends React.Component<Props, State> {
name={intl.formatMessage({id: 'Sidebar.light-theme', defaultMessage: 'Light theme'})}
onClick={async () => setTheme(lightTheme)}
/>
<Menu.Text
id='mattermost-theme'
name={intl.formatMessage({id: 'Sidebar.mattermost-theme', defaultMessage: 'Mattermost theme'})}
onClick={async () => setTheme(mattermostTheme)}
/>
</Menu.SubMenu>
</Menu>
</MenuWrapper>

22
webapp/src/theme.ts
View file

@ -10,6 +10,15 @@ export type Theme = {
sidebarFg: 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',
}
export const darkTheme = {
mainBg: '55, 53, 47',
mainFg: '200, 200, 200',
@ -28,15 +37,6 @@ export const lightTheme = {
sidebarFg: '55, 53, 47',
}
export const mattermostTheme = {
mainBg: '255, 255, 255',
mainFg: '55, 53, 47',
buttonBg: '22, 109, 224',
buttonFg: '255, 255, 255',
sidebarBg: '20, 93, 191',
sidebarFg: '255, 255, 255',
}
export function setTheme(theme: Theme): void {
document.documentElement.style.setProperty('--main-bg', theme.mainBg)
document.documentElement.style.setProperty('--main-fg', theme.mainFg)
@ -54,9 +54,9 @@ export function loadTheme(): void {
const theme = JSON.parse(themeStr)
setTheme(theme)
} catch (e) {
setTheme(lightTheme)
setTheme(defaultTheme)
}
} else {
setTheme(lightTheme)
setTheme(defaultTheme)
}
}