diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx index d63c24f69..6fda28e09 100644 --- a/webapp/src/main.tsx +++ b/webapp/src/main.tsx @@ -4,10 +4,10 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './app' -import {setTheme, lightTheme} from './theme' +import {loadTheme} from './theme' import './styles/main.scss' import './styles/colors.scss' -setTheme(lightTheme) +loadTheme() ReactDOM.render(, document.getElementById('octo-tasks-app')) diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts index 0592c25f4..a79b2a8a8 100644 --- a/webapp/src/theme.ts +++ b/webapp/src/theme.ts @@ -44,4 +44,19 @@ export function setTheme(theme: Theme): void { document.documentElement.style.setProperty('--button-fg', theme.buttonFg) document.documentElement.style.setProperty('--sidebar-bg', theme.sidebarBg) document.documentElement.style.setProperty('--sidebar-fg', theme.sidebarFg) + localStorage.setItem('theme', JSON.stringify(theme)) +} + +export function loadTheme(): void { + const themeStr = localStorage.getItem('theme') + if (themeStr) { + try { + const theme = JSON.parse(themeStr) + setTheme(theme) + } catch (e) { + setTheme(lightTheme) + } + } else { + setTheme(lightTheme) + } }