feat: add theme route

apps/core/src/enums/theme.enums.ts

@@ -4,4 +4,5 @@
 export enum Theme {
     Light = 'light',
     Dark = 'dark',
+    System = 'system',
 }

apps/wallet/src/ui/app/components/menu/content/ThemeSettings.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { RadioButton } from '@iota/apps-ui-kit';
+import { Theme, useTheme } from '@iota/core';
+import { Overlay } from '_components';
+import { useNavigate } from 'react-router-dom';
+
+export function ThemeSettings() {
+    const { theme, setTheme } = useTheme();
+
+    const navigate = useNavigate();
+
+    return (
+        <Overlay showModal title="Theme" closeOverlay={() => navigate('/')} showBackButton>
+            <div className="flex w-full flex-col">
+                {Object.entries(Theme).map(([key, value]) => (
+                    <div className="px-md" key={value}>
+                        <RadioButton
+                            label={key}
+                            isChecked={theme === value}
+                            onChange={() => setTheme(value)}
+                        />
+                    </div>
+                ))}
+            </div>
+        </Overlay>
+    );
+}

apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx

@@ -29,15 +29,15 @@ import {
     ImageType,
 } from '@iota/apps-ui-kit';
 import { ampli } from '_src/shared/analytics/ampli';
-import { Theme, useTheme } from '@iota/core';
+import { useTheme } from '@iota/core';
 
 function MenuList() {
-    const { theme, setTheme } = useTheme();
-
+    const { theme } = useTheme();
     const navigate = useNavigate();
     const activeAccount = useActiveAccount();
     const networkUrl = useNextMenuUrl(true, '/network');
     const autoLockUrl = useNextMenuUrl(true, '/auto-lock');
+    const themeUrl = useNextMenuUrl(true, '/theme');
     const network = useAppSelector((state) => state.app.network);
     const networkConfig = network === Network.Custom ? getCustomNetwork() : getNetwork(network);
     const version = Browser.runtime.getManifest().version;
@@ -76,15 +76,16 @@ function MenuList() {
         navigate(autoLockUrl);
     }
 
+    function onThemeClick() {
+        navigate(themeUrl);
+    }
+
     function onFAQClick() {
         window.open(FAQ_LINK, '_blank', 'noopener noreferrer');
     }
 
-    function toggleTheme() {
-        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-        setTheme(newTheme);
-    }
     const autoLockSubtitle = handleAutoLockSubtitle();
+    const themeSubtitle = theme.charAt(0).toUpperCase() + theme.slice(1);
     const MENU_ITEMS = [
         {
             title: 'Network',
@@ -106,7 +107,8 @@ function MenuList() {
         {
             title: 'Themes',
             icon: <DarkMode />,
-            onClick: toggleTheme,
+            subtitle: themeSubtitle,
+            onClick: onThemeClick,
         },
         {
             title: 'Reset',

apps/wallet/src/ui/app/components/menu/content/index.tsx

@@ -16,6 +16,7 @@ import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-
 import { AutoLockAccounts } from './AutoLockAccounts';
 import { NetworkSettings } from './NetworkSettings';
 import WalletSettingsMenuList from './WalletSettingsMenuList';
+import { ThemeSettings } from './ThemeSettings';
 
 const CLOSE_KEY_CODES: string[] = ['Escape'];
 
@@ -49,6 +50,7 @@ function MenuContent() {
                         <Route path="/" element={<WalletSettingsMenuList />} />
                         <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
+                        <Route path="/theme" element={<ThemeSettings />} />
                         <Route path="*" element={<Navigate to={menuHomeUrl} replace={true} />} />
                     </Routes>
                 </MainLocationContext.Provider>