adjust styles

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-white': isShowBorder
+          'border-primary-foreground': isShowBorder
         }),
         thumb: cn('absolute z-4', 'transform -translate-x-[2px]'),
         ...classNames

src/renderer/src/components/profiles/profile-item.tsx

@@ -187,7 +187,7 @@ const ProfileItem: React.FC<Props> = (props) => {
               {...attributes}
               {...listeners}
               title={info?.name}
-              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               {info?.name}
             </h3>
@@ -208,7 +208,7 @@ const ProfileItem: React.FC<Props> = (props) => {
                   >
                     <IoMdRefresh
                       color="default"
-                      className={`${isCurrent ? 'text-white' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
+                      className={`${isCurrent ? 'text-primary-foreground' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
                     />
                   </Button>
                 </Tooltip>
@@ -219,7 +219,7 @@ const ProfileItem: React.FC<Props> = (props) => {
                   <Button isIconOnly size="sm" variant="light" color="default">
                     <IoMdMore
                       color="default"
-                      className={`text-[24px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
+                      className={`text-[24px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
                     />
                   </Button>
                 </DropdownTrigger>
@@ -240,7 +240,7 @@ const ProfileItem: React.FC<Props> = (props) => {
           </div>
           {info.type === 'remote' && extra && (
             <div
-              className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
               <small>
@@ -250,12 +250,12 @@ const ProfileItem: React.FC<Props> = (props) => {
           )}
           {info.type === 'local' && (
             <div
-              className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               <Chip
                 size="sm"
                 variant="bordered"
-                className={`${isCurrent ? 'text-white border-white' : 'border-primary text-primary'}`}
+                className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
               >
                 本地
               </Chip>
@@ -267,7 +267,7 @@ const ProfileItem: React.FC<Props> = (props) => {
             <Progress
               className="w-full"
               classNames={{
-                indicator: isCurrent ? 'bg-white' : 'bg-foreground'
+                indicator: isCurrent ? 'bg-primary-foreground' : 'bg-foreground'
               }}
               value={calcPercent(extra?.upload, extra?.download, extra?.total)}
             />

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

@@ -39,17 +39,22 @@ const ConnCard: React.FC = () => {
   const [chartColor, setChartColor] = useState('rgba(255,255,255)')
 
   useEffect(() => {
-    setTimeout(() => {
-      const islight = theme === 'system' ? systemTheme === 'light' : theme.includes('light')
     setChartColor(
       match
-          ? 'rgba(255,255,255)'
+        ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-primary-foreground')})`
-          : islight
+        : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-foreground')})`
-            ? window.getComputedStyle(document.documentElement).color
-            : 'rgb(255,255,255)'
     )
-    }, 1000)
+  }, [theme, systemTheme, match])
-  }, [theme, systemTheme, match, customTheme])
+
+  useEffect(() => {
+    setTimeout(() => {
+      setChartColor(
+        match
+          ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-primary-foreground')})`
+          : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-foreground')})`
+      )
+    }, 200)
+  }, [customTheme])
 
   const transform = tf ? { x: tf.x, y: tf.y, scaleX: 1, scaleY: 1 } : null
   useEffect(() => {
@@ -111,10 +116,12 @@ const ConnCard: React.FC = () => {
                 >
                   <IoLink
                     color="default"
-                    className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                    className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
                   />
                 </Button>
-                <div className={`p-2 w-full ${match ? 'text-white' : 'text-foreground'} `}>
+                <div
+                  className={`p-2 w-full ${match ? 'text-primary-foreground' : '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]" />
@@ -127,7 +134,9 @@ const ConnCard: React.FC = () => {
               </div>
             </CardBody>
             <CardFooter className="pt-1">
-              <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+              <h3
+                className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
                 连接
               </h3>
             </CardFooter>
@@ -175,13 +184,15 @@ const ConnCard: React.FC = () => {
               >
                 <IoLink
                   color="default"
-                  className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                  className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
                 />
               </Button>
             </div>
           </CardBody>
           <CardFooter className="pt-1">
-            <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+            <h3
+              className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            >
               连接
             </h3>
           </CardFooter>

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

@@ -57,7 +57,7 @@ const DNSCard: React.FC = () => {
               color="default"
             >
               <LuServer
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
             <BorderSwitch
@@ -69,7 +69,11 @@ const DNSCard: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>DNS</h3>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
+            DNS
+          </h3>
         </CardFooter>
       </Card>
     </div>

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

@@ -47,13 +47,17 @@ const LogCard: React.FC = () => {
             >
               <IoJournalOutline
                 color="default"
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>日志</h3>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
+            日志
+          </h3>
         </CardFooter>
       </Card>
     </div>

src/renderer/src/components/sider/mihomo-core-card.tsx

@@ -69,7 +69,7 @@ const MihomoCoreCard: React.FC = () => {
               className="flex justify-between h-[32px]"
             >
               <h3
-                className={`text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+                className={`text-md font-bold leading-[32px] ${match ? 'text-primary-foreground' : 'text-foreground'} `}
               >
                 {version?.version ?? '-'}
               </h3>
@@ -90,14 +90,14 @@ const MihomoCoreCard: React.FC = () => {
                 }}
               >
                 <IoMdRefresh
-                  className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                  className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
                 />
               </Button>
             </div>
           </CardBody>
           <CardFooter className="pt-1">
             <div
-              className={`flex justify-between w-full text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
+              className={`flex justify-between w-full text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               <h4>内核设置</h4>
               <h4>{calcTraffic(mem)}</h4>
@@ -122,13 +122,15 @@ const MihomoCoreCard: React.FC = () => {
               >
                 <LuCpu
                   color="default"
-                  className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                  className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
                 />
               </Button>
             </div>
           </CardBody>
           <CardFooter className="pt-1">
-            <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+            <h3
+              className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            >
               内核设置
             </h3>
           </CardFooter>

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

@@ -49,13 +49,17 @@ const OverrideCard: React.FC = () => {
             >
               <MdFormatOverline
                 color="default"
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
               />
             </Button>
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>覆写</h3>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
+            覆写
+          </h3>
         </CardFooter>
       </Card>
     </div>

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

@@ -75,7 +75,7 @@ const ProfileCard: React.FC = () => {
             >
               <h3
                 title={info?.name}
-                className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+                className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-primary-foreground' : 'text-foreground'} `}
               >
                 {info?.name}
               </h3>
@@ -91,7 +91,7 @@ const ProfileCard: React.FC = () => {
                   }}
                 >
                   <CgLoadbarDoc
-                    className={`text-[24px] ${match ? 'text-white' : 'text-foreground'}`}
+                    className={`text-[24px] ${match ? 'text-primary-foreground' : 'text-foreground'}`}
                   />
                 </Button>
                 {info.type === 'remote' && (
@@ -109,7 +109,7 @@ const ProfileCard: React.FC = () => {
                       }}
                     >
                       <IoMdRefresh
-                        className={`text-[24px] ${match ? 'text-white' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
+                        className={`text-[24px] ${match ? 'text-primary-foreground' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
                       />
                     </Button>
                   </Tooltip>
@@ -118,7 +118,7 @@ const ProfileCard: React.FC = () => {
             </div>
             {info.type === 'remote' && extra && (
               <div
-                className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'} `}
+                className={`mt-2 flex justify-between ${match ? 'text-primary-foreground' : 'text-foreground'} `}
               >
                 <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
                 <small>
@@ -128,12 +128,12 @@ const ProfileCard: React.FC = () => {
             )}
             {info.type === 'local' && (
               <div
-                className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'}`}
+                className={`mt-2 flex justify-between ${match ? 'text-primary-foreground' : 'text-foreground'}`}
               >
                 <Chip
                   size="sm"
                   variant="bordered"
-                  className={`${match ? 'text-white border-white' : 'border-primary text-primary'}`}
+                  className={`${match ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
                 >
                   本地
                 </Chip>
@@ -144,7 +144,7 @@ const ProfileCard: React.FC = () => {
             {extra && (
               <Progress
                 className="w-full"
-                classNames={{ indicator: match ? 'bg-white' : 'bg-foreground' }}
+                classNames={{ indicator: match ? 'bg-primary-foreground' : 'bg-foreground' }}
                 value={calcPercent(extra?.upload, extra?.download, extra?.total)}
               />
             )}
@@ -168,13 +168,15 @@ const ProfileCard: React.FC = () => {
               >
                 <TiFolder
                   color="default"
-                  className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                  className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
                 />
               </Button>
             </div>
           </CardBody>
           <CardFooter className="pt-1">
-            <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+            <h3
+              className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            >
               订阅管理
             </h3>
           </CardFooter>

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

@@ -50,15 +50,15 @@ const ProxyCard: React.FC = () => {
               color="default"
             >
               <LuGroup
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
             <Chip
               classNames={
                 match
                   ? {
-                      base: 'border-white',
+                      base: 'border-primary-foreground',
-                      content: 'text-white'
+                      content: 'text-primary-foreground'
                     }
                   : {
                       base: 'border-primary',
@@ -74,7 +74,9 @@ const ProxyCard: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             代理组
           </h3>
         </CardFooter>

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

@@ -48,13 +48,15 @@ const ResourceCard: React.FC = () => {
             >
               <IoLayersOutline
                 color="default"
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             外部资源
           </h3>
         </CardFooter>

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

@@ -50,15 +50,15 @@ const RuleCard: React.FC = () => {
             >
               <MdOutlineAltRoute
                 color="default"
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
               />
             </Button>
             <Chip
               classNames={
                 match
                   ? {
-                      base: 'border-white',
+                      base: 'border-primary-foreground',
-                      content: 'text-white'
+                      content: 'text-primary-foreground'
                     }
                   : {
                       base: 'border-primary',
@@ -74,7 +74,11 @@ const RuleCard: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>规则</h3>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
+            规则
+          </h3>
         </CardFooter>
       </Card>
     </div>

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

@@ -59,7 +59,7 @@ const SniffCard: React.FC = () => {
             >
               <RiScan2Fill
                 color="default"
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px]`}
               />
             </Button>
             <BorderSwitch
@@ -70,7 +70,9 @@ const SniffCard: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             域名嗅探
           </h3>
         </CardFooter>

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

@@ -46,13 +46,15 @@ const SubStoreCard: React.FC = () => {
               color="default"
             >
               <SubStoreIcon
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             Sub-Store
           </h3>
         </CardFooter>

src/renderer/src/components/sider/sysproxy-switcher.tsx

@@ -61,7 +61,7 @@ const SysproxySwitcher: React.FC = () => {
               color="default"
             >
               <AiOutlineGlobal
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
             <BorderSwitch
@@ -72,7 +72,9 @@ const SysproxySwitcher: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             系统代理
           </h3>
         </CardFooter>

src/renderer/src/components/sider/tun-switcher.tsx

@@ -98,7 +98,7 @@ const TunSwitcher: React.FC = () => {
               color="default"
             >
               <TbDeviceIpadHorizontalBolt
-                className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
+                className={`${match ? 'text-primary-foreground' : 'text-foreground'} text-[24px] font-bold`}
               />
             </Button>
             <BorderSwitch
@@ -109,7 +109,9 @@ const TunSwitcher: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+          <h3
+            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+          >
             虚拟网卡
           </h3>
         </CardFooter>