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

36
src/pages/skills/index.vue
View File

@@ -1,14 +1,14 @@
<template>
<layout>
<div class="bg-white box-border w-full h-full flex rounded-[16px] overflow-hidden">
<div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
<div class="w-full flex flex-col h-full p-10 pt-12">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
<div>
<h1 class="text-5xl md:text-6xl font-serif text-[#171717] mb-3 font-normal tracking-tight" style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif">
<h1 class="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight" style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif">
{{ t('skills.title') }}
</h1>
<p class="text-[17px] text-[#171717]/70 font-medium">
<p class="text-[17px] text-[#171717]/70 dark:text-gray-400 font-medium">
{{ t('skills.subtitle') }}
</p>
</div>
@@ -17,7 +17,7 @@
<button
v-if="hasInstalledSkills"
@click="handleOpenSkillsFolder"
class="hover:bg-black/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 flex items-center justify-center text-[#171717]/80 hover:text-[#171717]"
class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-gray-700 flex items-center justify-center text-[#171717]/80 dark:text-gray-300 hover:text-[#171717] dark:hover:text-[#f3f4f6]"
>
<RiFolderOpenLine class="h-4 w-4 mr-2" />
{{ t('skills.openFolder') }}
@@ -26,20 +26,20 @@
</div>
<!-- Sub Navigation and Actions -->
<div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 pb-4 mb-4 shrink-0 gap-4">
<div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 dark:border-gray-700 pb-4 mb-4 shrink-0 gap-4">
<div class="flex items-center flex-wrap gap-4 text-[14px]">
<div class="relative group flex items-center bg-black/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 transition-colors border border-transparent focus-within:border-black/10 mr-2">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
<div class="relative group flex items-center bg-black/5 dark:bg-[#222225] rounded-full px-3 py-1.5 focus-within:bg-black/10 dark:focus-within:bg-[#2a2a2d] transition-colors border border-transparent focus-within:border-black/10 dark:focus-within:border-gray-700 mr-2">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-500" />
<input
:placeholder="t('skills.search')"
v-model="searchQuery"
class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
/>
<button
v-if="searchQuery"
type="button"
@click="searchQuery = ''"
class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1"
class="text-[#171717]/50 dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] shrink-0 ml-1"
>
<RiCloseLine class="h-3.5 w-3.5" />
</button>
@@ -48,19 +48,19 @@
<div class="flex items-center gap-6">
<button
@click="selectedSource = 'all'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.all', { count: sourceStats.all }) }}
</button>
<button
@click="selectedSource = 'built-in'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.builtIn', { count: sourceStats.builtIn }) }}
</button>
<button
@click="selectedSource = 'marketplace'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.marketplace', { count: sourceStats.marketplace }) }}
</button>
@@ -71,28 +71,28 @@
<el-button
size="small"
@click="bulkToggleVisible(true)"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.enableVisible') }}
</el-button>
<el-button
size="small"
@click="bulkToggleVisible(false)"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.disableVisible') }}
</el-button>
<el-button
size="small"
@click="openMarketplace"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.installSkill') }}
</el-button>
<el-button
size="small"
@click="store.fetchSkills()"
class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 !bg-transparent hover:!bg-black/5 !text-[#525866] hover:!text-[#171717]"
class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5 !text-[#525866] dark:!text-gray-400 hover:!text-[#171717] dark:hover:!text-[#f3f4f6]"
:title="t('skills.refresh')"
>
<RiRefreshLine :class="['h-4 w-4', store.loading && 'animate-spin']" />
@@ -109,14 +109,14 @@
</span>
</div>
<div v-if="store.loading && store.skills.length === 0" class="flex flex-col items-center justify-center h-full text-[#525866]">
<div v-if="store.loading && store.skills.length === 0" class="flex flex-col items-center justify-center h-full text-[#525866] dark:text-gray-400">
<RiRefreshLine class="h-10 w-10 animate-spin mb-4" />
<p>{{ t('skills.marketplace.searching') }}</p>
</div>
<div v-else class="flex flex-col gap-1">
<template v-if="filteredSkills.length === 0">
<div class="flex flex-col items-center justify-center py-20 text-[#525866]">
<div class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
<RiPuzzleLine class="h-10 w-10 mb-4 opacity-50" />
<p>{{ searchQuery ? t('skills.noSkillsSearch') : t('skills.noSkillsAvailable') }}</p>
</div>