complete theme config

Author: pompurin404

src/renderer/src/main.tsx

@@ -13,7 +13,7 @@ init().then(() => {
       <NextUIProvider>
         <NextThemesProvider
           attribute="class"
-          themes={['light', 'dark', 'gray', 'pink']}
+          themes={['light', 'dark', 'gray', 'light-pink', 'dark-pink', 'gray-pink']}
           enableSystem
           defaultTheme="dark"
         >

src/renderer/src/pages/settings.tsx

@@ -13,7 +13,7 @@ import {
 import { IoLogoGithub } from 'react-icons/io5'
 import { version } from '@renderer/utils/init'
 import useSWR from 'swr'
-import { useState } from 'react'
+import { Key, useState } from 'react'
 import debounce from '@renderer/utils/debounce'
 import { useTheme } from 'next-themes'
 
@@ -41,6 +41,30 @@ const Settings: React.FC = () => {
     patchAppConfig({ userAgent: v })
   }, 500)
 
+  const onThemeChange = (key: Key, type: 'theme' | 'color'): void => {
+    const [theme, color] = appTheme.split('-')
+
+    if (type === 'theme') {
+      let themeStr = key.toString()
+      if (key !== 'system') {
+        if (color) {
+          themeStr += `-${color}`
+        }
+      }
+      setTheme(themeStr)
+      patchAppConfig({ appTheme: themeStr as AppTheme })
+    } else {
+      let themeStr = theme
+      if (theme !== 'system') {
+        if (key !== 'blue') {
+          themeStr += `-${key}`
+        }
+        setTheme(themeStr)
+        patchAppConfig({ appTheme: themeStr as AppTheme })
+      }
+    }
+  }
+
   return (
     <BasePage
       title="应用设置"
@@ -89,25 +113,36 @@ const Settings: React.FC = () => {
             }}
           />
         </SettingItem>
-        <SettingItem title="应用主题">
+        <SettingItem title="应用主题(亮度)" divider={appTheme !== 'system'}>
           <Tabs
             size="sm"
             color="primary"
-            selectedKey={appTheme}
+            selectedKey={appTheme.split('-')[0]}
             onSelectionChange={(key) => {
-              console.log(key)
-              setTheme(key as AppTheme)
-
-              patchAppConfig({ appTheme: key as AppTheme })
+              onThemeChange(key, 'theme')
             }}
           >
             <Tab key="system" title="自动" />
             <Tab key="dark" title="深色" />
             <Tab key="gray" title="灰色" />
-            <Tab key="pink" title="粉色" />
             <Tab key="light" title="浅色" />
           </Tabs>
         </SettingItem>
+        {appTheme !== 'system' && (
+          <SettingItem title="应用主题(颜色)">
+            <Tabs
+              size="sm"
+              color="primary"
+              selectedKey={appTheme.split('-')[1] || 'blue'}
+              onSelectionChange={(key) => {
+                onThemeChange(key, 'color')
+              }}
+            >
+              <Tab key="blue" title="蓝色" />
+              <Tab key="pink" title="粉色" />
+            </Tabs>
+          </SettingItem>
+        )}
       </SettingCard>
       <SettingCard>
         <SettingItem title="订阅拉取 UA" divider>

src/shared/types.d.ts

@@ -1,7 +1,7 @@
 type OutboundMode = 'rule' | 'global' | 'direct'
 type LogLevel = 'info' | 'debug' | 'warning' | 'error' | 'silent'
 type SysProxyMode = 'auto' | 'manual'
-type AppTheme = 'system' | 'light' | 'dark' | 'gray' | 'pink'
+type AppTheme = 'system' | 'light' | 'dark' | 'gray' | 'light-pink' | 'dark-pink' | 'gray-pink'
 type MihomoGroupType = 'Selector' | 'URLTest' | 'LoadBalance' | 'Relay'
 type MihomoProxyType =
   | 'Direct'

tailwind.config.js

@@ -30,12 +30,38 @@ module.exports = {
             }
           }
         },
-        pink: {
+        'light-pink': {
           extend: 'light',
           colors: {
             primary: '#ED9CC2',
             secondary: '#71CCAA'
           }
+        },
+        'dark-pink': {
+          extend: 'dark',
+          colors: {
+            primary: '#ED9CC2',
+            secondary: '#71CCAA'
+          }
+        },
+        'gray-pink': {
+          extend: 'dark',
+          colors: {
+            background: '#18181b',
+            content1: '#27272a',
+            content2: '#3f3f46',
+            content3: '#52525b',
+            default: {
+              DEFAULT: '#52525b',
+              50: '#27272a',
+              100: '#3f3f46',
+              200: '#52525b',
+              300: '#71717a',
+              400: '#a1a1aa'
+            },
+            primary: '#ED9CC2',
+            secondary: '#71CCAA'
+          }
         }
       }
     })