Move "darkTheme" setting to "Appearance" page

public/locales/en.json

@@ -816,6 +816,9 @@
         }
       }
     },
+    "appearance": {
+      "title": "Appearance"
+    },
     "backup": {
       "action": {
         "create": {

src/App.tsx

@@ -46,6 +46,7 @@ const { DeviceSetting } = loadable(() => import('@/components/settings/DeviceSet
 const { TrackingSettings } = loadable(() => import('@/screens/settings/TrackingSettings.tsx'), lazyLoadFallback);
 const { TrackerOAuthLogin } = loadable(() => import('@/screens/TrackerOAuthLogin.tsx'), lazyLoadFallback);
 const { LibraryDuplicates } = loadable(() => import('@/screens/settings/LibraryDuplicates.tsx'), lazyLoadFallback);
+const { Appearance } = loadable(() => import('@/screens/settings/Appearance.tsx'), lazyLoadFallback);
 
 if (process.env.NODE_ENV !== 'production') {
     // Adds messages only in a dev environment
@@ -115,6 +116,7 @@ const MainApp = () => {
                         <Route path="browseSettings" element={<BrowseSettings />} />
                         <Route path="device" element={<DeviceSetting />} />
                         <Route path="trackingSettings" element={<TrackingSettings />} />
+                        <Route path="appearance" element={<Appearance />} />
                     </Route>
 
                     {/* Manga Routes */}

src/screens/Settings.tsx

@@ -11,12 +11,10 @@ import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import List from '@mui/material/List';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import BackupIcon from '@mui/icons-material/Backup';
-import Brightness6Icon from '@mui/icons-material/Brightness6';
 import InfoIcon from '@mui/icons-material/Info';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import Switch from '@mui/material/Switch';
 import Link from '@mui/material/Link';
 import ListItemButton from '@mui/material/ListItemButton';
 import MenuItem from '@mui/material/MenuItem';
@@ -31,10 +29,10 @@ import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
 import DevicesIcon from '@mui/icons-material/Devices';
 import SyncIcon from '@mui/icons-material/Sync';
+import PaletteIcon from '@mui/icons-material/Palette';
 import { langCodeToName } from '@/util/language';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { ListItemLink } from '@/components/util/ListItemLink';
-import { DarkTheme } from '@/components/context/DarkTheme';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -56,8 +54,6 @@ export function Settings() {
         };
     }, [t]);
 
-    const { darkTheme, setDarkTheme } = useContext(DarkTheme);
-
     const DEFAULT_ITEM_WIDTH = 300;
     const itemWidthIcon = useMemo(() => <ViewModuleIcon />, []);
     const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
@@ -75,6 +71,12 @@ export function Settings() {
 
     return (
         <List sx={{ padding: 0 }}>
+            <ListItemLink to="/settings/appearance">
+                <ListItemIcon>
+                    <PaletteIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.appearance.title')} />
+            </ListItemLink>
             <ListItemLink to="/settings/categories">
                 <ListItemIcon>
                     <ListAltIcon />
@@ -111,13 +113,6 @@ export function Settings() {
                 </ListItemIcon>
                 <ListItemText primary={t('settings.backup.title')} />
             </ListItemLink>
-            <ListItem>
-                <ListItemIcon>
-                    <Brightness6Icon />
-                </ListItemIcon>
-                <ListItemText primary={t('settings.label.dark_theme')} />
-                <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
-            </ListItem>
             <NumberSetting
                 settingTitle={t('settings.label.manga_item_width')}
                 settingValue={`px:${itemWidth}`}

src/screens/settings/Appearance.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+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 { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { DarkTheme } from '@/components/context/DarkTheme';
+
+export const Appearance = () => {
+    const { t } = useTranslation();
+    const { darkTheme, setDarkTheme } = useContext(DarkTheme);
+
+    const { setTitle, setAction } = useContext(NavBarContext);
+    useEffect(() => {
+        setTitle(t('settings.appearance.title'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    return (
+        <List>
+            <ListItem>
+                <ListItemText primary={t('settings.label.dark_theme')} />
+                <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
+            </ListItem>
+        </List>
+    );
+};