Skip to content

Commit 448c724

Browse files
author
pompurin404
committed
adjust the light mode style
1 parent d31b519 commit 448c724

13 files changed

+92
-59
lines changed

‎src/renderer/src/components/base/border-swtich.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const BorderSwitch: React.FC<SiderSwitchProps> = (props) => {
1313
classNames={{
1414
wrapper: cn('border-2', {
1515
'border-transparent': !isShowBorder,
16-
'border-foreground': isShowBorder
16+
'border-white': isShowBorder
1717
}),
1818
thumb: cn('absolute z-4', 'transform -translate-x-[2px]'),
1919
...classNames

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

+15-5
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,9 @@ const ProfileItem: React.FC<Props> = (props) => {
122122
<Card fullWidth isPressable onPress={onClick} className={isCurrent ? 'bg-primary' : ''}>
123123
<CardBody className="pb-1">
124124
<div className="flex justify-between h-[32px]">
125-
<h3 className="select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px]">
125+
<h3
126+
className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
127+
>
126128
{info?.name}
127129
</h3>
128130
<div className="flex">
@@ -141,13 +143,16 @@ const ProfileItem: React.FC<Props> = (props) => {
141143
>
142144
<IoMdRefresh
143145
color="default"
144-
className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
146+
className={`${isCurrent ? 'text-white' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
145147
/>
146148
</Button>
147149
<Dropdown>
148150
<DropdownTrigger>
149151
<Button isIconOnly size="sm" variant="light" color="default">
150-
<IoMdMore color="default" className="text-[24px]" />
152+
<IoMdMore
153+
color="default"
154+
className={`text-[24px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
155+
/>
151156
</Button>
152157
</DropdownTrigger>
153158
<DropdownMenu onAction={onMenuAction}>
@@ -165,7 +170,9 @@ const ProfileItem: React.FC<Props> = (props) => {
165170
</Dropdown>
166171
</div>
167172
</div>
168-
<div className="mt-2 flex justify-between">
173+
<div
174+
className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
175+
>
169176
<small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
170177
<small>{dayjs(info.updated).fromNow()}</small>
171178
</div>
@@ -174,7 +181,10 @@ const ProfileItem: React.FC<Props> = (props) => {
174181
{extra && (
175182
<Progress
176183
className="w-full"
177-
classNames={{ indicator: 'bg-foreground', label: 'select-none' }}
184+
classNames={{
185+
indicator: isCurrent ? 'bg-white' : 'bg-foreground',
186+
label: 'select-none'
187+
}}
178188
value={calcPercent(extra?.upload, extra?.download, extra?.total)}
179189
/>
180190
)}

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,12 @@ const ConnCard: React.FC = () => {
3838
variant="flat"
3939
color="default"
4040
>
41-
<IoLink color="default" className="text-[20px]" />
41+
<IoLink
42+
color="default"
43+
className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
44+
/>
4245
</Button>
43-
<div className="p-2 w-full select-none">
46+
<div className={`p-2 w-full select-none ${match ? 'text-white' : 'text-foreground'} `}>
4447
<div className="flex justify-between">
4548
<div className="w-full text-right mr-2">{calcTraffic(upload)}/s</div>
4649
<FaCircleArrowUp className="h-[24px] leading-[24px]" />
@@ -53,7 +56,9 @@ const ConnCard: React.FC = () => {
5356
</div>
5457
</CardBody>
5558
<CardFooter className="pt-1">
56-
<h3 className="select-none text-md font-bold">连接</h3>
59+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
60+
连接
61+
</h3>
5762
</CardFooter>
5863
</Card>
5964
)

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,17 @@ const LogCard: React.FC = () => {
2020
variant="flat"
2121
color="default"
2222
>
23-
<IoJournal color="default" className="text-[20px]" />
23+
<IoJournal
24+
color="default"
25+
className={`${match ? 'text-white' : 'text-foreground'} text-[20px] font-bold`}
26+
/>
2427
</Button>
2528
</div>
2629
</CardBody>
2730
<CardFooter className="pt-1">
28-
<h3 className="select-none text-md font-bold">日志</h3>
31+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
32+
日志
33+
</h3>
2934
</CardFooter>
3035
</Card>
3136
)

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ const MihomoCoreCard: React.FC = () => {
3939
>
4040
<CardBody>
4141
<div className="flex justify-between h-[32px]">
42-
<h3 className="select-none text-md font-bold leading-[32px]">
42+
<h3
43+
className={`select-none text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
44+
>
4345
{version?.version ?? '-'}
4446
</h3>
4547

@@ -52,14 +54,16 @@ const MihomoCoreCard: React.FC = () => {
5254
restartCore()
5355
}}
5456
>
55-
<IoMdRefresh color="default" className="text-[24px]" />
57+
<IoMdRefresh className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`} />
5658
</Button>
5759
</div>
5860
</CardBody>
5961
<CardFooter className="pt-1">
60-
<div className="flex justify-between w-full">
61-
<h4 className="select-none text-md font-bold">内核设置</h4>
62-
<h4 className="select-none text-md">{calcTraffic(mem)}</h4>
62+
<div
63+
className={`flex justify-between w-full select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
64+
>
65+
<h4>内核设置</h4>
66+
<h4>{calcTraffic(mem)}</h4>
6367
</div>
6468
</CardFooter>
6569
</Card>

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ const OverrideCard: React.FC = () => {
2424
variant="flat"
2525
color="default"
2626
>
27-
<MdFormatOverline color="default" className="text-[24px]" />
27+
<MdFormatOverline
28+
color="default"
29+
className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
30+
/>
2831
</Button>
2932
<BorderSwitch
3033
isShowBorder={match && enable}
@@ -34,7 +37,9 @@ const OverrideCard: React.FC = () => {
3437
</div>
3538
</CardBody>
3639
<CardFooter className="pt-1">
37-
<h3 className="select-none text-md font-bold">覆写</h3>
40+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
41+
覆写
42+
</h3>
3843
</CardFooter>
3944
</Card>
4045
)

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ const ProfileCard: React.FC = () => {
3737
>
3838
<CardBody className="pb-1">
3939
<div className="flex justify-between h-[32px]">
40-
<h3 className="select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px]">
40+
<h3
41+
className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
42+
>
4143
{info?.name}
4244
</h3>
4345
<Button
@@ -54,12 +56,11 @@ const ProfileCard: React.FC = () => {
5456
}}
5557
>
5658
<IoMdRefresh
57-
color="default"
58-
className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
59+
className={`text-[24px] ${match ? 'text-white' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
5960
/>
6061
</Button>
6162
</div>
62-
<div className="mt-2 flex justify-between">
63+
<div className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'} `}>
6364
<small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
6465
<small>{dayjs(info.updated).fromNow()}</small>
6566
</div>
@@ -68,7 +69,7 @@ const ProfileCard: React.FC = () => {
6869
{extra && (
6970
<Progress
7071
className="w-full"
71-
classNames={{ indicator: 'bg-foreground', label: 'select-none' }}
72+
classNames={{ indicator: match ? 'bg-white' : 'bg-foreground', label: 'select-none' }}
7273
value={calcPercent(extra?.upload, extra?.download, extra?.total)}
7374
/>
7475
)}

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,16 @@ const ProxyCard: React.FC = () => {
2424
variant="flat"
2525
color="default"
2626
>
27-
<SiNginxproxymanager color="default" className="text-[20px]" />
27+
<SiNginxproxymanager
28+
className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
29+
/>
2830
</Button>
2931
<Chip
3032
classNames={
3133
match
3234
? {
33-
base: 'border-foreground',
34-
content: 'text-foreground'
35+
base: 'border-white',
36+
content: 'text-white'
3537
}
3638
: {
3739
base: 'border-primary',
@@ -47,7 +49,9 @@ const ProxyCard: React.FC = () => {
4749
</div>
4850
</CardBody>
4951
<CardFooter className="pt-1">
50-
<h3 className="select-none text-md font-bold">代理组</h3>
52+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
53+
代理组
54+
</h3>
5155
</CardFooter>
5256
</Card>
5357
)

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

+9-4
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,17 @@ const RuleCard: React.FC = () => {
2626
variant="flat"
2727
color="default"
2828
>
29-
<IoGitNetwork color="default" className="text-[20px]" />
29+
<IoGitNetwork
30+
color="default"
31+
className={`${match ? 'text-white' : 'text-foreground'} text-[20px]`}
32+
/>
3033
</Button>
3134
<Chip
3235
classNames={
3336
match
3437
? {
35-
base: 'border-foreground',
36-
content: 'text-foreground'
38+
base: 'border-white',
39+
content: 'text-white'
3740
}
3841
: {
3942
base: 'border-primary',
@@ -49,7 +52,9 @@ const RuleCard: React.FC = () => {
4952
</div>
5053
</CardBody>
5154
<CardFooter className="pt-1">
52-
<h3 className="select-none text-md font-bold">规则</h3>
55+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
56+
规则
57+
</h3>
5358
</CardFooter>
5459
</Card>
5560
)

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ const SysproxySwitcher: React.FC = () => {
3737
variant="flat"
3838
color="default"
3939
>
40-
<AiOutlineGlobal color="default" className="text-[24px]" />
40+
<AiOutlineGlobal
41+
className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
42+
/>
4143
</Button>
4244
<BorderSwitch
4345
isShowBorder={match && enable}
@@ -47,7 +49,9 @@ const SysproxySwitcher: React.FC = () => {
4749
</div>
4850
</CardBody>
4951
<CardFooter className="pt-1">
50-
<h3 className="select-none text-md font-bold">系统代理</h3>
52+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
53+
系统代理
54+
</h3>
5155
</CardFooter>
5256
</Card>
5357
)

‎src/renderer/src/components/sider/test-card.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,17 @@ const TestCard: React.FC = () => {
2222
variant="flat"
2323
color="default"
2424
>
25-
<TbWorldCheck color="default" className="text-[20px]" />
25+
<TbWorldCheck
26+
color="default"
27+
className={`${match ? 'text-white' : 'text-foreground'} text-[20px] font-bold`}
28+
/>
2629
</Button>
2730
</div>
2831
</CardBody>
2932
<CardFooter className="pt-1">
30-
<h3 className="select-none text-md font-bold">测试</h3>
33+
<h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
34+
测试
35+
</h3>
3136
</CardFooter>
3237
</Card>
3338
)

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ const TunSwitcher: React.FC = () => {
6060
variant="flat"
6161
color="default"
6262
>
63-
<TbDeviceIpadHorizontalBolt color="default" className="text-[24px] font-bold" />
63+
<TbDeviceIpadHorizontalBolt
64+
className={`${match ? 'text-white' : 'text-foreground'} text-[24px] font-bold`}
65+
/>
6466
</Button>
6567
<BorderSwitch
6668
isShowBorder={match && enable}
@@ -70,7 +72,11 @@ const TunSwitcher: React.FC = () => {
7072
</div>
7173
</CardBody>
7274
<CardFooter className="pt-1">
73-
<h3 className="select-none text-md font-bold">虚拟网卡</h3>
75+
<h3
76+
className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
77+
>
78+
虚拟网卡
79+
</h3>
7480
</CardFooter>
7581
</Card>
7682
</>

‎tailwind.config.js

+1-22
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,5 @@ module.exports = {
1010
extend: {}
1111
},
1212
darkMode: 'class',
13-
plugins: [
14-
nextui({
15-
themes: {
16-
dark: {
17-
colors: {
18-
primary: {
19-
DEFAULT: '#006FEE',
20-
foreground: '#FFFFFF'
21-
}
22-
}
23-
},
24-
light: {
25-
colors: {
26-
primary: {
27-
DEFAULT: '#41C3F8',
28-
foreground: '#000000'
29-
}
30-
}
31-
}
32-
}
33-
})
34-
]
13+
plugins: [nextui()]
3514
}

0 commit comments

Comments
 (0)