feat: implement dark/light theme switching

- Add ui-settings resolution for v3.16.9
- Add CSS variables for dark/light themes in GlobalStyle
- Set default data-theme attribute on html element
- Simplify theme creation in Root.tsx
- Disable webpack error overlay for cleaner dev experience
This commit is contained in:
2026-01-07 19:22:38 +03:00
parent fe0e014c4e
commit 67d71e128d
6 changed files with 39 additions and 26 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="theme-color" content="#000000">
+4 -5
View File
@@ -20,10 +20,9 @@ interface Props {
store?: KeyringStore;
}
function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
const theme = uiTheme === 'dark'
? 'dark'
: 'light';
function createTheme (settings: { uiTheme?: string }): ThemeDef {
const uiTheme = settings?.uiTheme || 'light';
const theme = uiTheme === 'dark' ? 'dark' : 'light';
document?.documentElement?.setAttribute('data-theme', theme);
@@ -34,7 +33,7 @@ function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
const [theme, setTheme] = useState(() => createTheme(settings));
useEffect((): void => {
settings.on('change', (settings) => setTheme(createTheme(settings)));
settings.on('change', (newSettings) => setTheme(createTheme(newSettings)));
}, []);
// The ordering here is critical. It defines the hierarchy of dependencies,
+3
View File
@@ -11,6 +11,9 @@ module.exports = merge(
baseConfig(__dirname, 'development'),
{
devServer: {
client: {
overlay: false // Disable error overlay
},
headers: {
'Content-Security-Policy': "frame-ancestors 'none'",
'X-Frame-Options': 'DENY'