duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance dark mode support across various components

Browse Source 
- Updated styles in AccountSetting, SystemConfig, Version, and other components to improve dark mode visibility.
- Added dark mode classes for text and background colors to ensure better contrast and readability.
- Modified CSS variables in dark.css for consistent theming.
- Improved accessibility by ensuring all text elements are legible in dark mode.
This commit is contained in:
duanshuwen
2026-04-15 21:17:08 +08:00
parent 43801ba51b
commit 364db041eb
62 changed files with 650 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/skills/components/SkillDetailDrawer.vue
View File

@@ -7,37 +7,37 @@
:with-header="false"
class="skill-detail-drawer"
>
<div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9]">
<div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9] dark:bg-[#1b1b1d]">
<div class="flex-1 overflow-y-auto px-8 py-10">
<div class="flex flex-col items-center mb-8">
<div class="w-16 h-16 flex items-center justify-center rounded-full bg-white border border-black/5 shrink-0 mb-4 relative shadow-sm">
<div class="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#222225] border border-black/5 dark:border-gray-700 shrink-0 mb-4 relative shadow-sm">
<span class="text-3xl">{{ skill.icon || '🔧' }}</span>
<div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] rounded-full p-1 shadow-sm border border-black/5">
<RiLockLine class="h-3 w-3 text-[#525866] shrink-0" />
<div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1b1b1d] rounded-full p-1 shadow-sm border border-black/5 dark:border-gray-700">
<RiLockLine class="h-3 w-3 text-[#525866] dark:text-gray-400 shrink-0" />
</div>
</div>
<h2 class="text-[28px] font-serif text-[#171717] font-normal mb-3 text-center tracking-tight">
<h2 class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal mb-3 text-center tracking-tight">
{{ skill.name }}
</h2>
<div class="flex items-center justify-center gap-2.5 mb-6 opacity-80">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
v{{ skill.version || '1.0.0' }}
</el-tag>
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
{{ skill.isCore ? t('skills.detail.coreSystem') : skill.isBundled ? t('skills.detail.bundled') : t('skills.detail.userInstalled') }}
</el-tag>
</div>
<p v-if="skill.description" class="text-[14px] text-[#171717]/70 font-medium leading-[1.6] text-center px-4">
<p v-if="skill.description" class="text-[14px] text-[#171717]/70 dark:text-gray-400 font-medium leading-[1.6] text-center px-4">
{{ skill.description }}
</p>
</div>
<div class="space-y-7 px-1">
<div class="space-y-2">
<h3 class="text-[13px] font-bold text-[#171717]/80">{{ t('skills.detail.source') }}</h3>
<h3 class="text-[13px] font-bold text-[#171717]/80 dark:text-gray-300">{{ t('skills.detail.source') }}</h3>
<div class="flex items-center gap-2 flex-wrap">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
{{ resolvedSource }}
</el-tag>
</div>
@@ -45,7 +45,7 @@
<el-input
:model-value="skill.baseDir || t('skills.detail.pathUnavailable')"
readonly
class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] border-black/10 rounded-xl text-[#171717]/70"
class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] dark:bg-[#222225] border-black/10 dark:border-gray-700 rounded-xl text-[#171717]/70 dark:text-gray-300"
/>
<el-button
class="!h-[38px] !w-[38px] !px-0"
@@ -67,7 +67,7 @@
</div>
<div v-if="!skill.isCore" class="space-y-2">
<h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80">
<h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80 dark:text-gray-300">
<RiKeyLine class="h-3.5 w-3.5 text-blue-500" />
{{ t('skills.detail.apiKey') }}
</h3>
@@ -78,7 +78,7 @@
show-password
class="!h-[44px]"
/>
<p class="text-[12px] text-[#171717]/50 mt-2 font-medium">
<p class="text-[12px] text-[#171717]/50 dark:text-gray-500 mt-2 font-medium">
{{ t('skills.detail.apiKeyDesc', 'The primary API key for this skill.') }}
</p>
</div>
@@ -86,11 +86,11 @@
<EnvVarManager v-if="!skill.isCore" v-model="envVars" />
<div v-if="skill.slug && !skill.isBundled && !skill.isCore" class="flex gap-2 justify-center pt-8">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenClawhub">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenClawhub">
<RiGlobalLine class="h-3 w-3" />
ClawHub
</el-button>
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenEditor">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenEditor">
<RiFileCodeLine class="h-3 w-3" />
{{ t('skills.detail.openManual') }}
</el-button>
@@ -110,7 +110,7 @@
<el-button
v-if="!skill.isCore"
class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 hover:!bg-black/5"
class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 dark:!border-gray-700 hover:!bg-black/5 dark:hover:!bg-white/5"
@click="handleSecondaryAction"
>
{{ secondaryLabel }}