dark mode

This commit is contained in:
TwperBody
2025-08-10 22:17:06 +08:00
parent eb7b5dcc25
commit 2aef139577
35 changed files with 450 additions and 113 deletions

View File

@@ -6,12 +6,22 @@
box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
padding: 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
}
.cardContainer:hover {
box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
}
.iconBasicInfoContainer {
width: 100%;
height: 100%;
@@ -39,6 +49,11 @@
.basicInfoText {
font-size: 1.4rem;
font-weight: bold;
color: #1a1a1a;
}
:global(.dark) .basicInfoText {
color: #f0f0f0;
}
.providerContainer {
@@ -56,12 +71,20 @@
color: #626262;
}
:global(.dark) .providerIcon {
color: #a0a0a0;
}
.providerLabel {
font-size: 1.2rem;
font-weight: 600;
color: #626262;
}
:global(.dark) .providerLabel {
color: #a0a0a0;
}
.baseURLContainer {
display: flex;
flex-direction: row;
@@ -77,6 +100,10 @@
color: #626262;
}
:global(.dark) .baseURLIcon {
color: #a0a0a0;
}
.baseURLText {
font-size: 1rem;
width: 100%;
@@ -87,6 +114,10 @@
max-width: 100%;
}
:global(.dark) .baseURLText {
color: #a0a0a0;
}
.bigText {
white-space: nowrap;
overflow: hidden;

View File

@@ -404,7 +404,7 @@ export default function EmbeddingForm({
}}
value={field.value}
>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('models.selectModelProvider')}
/>
@@ -479,7 +479,7 @@ export default function EmbeddingForm({
updateExtraArg(index, 'type', value)
}
>
<SelectTrigger className="w-[120px]">
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('models.type')} />
</SelectTrigger>
<SelectContent>

View File

@@ -6,12 +6,22 @@
box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
padding: 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
}
.cardContainer:hover {
box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
}
.iconBasicInfoContainer {
width: 100%;
height: 100%;
@@ -40,6 +50,11 @@
.basicInfoText {
font-size: 1.4rem;
font-weight: bold;
color: #1a1a1a;
}
:global(.dark) .basicInfoText {
color: #f0f0f0;
}
.providerContainer {
@@ -57,12 +72,20 @@
color: #626262;
}
:global(.dark) .providerIcon {
color: #a0a0a0;
}
.providerLabel {
font-size: 1.2rem;
font-weight: 600;
color: #626262;
}
:global(.dark) .providerLabel {
color: #a0a0a0;
}
.baseURLContainer {
display: flex;
flex-direction: row;
@@ -78,6 +101,10 @@
color: #626262;
}
:global(.dark) .baseURLIcon {
color: #a0a0a0;
}
.baseURLText {
font-size: 1rem;
width: 100%;
@@ -88,6 +115,10 @@
max-width: 100%;
}
:global(.dark) .baseURLText {
color: #a0a0a0;
}
.abilitiesContainer {
display: flex;
flex-direction: row;
@@ -108,18 +139,30 @@
background-color: #66baff80;
}
:global(.dark) .abilityBadge {
background-color: rgba(34, 136, 238, 0.3);
}
.abilityIcon {
width: 1rem;
height: 1rem;
color: #2288ee;
}
:global(.dark) .abilityIcon {
color: #66baff;
}
.abilityLabel {
font-size: 0.8rem;
font-weight: 400;
color: #2288ee;
}
:global(.dark) .abilityLabel {
color: #66baff;
}
.bigText {
white-space: nowrap;
overflow: hidden;

View File

@@ -420,7 +420,7 @@ export default function LLMForm({
}}
value={field.value}
>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('models.selectModelProvider')}
/>
@@ -553,7 +553,7 @@ export default function LLMForm({
updateExtraArg(index, 'type', value)
}
>
<SelectTrigger className="w-[120px]">
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('models.type')} />
</SelectTrigger>
<SelectContent>

View File

@@ -192,7 +192,7 @@ export default function LLMConfigPage() {
<Tabs defaultValue="llm" className="w-full">
<div className="flex flex-row gap-0 mb-4">
<div className="flex flex-row justify-between items-center px-[0.8rem]">
<TabsList className="shadow-md py-5 bg-[#f0f0f0]">
<TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<TabsTrigger value="llm" className="px-6 py-4 cursor-pointer">
{t('llm.llmModels')}
</TabsTrigger>
@@ -206,12 +206,12 @@ export default function LLMConfigPage() {
</div>
<TabsContent value="llm">
<div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
<p className="text-sm text-gray-500">{t('llm.description')}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">{t('llm.description')}</p>
</div>
</TabsContent>
<TabsContent value="embedding">
<div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
<p className="text-sm text-gray-500">
<p className="text-sm text-gray-500 dark:text-gray-400">
{t('embedding.description')}
</p>
</div>