adjust the light mode style

mihomo-party-org · Aug 5, 2024 · 448c724 · 448c724
1 parent d31b519
commit 448c724
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 59 deletions.
diff --git a/src/renderer/src/components/base/border-swtich.tsx b/src/renderer/src/components/base/border-swtich.tsx
@@ -13,7 +13,7 @@ const BorderSwitch: React.FC<SiderSwitchProps> = (props) => {
       classNames={{
         wrapper: cn('border-2', {
           'border-transparent': !isShowBorder,
-          'border-foreground': isShowBorder
+          'border-white': isShowBorder
         }),
         thumb: cn('absolute z-4', 'transform -translate-x-[2px]'),
         ...classNames

diff --git a/src/renderer/src/components/profiles/profile-item.tsx b/src/renderer/src/components/profiles/profile-item.tsx
@@ -122,7 +122,9 @@ const ProfileItem: React.FC<Props> = (props) => {
       <Card fullWidth isPressable onPress={onClick} className={isCurrent ? 'bg-primary' : ''}>
         <CardBody className="pb-1">
           <div className="flex justify-between h-[32px]">
-            <h3 className="select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px]">
+            <h3
+              className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
+            >
               {info?.name}
             </h3>
             <div className="flex">
@@ -141,13 +143,16 @@ const ProfileItem: React.FC<Props> = (props) => {
               >
                 <IoMdRefresh
                   color="default"
-                  className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
+                  className={`${isCurrent ? 'text-white' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
                 />
               </Button>
               <Dropdown>
                 <DropdownTrigger>
                   <Button isIconOnly size="sm" variant="light" color="default">
-                    <IoMdMore color="default" className="text-[24px]" />
+                    <IoMdMore
+                      color="default"
+                      className={`text-[24px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
+                    />
                   </Button>
                 </DropdownTrigger>
                 <DropdownMenu onAction={onMenuAction}>
@@ -165,7 +170,9 @@ const ProfileItem: React.FC<Props> = (props) => {
               </Dropdown>
             </div>
           </div>
-          <div className="mt-2 flex justify-between">
+          <div
+            className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+          >
             <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
             <small>{dayjs(info.updated).fromNow()}</small>
           </div>
@@ -174,7 +181,10 @@ const ProfileItem: React.FC<Props> = (props) => {
           {extra && (
             <Progress
               className="w-full"
-              classNames={{ indicator: 'bg-foreground', label: 'select-none' }}
+              classNames={{
+                indicator: isCurrent ? 'bg-white' : 'bg-foreground',
+                label: 'select-none'
+              }}
               value={calcPercent(extra?.upload, extra?.download, extra?.total)}
             />
           )}

diff --git a/src/renderer/src/components/sider/conn-card.tsx b/src/renderer/src/components/sider/conn-card.tsx
@@ -38,9 +38,12 @@ const ConnCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <IoLink color="default" className="text-[20px]" />
+            <IoLink
+              color="default"
+              className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+            />
           </Button>
-          <div className="p-2 w-full select-none">
+          <div className={`p-2 w-full select-none ${match ? 'text-white' : 'text-foreground'} `}>
             <div className="flex justify-between">
               <div className="w-full text-right mr-2">{calcTraffic(upload)}/s</div>
               <FaCircleArrowUp className="h-[24px] leading-[24px]" />
@@ -53,7 +56,9 @@ const ConnCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">连接</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          连接
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/log-card.tsx b/src/renderer/src/components/sider/log-card.tsx
@@ -20,12 +20,17 @@ const LogCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <IoJournal color="default" className="text-[20px]" />
+            <IoJournal
+              color="default"
+              className={`${match ? 'text-white' : 'text-foreground'} text-[20px] font-bold`}
+            />
           </Button>
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">日志</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          日志
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/mihomo-core-card.tsx.tsx b/src/renderer/src/components/sider/mihomo-core-card.tsx.tsx
@@ -39,7 +39,9 @@ const MihomoCoreCard: React.FC = () => {
     >
       <CardBody>
         <div className="flex justify-between h-[32px]">
-          <h3 className="select-none text-md font-bold leading-[32px]">
+          <h3
+            className={`select-none text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+          >
             {version?.version ?? '-'}
           </h3>
 
@@ -52,14 +54,16 @@ const MihomoCoreCard: React.FC = () => {
               restartCore()
             }}
           >
-            <IoMdRefresh color="default" className="text-[24px]" />
+            <IoMdRefresh className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`} />
           </Button>
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <div className="flex justify-between w-full">
-          <h4 className="select-none text-md font-bold">内核设置</h4>
-          <h4 className="select-none text-md">{calcTraffic(mem)}</h4>
+        <div
+          className={`flex justify-between w-full select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
+        >
+          <h4>内核设置</h4>
+          <h4>{calcTraffic(mem)}</h4>
         </div>
       </CardFooter>
     </Card>

diff --git a/src/renderer/src/components/sider/override-card.tsx b/src/renderer/src/components/sider/override-card.tsx
@@ -24,7 +24,10 @@ const OverrideCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <MdFormatOverline color="default" className="text-[24px]" />
+            <MdFormatOverline
+              color="default"
+              className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+            />
           </Button>
           <BorderSwitch
             isShowBorder={match && enable}
@@ -34,7 +37,9 @@ const OverrideCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">覆写</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          覆写
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/profile-card.tsx b/src/renderer/src/components/sider/profile-card.tsx
@@ -37,7 +37,9 @@ const ProfileCard: React.FC = () => {
     >
       <CardBody className="pb-1">
         <div className="flex justify-between h-[32px]">
-          <h3 className="select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px]">
+          <h3
+            className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+          >
             {info?.name}
           </h3>
           <Button
@@ -54,12 +56,11 @@ const ProfileCard: React.FC = () => {
             }}
           >
             <IoMdRefresh
-              color="default"
-              className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
+              className={`text-[24px] ${match ? 'text-white' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
             />
           </Button>
         </div>
-        <div className="mt-2 flex justify-between">
+        <div className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'} `}>
           <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
           <small>{dayjs(info.updated).fromNow()}</small>
         </div>
@@ -68,7 +69,7 @@ const ProfileCard: React.FC = () => {
         {extra && (
           <Progress
             className="w-full"
-            classNames={{ indicator: 'bg-foreground', label: 'select-none' }}
+            classNames={{ indicator: match ? 'bg-white' : 'bg-foreground', label: 'select-none' }}
             value={calcPercent(extra?.upload, extra?.download, extra?.total)}
           />
         )}

diff --git a/src/renderer/src/components/sider/proxy-card.tsx b/src/renderer/src/components/sider/proxy-card.tsx
@@ -24,14 +24,16 @@ const ProxyCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <SiNginxproxymanager color="default" className="text-[20px]" />
+            <SiNginxproxymanager
+              className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+            />
           </Button>
           <Chip
             classNames={
               match
                 ? {
-                    base: 'border-foreground',
-                    content: 'text-foreground'
+                    base: 'border-white',
+                    content: 'text-white'
                   }
                 : {
                     base: 'border-primary',
@@ -47,7 +49,9 @@ const ProxyCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">代理组</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          代理组
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/rule-card.tsx b/src/renderer/src/components/sider/rule-card.tsx
@@ -26,14 +26,17 @@ const RuleCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <IoGitNetwork color="default" className="text-[20px]" />
+            <IoGitNetwork
+              color="default"
+              className={`${match ? 'text-white' : 'text-foreground'} text-[20px]`}
+            />
           </Button>
           <Chip
             classNames={
               match
                 ? {
-                    base: 'border-foreground',
-                    content: 'text-foreground'
+                    base: 'border-white',
+                    content: 'text-white'
                   }
                 : {
                     base: 'border-primary',
@@ -49,7 +52,9 @@ const RuleCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">规则</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          规则
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/sysproxy-switcher.tsx b/src/renderer/src/components/sider/sysproxy-switcher.tsx
@@ -37,7 +37,9 @@ const SysproxySwitcher: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <AiOutlineGlobal color="default" className="text-[24px]" />
+            <AiOutlineGlobal
+              className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+            />
           </Button>
           <BorderSwitch
             isShowBorder={match && enable}
@@ -47,7 +49,9 @@ const SysproxySwitcher: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">系统代理</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          系统代理
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/test-card.tsx b/src/renderer/src/components/sider/test-card.tsx
@@ -22,12 +22,17 @@ const TestCard: React.FC = () => {
             variant="flat"
             color="default"
           >
-            <TbWorldCheck color="default" className="text-[20px]" />
+            <TbWorldCheck
+              color="default"
+              className={`${match ? 'text-white' : 'text-foreground'} text-[20px] font-bold`}
+            />
           </Button>
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className="select-none text-md font-bold">测试</h3>
+        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          测试
+        </h3>
       </CardFooter>
     </Card>
   )

diff --git a/src/renderer/src/components/sider/tun-switcher.tsx b/src/renderer/src/components/sider/tun-switcher.tsx
@@ -60,7 +60,9 @@ const TunSwitcher: React.FC = () => {
               variant="flat"
               color="default"
             >
-              <TbDeviceIpadHorizontalBolt color="default" className="text-[24px] font-bold" />
+              <TbDeviceIpadHorizontalBolt
+                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+              />
             </Button>
             <BorderSwitch
               isShowBorder={match && enable}
@@ -70,7 +72,11 @@ const TunSwitcher: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className="select-none text-md font-bold">虚拟网卡</h3>
+          <h3
+            className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
+          >
+            虚拟网卡
+          </h3>
         </CardFooter>
       </Card>
     </>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,26 +10,5 @@ module.exports = {
     extend: {}
   },
   darkMode: 'class',
-  plugins: [
-    nextui({
-      themes: {
-        dark: {
-          colors: {
-            primary: {
-              DEFAULT: '#006FEE',
-              foreground: '#FFFFFF'
-            }
-          }
-        },
-        light: {
-          colors: {
-            primary: {
-              DEFAULT: '#41C3F8',
-              foreground: '#000000'
-            }
-          }
-        }
-      }
-    })
-  ]
+  plugins: [nextui()]
 }