feat: implement theme switching with system preference support (#902)

AlliotTech · web-flow · commit ad9b01e96618 · 2026-01-14T12:35:20.000Z
* feat: implement theme switching with system preference support

* feat: improve code readability by formatting imports in Layout component

* feat: refactor theme handling by introducing ThemeKey type and centralizing theme icons

* feat: update default theme to 'system' for improved user experience
diff --git a/ui/src/layout/Header.tsx b/ui/src/layout/Header.tsx
@@ -9,14 +9,23 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
 import Chat from '@mui/icons-material/Chat';
 import DevicesOther from '@mui/icons-material/DevicesOther';
 import ExitToApp from '@mui/icons-material/ExitToApp';
-import Highlight from '@mui/icons-material/Highlight';
+import Brightness4 from '@mui/icons-material/Brightness4';
+import Brightness7 from '@mui/icons-material/Brightness7';
+import BrightnessAuto from '@mui/icons-material/BrightnessAuto';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuIcon from '@mui/icons-material/Menu';
 import Apps from '@mui/icons-material/Apps';
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import React, {CSSProperties} from 'react';
 import {Link} from 'react-router-dom';
 import {useMediaQuery} from '@mui/material';
+import {ThemeKey} from './theme';
+
+const themeIcons: Record<ThemeKey, React.ReactElement> = {
+    dark: <Brightness4 />,
+    light: <Brightness7 />,
+    system: <BrightnessAuto />,
+};
 
 const useStyles = makeStyles()((theme: Theme) => ({
     appBar: {
@@ -67,6 +76,7 @@ interface IProps {
     name: string;
     admin: boolean;
     version: string;
+    themeMode: ThemeKey;
     toggleTheme: VoidFunction;
     showSettings: VoidFunction;
     logout: VoidFunction;
@@ -84,9 +94,11 @@ const Header = ({
     style,
     setNavOpen,
     showSettings,
+    themeMode,
 }: IProps) => {
     const {classes} = useStyles();
-
+    const themeLabel = `Toggle theme (current: ${themeMode})`;
+    const themeIcon = themeIcons[themeMode];
     return (
         <AppBar
             sx={{position: {xs: 'sticky', sm: 'fixed'}}}
@@ -117,8 +129,13 @@ const Header = ({
                     />
                 )}
                 <div>
-                    <IconButton onClick={toggleTheme} color="inherit" size="large">
-                        <Highlight />
+                    <IconButton
+                        onClick={toggleTheme}
+                        color="inherit"
+                        size="large"
+                        title={themeLabel}
+                        aria-label={themeLabel}>
+                        {themeIcon}
                     </IconButton>
 
                     <a
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
@@ -1,4 +1,10 @@
-import {createTheme, ThemeProvider, StyledEngineProvider, Theme} from '@mui/material';
+import {
+    createTheme,
+    ThemeProvider,
+    StyledEngineProvider,
+    Theme,
+    useMediaQuery,
+} from '@mui/material';
 import {makeStyles} from 'tss-react/mui';
 import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
@@ -19,6 +25,7 @@ import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
 import {useStores} from '../stores';
 import {SnackbarProvider} from 'notistack';
 import LoadingSpinner from '../common/LoadingSpinner';
+import {isThemeKey, ThemeKey} from './theme';
 
 const useStyles = makeStyles()((theme: Theme) => ({
     content: {
@@ -34,22 +41,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
 }));
 
 const localStorageThemeKey = 'gotify-theme';
-type ThemeKey = 'dark' | 'light';
-const themeMap: Record<ThemeKey, Theme> = {
-    light: createTheme({
-        palette: {
-            mode: 'light',
-        },
-    }),
-    dark: createTheme({
-        palette: {
-            mode: 'dark',
-        },
-    }),
-};
-
-const isThemeKey = (value: string | null): value is ThemeKey =>
-    value === 'light' || value === 'dark';
 
 const Layout = observer(() => {
     const {
@@ -66,15 +57,30 @@ const Layout = observer(() => {
     const {classes} = useStyles();
     const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>(() => {
         const stored = window.localStorage.getItem(localStorageThemeKey);
-        return isThemeKey(stored) ? stored : 'dark';
+        return isThemeKey(stored) ? stored : 'system';
     });
-    const theme = themeMap[currentTheme];
+    const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+    const paletteMode = currentTheme === 'system' ? (prefersDark ? 'dark' : 'light') : currentTheme;
+    const theme = React.useMemo(
+        () =>
+            createTheme({
+                palette: {
+                    mode: paletteMode,
+                },
+            }),
+        [paletteMode]
+    );
     const {version} = config.get('version');
     const [navOpen, setNavOpen] = React.useState(false);
     const [showSettings, setShowSettings] = React.useState(false);
 
     const toggleTheme = () => {
-        const next = currentTheme === 'dark' ? 'light' : 'dark';
+        const nextMap: Record<ThemeKey, ThemeKey> = {
+            dark: 'light',
+            light: 'system',
+            system: 'dark',
+        };
+        const next = nextMap[currentTheme];
         setCurrentTheme(next);
         localStorage.setItem(localStorageThemeKey, next);
     };
@@ -107,6 +113,7 @@ const Layout = observer(() => {
                                 style={{top: !connectionErrorMessage ? 0 : 64}}
                                 version={version}
                                 loggedIn={loggedIn}
+                                themeMode={currentTheme}
                                 toggleTheme={toggleTheme}
                                 showSettings={() => setShowSettings(true)}
                                 logout={logout}
diff --git a/ui/src/layout/theme.ts b/ui/src/layout/theme.ts
@@ -0,0 +1,4 @@
+export type ThemeKey = 'dark' | 'light' | 'system';
+
+export const isThemeKey = (value: string | null): value is ThemeKey =>
+    value === 'light' || value === 'dark' || value === 'system';
