remove themes

src/main/utils/init.ts

@@ -141,6 +141,7 @@ async function migration(): Promise<void> {
       'log',
       'substore'
     ],
+    appTheme = 'system',
     useSubStore = true
   } = await getAppConfig()
   const {
@@ -174,6 +175,10 @@ async function migration(): Promise<void> {
   if (!lanDisallowedIps) {
     await patchControledMihomoConfig({ 'lan-disallowed-ips': [] })
   }
+  // remove custom app theme
+  if (!['system', 'light', 'dark'].includes(appTheme)) {
+    await patchAppConfig({ appTheme: 'system' })
+  }
 }
 
 function initDeeplink(): void {

src/renderer/src/App.tsx

@@ -82,18 +82,11 @@ const App: React.FC = () => {
   useEffect(() => {
     if (!injectCSS) return
     console.log('injectCSS', injectCSS)
-    // window.electron.webFrame.insertCSS(injectCSS)
     insertCSS(injectCSS)
   }, [injectCSS])
 
   useEffect(() => {
-    if (appTheme.includes('light')) {
+    setNativeTheme(appTheme)
-      setNativeTheme('light')
-    } else if (appTheme === 'system') {
-      setNativeTheme('system')
-    } else {
-      setNativeTheme('dark')
-    }
     setTheme(appTheme)
     if (!useWindowFrame) {
       const options = { height: 48 } as TitleBarOverlayOptions

src/renderer/src/components/settings/general-config.tsx

@@ -1,4 +1,4 @@
-import React, { Key, useState } from 'react'
+import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
 import { Button, Input, Select, SelectItem, Switch, Tab, Tabs, Tooltip } from '@nextui-org/react'
@@ -37,30 +37,6 @@ const GeneralConfig: React.FC = () => {
     appTheme = 'system'
   } = appConfig || {}
 
-  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 (
     <>
       {openCSSEditor && (
@@ -223,37 +199,21 @@ const GeneralConfig: React.FC = () => {
             编辑 CSS 样式
           </Button>
         </SettingItem>
-        <SettingItem title="背景色" divider={appTheme !== 'system'}>
+        <SettingItem title="背景色">
           <Tabs
             size="sm"
             color="primary"
-            selectedKey={appTheme.split('-')[0]}
+            selectedKey={appTheme}
             onSelectionChange={(key) => {
-              onThemeChange(key, 'theme')
+              setTheme(key.toString())
+              patchAppConfig({ appTheme: key as AppTheme })
             }}
           >
             <Tab key="system" title="自动" />
             <Tab key="dark" title="深色" />
-            <Tab key="gray" 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="粉色" />
-              <Tab key="green" title="绿色" />
-            </Tabs>
-          </SettingItem>
-        )}
       </SettingCard>
     </>
   )

src/renderer/src/components/sider/conn-card.tsx

@@ -38,7 +38,11 @@ const ConnCard: React.FC = () => {
   const [series, setSeries] = useState(Array(10).fill(0))
   const chartColor = useMemo(() => {
     const islight = theme === 'system' ? systemTheme === 'light' : theme.includes('light')
-    return match ? 'rgba(255,255,255)' : islight ? 'rgba(0,0,0' : 'rgba(255,255,255)'
+    return match
+      ? 'rgba(255,255,255)'
+      : islight
+        ? window.getComputedStyle(document.documentElement).color
+        : 'rgb(255,255,255)'
   }, [theme, systemTheme, match])
 
   const transform = tf ? { x: tf.x, y: tf.y, scaleX: 1, scaleY: 1 } : null

src/renderer/src/main.tsx

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

src/shared/types.d.ts

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

tailwind.config.js

@@ -10,96 +10,5 @@ module.exports = {
     extend: {}
   },
   darkMode: 'class',
-  plugins: [
+  plugins: [nextui()]
-    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'
-            }
-          }
-        },
-        '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'
-          }
-        },
-        'light-green': {
-          extend: 'light',
-          colors: {
-            primary: '#71CCAA',
-            secondary: '#ED9CC2',
-            danger: '#ED9CC2'
-          }
-        },
-        'dark-green': {
-          extend: 'dark',
-          colors: {
-            primary: '#71CCAA',
-            secondary: '#ED9CC2',
-            danger: '#ED9CC2'
-          }
-        },
-        'gray-green': {
-          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: '#71CCAA',
-            secondary: '#ED9CC2',
-            danger: '#ED9CC2'
-          }
-        }
-      }
-    })
-  ]
 }