add gray theme

Author: pompurin404

src/main/utils/template.ts

@@ -1,6 +1,7 @@
 export const defaultConfig: IAppConfig = {
   core: 'mihomo',
   silentStart: false,
+  appTheme: 'system',
   proxyDisplayMode: 'simple',
   proxyDisplayOrder: 'default',
   autoCheckUpdate: true,

src/renderer/src/App.tsx

@@ -18,30 +18,18 @@ import LogCard from '@renderer/components/sider/log-card'
 import MihomoCoreCard from '@renderer/components/sider/mihomo-core-card'
 import ResourceCard from '@renderer/components/sider/resource-card'
 import UpdaterButton from '@renderer/components/updater/updater-button'
+import { useAppConfig } from './hooks/use-app-config'
 
 const App: React.FC = () => {
+  const { appConfig } = useAppConfig()
+  const { appTheme = 'system' } = appConfig || {}
   const { setTheme } = useTheme()
   const navigate = useNavigate()
   const location = useLocation()
   const page = useRoutes(routes)
 
   useEffect(() => {
-    try {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        setTheme('dark')
-      } else {
-        setTheme('light')
-      }
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        if (e.matches) {
-          setTheme('dark')
-        } else {
-          setTheme('light')
-        }
-      })
-    } catch {
-      throw new Error('Failed to set theme')
-    }
+    setTheme(appTheme)
   }, [])
 
   return (

src/renderer/src/components/profiles/edit-file-modal.tsx

@@ -40,7 +40,7 @@ const EditFileModal: React.FC<Props> = (props) => {
             height="100%"
             language="yaml"
             value={currData}
-            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            theme={theme === 'light' ? 'vs' : 'vs-dark'}
             options={{
               minimap: {
                 enabled: false

src/renderer/src/components/proxies/proxy-item.tsx

@@ -58,7 +58,7 @@ const ProxyItem: React.FC<Props> = (props) => {
       onPress={() => onSelect(group.name, proxy.name)}
       isPressable
       fullWidth
-      className={`${selected ? 'bg-primary/30' : ''}`}
+      className={`${selected ? 'bg-primary/30' : 'bg-content2'}`}
       radius="sm"
     >
       <CardBody className="p-2">

src/renderer/src/components/sider/config-viewer.tsx

@@ -39,7 +39,7 @@ const ConfigViewer: React.FC<Props> = (props) => {
             height="100%"
             language="yaml"
             value={currData}
-            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            theme={theme === 'light' ? 'vs' : 'vs-dark'}
             options={{
               readOnly: true,
               minimap: {

src/renderer/src/components/sysproxy/pac-editor-modal.tsx

@@ -32,7 +32,7 @@ const PacEditorViewer: React.FC<Props> = (props) => {
             height="100%"
             language="javascript"
             value={currData}
-            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            theme={theme === 'light' ? 'vs' : 'vs-dark'}
             options={{
               minimap: {
                 enabled: false

src/renderer/src/main.tsx

@@ -11,7 +11,12 @@ init().then(() => {
   ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
       <NextUIProvider>
-        <NextThemesProvider attribute="class" defaultTheme="dark">
+        <NextThemesProvider
+          attribute="class"
+          themes={['light', 'dark', 'gray']}
+          enableSystem
+          defaultTheme="dark"
+        >
           <HashRouter>
             <App />
           </HashRouter>

src/renderer/src/pages/settings.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Switch } from '@nextui-org/react'
+import { Button, Input, Switch, Tab, Tabs } from '@nextui-org/react'
 import BasePage from '@renderer/components/base/base-page'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
@@ -15,20 +15,22 @@ import { version } from '@renderer/utils/init'
 import useSWR from 'swr'
 import { useState } from 'react'
 import debounce from '@renderer/utils/debounce'
+import { useTheme } from 'next-themes'
 
 const Settings: React.FC = () => {
+  const { setTheme } = useTheme()
   const { data: enable, mutate } = useSWR('checkAutoRun', checkAutoRun, {
     errorRetryCount: 5,
     errorRetryInterval: 200
   })
-
   const { appConfig, patchAppConfig } = useAppConfig()
   const {
     silentStart = false,
     delayTestUrl,
     delayTestTimeout,
     autoCheckUpdate,
-    userAgent
+    userAgent,
+    appTheme = 'system'
   } = appConfig || {}
   const [url, setUrl] = useState(delayTestUrl)
   const [ua, setUa] = useState(userAgent)
@@ -72,7 +74,7 @@ const Settings: React.FC = () => {
             }}
           />
         </SettingItem>
-        <SettingItem title="静默启动">
+        <SettingItem title="静默启动" divider>
           <Switch
             size="sm"
             isSelected={silentStart}
@@ -81,6 +83,24 @@ const Settings: React.FC = () => {
             }}
           />
         </SettingItem>
+        <SettingItem title="应用主题">
+          <Tabs
+            size="sm"
+            color="primary"
+            selectedKey={appTheme}
+            onSelectionChange={(key) => {
+              console.log(key)
+              setTheme(key as AppTheme)
+
+              patchAppConfig({ appTheme: key as AppTheme })
+            }}
+          >
+            <Tab key="system" title="自动" />
+            <Tab key="dark" title="深色" />
+            <Tab key="gray" title="灰色" />
+            <Tab key="light" title="浅色" />
+          </Tabs>
+        </SettingItem>
       </SettingCard>
       <SettingCard>
         <SettingItem title="订阅拉取 UA" divider>

src/shared/types.d.ts

@@ -1,6 +1,7 @@
 type OutboundMode = 'rule' | 'global' | 'direct'
 type LogLevel = 'info' | 'debug' | 'warning' | 'error' | 'silent'
 type SysProxyMode = 'auto' | 'manual'
+type AppTheme = 'system' | 'light' | 'dark' | 'gray'
 type MihomoGroupType = 'Selector' | 'URLTest' | 'LoadBalance' | 'Relay'
 type MihomoProxyType =
   | 'Direct'
@@ -191,6 +192,7 @@ interface IAppConfig {
   core: 'mihomo' | 'mihomo-alpha'
   proxyDisplayMode: 'simple' | 'full'
   proxyDisplayOrder: 'default' | 'delay' | 'name'
+  appTheme: AppTheme
   autoCheckUpdate: boolean
   silentStart: boolean
   sysProxy: ISysProxyConfig

tailwind.config.js

@@ -10,5 +10,27 @@ module.exports = {
     extend: {}
   },
   darkMode: 'class',
-  plugins: [nextui()]
+  plugins: [
+    nextui({
+      themes: {
+        gray: {
+          extend: 'dark',
+          colors: {
+            background: '#18181b',
+            content1: '#27272a',
+            content2: '#3f3f46',
+            content3: '#52525b',
+            default: {
+              DEFAULT: '#52525b',
+              50: '#27272a',
+              100: '#3f3f46',
+              200: '#52525b',
+              300: '#71717a',
+              400: '#a1a1aa'
+            }
+          }
+        }
+      }
+    })
+  ]
 }