add green theme

README.md

@@ -14,7 +14,8 @@
   </a>
 </p>
 
-|      | 深色                        | 灰色                        | 浅色                         |
-| ---- | --------------------------- | --------------------------- | ---------------------------- |
-| 蓝色 | ![](./images/dark-blue.png) | ![](./images/gray-blue.png) | ![](./images/light-blue.png) |
-| 粉色 | ![](./images/dark-pink.png) | ![](./images/gray-pink.png) | ![](./images/light-pink.png) |
+|      | 深色                         | 灰色                         | 浅色                          |
+| ---- | ---------------------------- | ---------------------------- | ----------------------------- |
+| 蓝色 | ![](./images/dark-blue.png)  | ![](./images/gray-blue.png)  | ![](./images/light-blue.png)  |
+| 粉色 | ![](./images/dark-pink.png)  | ![](./images/gray-pink.png)  | ![](./images/light-pink.png)  |
+| 绿色 | ![](./images/dark-green.png) | ![](./images/gray-green.png) | ![](./images/light-green.png) |

src/renderer/src/main.tsx

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

src/renderer/src/pages/settings.tsx

@@ -146,6 +146,7 @@ const Settings: React.FC = () => {
             >
               <Tab key="blue" title="蓝色" />
               <Tab key="pink" title="粉色" />
+              <Tab key="green" title="绿色" />
             </Tabs>
           </SettingItem>
         )}

src/shared/types.d.ts

@@ -1,7 +1,17 @@
 type OutboundMode = 'rule' | 'global' | 'direct'
 type LogLevel = 'info' | 'debug' | 'warning' | 'error' | 'silent'
 type SysProxyMode = 'auto' | 'manual'
-type AppTheme = 'system' | 'light' | 'dark' | 'gray' | 'light-pink' | 'dark-pink' | 'gray-pink'
+type AppTheme =
+  | '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

@@ -62,6 +62,42 @@ module.exports = {
             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'
+          }
         }
       }
     })