Add option to select system theme

public/locales/en.json

@@ -817,6 +817,8 @@
       }
     },
     "appearance": {
+      "device_theme": "Device theme",
+      "theme": "Theme",
       "title": "Appearance"
     },
     "backup": {
@@ -912,7 +914,7 @@
       }
     },
     "label": {
-      "dark_theme": "Dark theme",
+      "theme": "Theme",
       "hide_library_entries": "Hide entries already in library",
       "language_description": "Feel free to translate the project on",
       "manga_item_width": "Manga item width",

src/components/context/AppContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import React, { useMemo, useRef } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
@@ -18,10 +18,11 @@ import { prefixer } from 'stylis';
 import rtlPlugin from 'stylis-plugin-rtl';
 import { createTheme } from '@/theme';
 import { useLocalStorage } from '@/util/useStorage.tsx';
-import { DarkTheme } from '@/components/context/DarkTheme';
+import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
 import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider';
 import { LibraryOptionsContextProvider } from '@/components/library/LibraryOptionsProvider';
 import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 interface Props {
     children: React.ReactNode;
@@ -48,15 +49,22 @@ export const AppContext: React.FC<Props> = ({ children }) => {
         directionRef.current = currentDirection;
     }
 
-    const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
+    const [systemThemeMode, setSystemThemeMode] = useState<ThemeMode>(MediaQuery.getSystemThemeMode());
+    useLayoutEffect(() => {
+        const unsubscribe = MediaQuery.listenToSystemThemeChange(setSystemThemeMode);
+
+        return () => unsubscribe();
+    }, []);
+
+    const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
     const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);
 
     const darkThemeContext = useMemo(
         () => ({
-            darkTheme,
+            themeMode,
-            setDarkTheme,
+            setThemeMode,
         }),
-        [darkTheme],
+        [themeMode],
     );
 
     const activeDeviceContext = useMemo(
@@ -64,7 +72,10 @@ export const AppContext: React.FC<Props> = ({ children }) => {
         [activeDevice],
     );
 
-    const theme = useMemo(() => createTheme(darkTheme, currentDirection), [darkTheme, currentDirection]);
+    const theme = useMemo(
+        () => createTheme(themeMode, currentDirection),
+        [themeMode, currentDirection, systemThemeMode],
+    );
 
     setActiveDevice(activeDevice);
 
@@ -73,7 +84,7 @@ export const AppContext: React.FC<Props> = ({ children }) => {
             <StyledEngineProvider injectFirst>
                 <CacheProvider value={directionToCache[currentDirection]}>
                     <ThemeProvider theme={theme}>
-                        <DarkTheme.Provider value={darkThemeContext}>
+                        <ThemeModeContext.Provider value={darkThemeContext}>
                             <QueryParamProvider adapter={ReactRouter6Adapter}>
                                 <LibraryOptionsContextProvider>
                                     <NavBarContextProvider>
@@ -83,7 +94,7 @@ export const AppContext: React.FC<Props> = ({ children }) => {
                                     </NavBarContextProvider>
                                 </LibraryOptionsContextProvider>
                             </QueryParamProvider>
-                        </DarkTheme.Provider>
+                        </ThemeModeContext.Provider>
                     </ThemeProvider>
                 </CacheProvider>
             </StyledEngineProvider>

src/components/context/ThemeModeContext.tsx

@@ -8,12 +8,18 @@
 
 import React from 'react';
 
+export enum ThemeMode {
+    SYSTEM = 'system',
+    DARK = 'dark',
+    LIGHT = 'light',
+}
+
 type ContextType = {
-    darkTheme: boolean;
+    themeMode: ThemeMode;
-    setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>;
+    setThemeMode: React.Dispatch<React.SetStateAction<ThemeMode>>;
 };
 
-export const DarkTheme = React.createContext<ContextType>({
+export const ThemeModeContext = React.createContext<ContextType>({
-    darkTheme: true,
+    themeMode: ThemeMode.SYSTEM,
-    setDarkTheme: (): void => {},
+    setThemeMode: (): void => {},
 });

src/lib/ui/MediaQuery.tsx

@@ -9,6 +9,7 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Breakpoint } from '@mui/material/styles';
 import { getCurrentTheme } from '@/theme.ts';
+import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
 
 export class MediaQuery {
     static useIsTouchDevice(): boolean {
@@ -22,4 +23,21 @@ export class MediaQuery {
     static useIsMobileWidth(): boolean {
         return this.useIsBelowWidth('sm');
     }
+
+    static getSystemThemeMode(): Exclude<ThemeMode, 'system'> {
+        const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDarkMode ? ThemeMode.DARK : ThemeMode.LIGHT;
+    }
+
+    static listenToSystemThemeChange(onChange: (themeMode: Exclude<ThemeMode, 'system'>) => void): () => void {
+        const handleSystemThemeModeChange = (e: MediaQueryListEvent) => {
+            onChange(e.matches ? ThemeMode.DARK : ThemeMode.LIGHT);
+        };
+
+        const matchSystemThemeMode = window.matchMedia('(prefers-color-scheme: dark)');
+
+        matchSystemThemeMode.addEventListener('change', handleSystemThemeModeChange);
+
+        return () => matchSystemThemeMode.removeEventListener('change', handleSystemThemeModeChange);
+    }
 }

src/screens/settings/Appearance.tsx

@@ -11,13 +11,15 @@ import { useContext, useEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import Switch from '@mui/material/Switch';
+import MenuItem from '@mui/material/MenuItem';
+import ListSubheader from '@mui/material/ListSubheader';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
-import { DarkTheme } from '@/components/context/DarkTheme';
+import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
+import { Select } from '@/components/atoms/Select.tsx';
 
 export const Appearance = () => {
     const { t } = useTranslation();
-    const { darkTheme, setDarkTheme } = useContext(DarkTheme);
+    const { themeMode, setThemeMode } = useContext(ThemeModeContext);
 
     const { setTitle, setAction } = useContext(NavBarContext);
     useEffect(() => {
@@ -31,10 +33,26 @@ export const Appearance = () => {
     }, [t]);
 
     return (
-        <List>
+        <List
+            subheader={
+                <ListSubheader component="div" id="appearance-theme">
+                    {t('settings.appearance.theme')}
+                </ListSubheader>
+            }
+        >
             <ListItem>
-                <ListItemText primary={t('settings.label.dark_theme')} />
+                <ListItemText primary={t('settings.appearance.device_theme')} />
-                <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
+                <Select<ThemeMode> value={themeMode} onChange={(e) => setThemeMode(e.target.value as ThemeMode)}>
+                    <MenuItem key={ThemeMode.SYSTEM} value={ThemeMode.SYSTEM}>
+                        System
+                    </MenuItem>
+                    <MenuItem key={ThemeMode.DARK} value={ThemeMode.DARK}>
+                        Dark
+                    </MenuItem>
+                    <MenuItem key={ThemeMode.LIGHT} value={ThemeMode.LIGHT}>
+                        Light
+                    </MenuItem>
+                </Select>
             </ListItem>
         </List>
     );

src/theme.ts

@@ -15,23 +15,27 @@ import {
     responsiveFontSizes,
     Theme,
 } from '@mui/material/styles';
+import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 export const SCROLLBAR_WIDTH = 14;
 
 let theme: Theme;
 export const getCurrentTheme = () => theme;
 export const createTheme = (
-    dark?: boolean,
+    themeMode: ThemeMode,
     direction: Direction = 'ltr',
     color: string = '#5b74ef',
     pureBlackMode: boolean = false,
 ) => {
-    const isDarkMode = dark || pureBlackMode;
+    const systemMode = MediaQuery.getSystemThemeMode();
+    const mode = themeMode === ThemeMode.SYSTEM ? systemMode : themeMode;
+    const isDarkMode = mode === ThemeMode.DARK;
 
     const baseTheme = createMuiTheme({
         direction,
         palette: {
-            mode: isDarkMode ? 'dark' : 'light',
+            mode,
             primary: {
                 main: color,
             },