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

4
src/components/Layout/TitleBar/index.vue
View File

@@ -49,11 +49,11 @@ const platform = (window as any).api?.platform ?? ''
const maximized = ref(false)
const iconColorClass = computed(() =>
props.variant === 'light' ? 'text-white' : 'text-[#525866]'
props.variant === 'light' ? 'text-white' : 'text-[#525866] dark:text-gray-300'
)
const borderColorClass = computed(() =>
props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300'
props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300 dark:border-gray-700'
)
onMounted(async () => {

6
src/components/Layout/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="bg-color h-screen flex flex-col">
<div class="bg-color dark:bg-[#0f0f10]! h-screen flex flex-col">
<title-bar v-if="platform !== 'linux'" />
<main
@@ -23,7 +23,5 @@ const platform = computed(() => (window as any).api?.platform ?? '')
</script>
<style scoped>
.bg-color {
background: linear-gradient(180deg, #EFF6FF 0%, #F5F7FA 40%);
}
</style>

2
src/components/SideMenus/index.vue
View File

@@ -3,7 +3,7 @@
<div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.url === '/setting' }]"
v-for="(item) in menus" :key="item.id">
<div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
<div :class="['box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white', { 'bg-white': item.id === currentId }]">
<div :class="['box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]', { 'bg-white dark:bg-[#222225]': item.id === currentId }]">
<component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
:class="['w-[32px] h-[32px]]']" />
</div>

8
src/components/TaskList/Card.vue
View File

@@ -8,13 +8,13 @@
-->
<template>
<div v-for="item in task" :key="item.id"
class="border border-solid border-[#E5E8EE] rounded-[12px] p-[12px] mb-[12px] task">
<div class="flex items-center pb-[12px]" style="border-bottom: 1px dashed #E5E8EE;">
class="border border-solid border-[#E5E8EE] dark:border-[#2a2a2d] rounded-[12px] p-[12px] mb-[12px] task dark:bg-[#1f1f22]">
<div class="flex items-center pb-[12px] border-b border-dashed border-[#E5E8EE] dark:border-[#2a2a2d]">
<!-- <img class="w-[24px] h-[24px] rounded-[8px]] mr-[4px]" src="@assets/images/task/xc.png" /> -->
<div
class="w-[24px] h-[24px] rounded-[4px] bg-[#EFF6FF] text-[#2B7FFF] text-[14px] font-bold border border-solid border-[#BEDBFF] flex justify-center items-center">
class="w-[24px] h-[24px] rounded-[4px] bg-[#EFF6FF] dark:bg-[#1f1f22] text-[#2B7FFF] text-[14px] font-bold border border-solid border-[#BEDBFF] dark:border-[#2a2a2d] flex justify-center items-center">
{{ item.name[0] }}</div>
<div class="text-[16px] text-[#171717] font-bold mr-[8px] ml-[4px]">{{ item.name }}</div>
<div class="text-[16px] text-[#171717] dark:text-gray-100 font-bold mr-[8px] ml-[4px]">{{ item.name }}</div>
<div class="pl-[8px] pr-[8px] text-[12px] rounded-[100px]" :class="item.statusColor">{{
item.statusText }}</div>
</div>

21
src/components/TaskList/List.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="task p-[12px]">
<div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
<div class="flex border border-[#BEDBFF] dark:border-[#2a2a2d] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] dark:bg-[#1f1f22] task-tab">
<div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
<div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
</div>
</div>
<div class="flex justify-between mt-[12px] mb-[12px] text-[14px]">
<div class="text-[#171717]">今天</div>
<div class="text-[#99A0AE]">02:32:05</div>
<div class="text-[#171717] dark:text-gray-100">今天</div>
<div class="text-[#99A0AE] dark:text-gray-500">02:32:05</div>
</div>
<div>
<TaskCard />
@@ -40,12 +40,23 @@ const changeTab = (val:number) => {
font-size: 14px;
cursor: pointer;
}
:global(.dark) .task-tab .text {
color: #9ca3af;
}
.task-tab .active {
position: relative;
color: #2B7FFF;
background: #FFFFFF;
border-radius: 8px;
}
:global(.dark) .task-tab .active {
color: #2B7FFF;
background: #1f1f22;
}
.task-tab .active::after {
position: absolute;
left: 0;
@@ -56,4 +67,8 @@ const changeTab = (val:number) => {
border-radius: 8px;
border: 1px solid #2B7FFF;
}
:global(.dark) .task-tab .active::after {
border: 1px solid #2B7FFF;
}
</style>

15
src/components/TaskList/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="task-list w-[392px] h-full rounded-[16px] bg-white">
<div class="task-list w-[392px] h-full rounded-[16px] bg-white dark:bg-[#1b1b1d]">
<slot>
<TaskList />
</slot>
@@ -31,6 +31,10 @@ const changeTab = (val: number) => {
cursor: pointer;
}
:global(.dark) .task-tab .text {
color: #9ca3af;
}
.task-tab .active {
position: relative;
color: #2B7FFF;
@@ -38,6 +42,11 @@ const changeTab = (val: number) => {
border-radius: 8px;
}
:global(.dark) .task-tab .active {
color: #2B7FFF;
background: #1f1f22;
}
.task-tab .active::after {
position: absolute;
left: 0;
@@ -48,4 +57,8 @@ const changeTab = (val: number) => {
border-radius: 8px;
border: 1px solid #2B7FFF;
}
:global(.dark) .task-tab .active::after {
border: 1px solid #2B7FFF;
}
</style>

8
src/components/TitleSection/index.vue
View File

@@ -7,17 +7,17 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="flex justify-between items-center box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
<div class="flex justify-between items-center box-border border-b-[1px] border-b-[#E5E8EE] dark:border-b-gray-700 mb-[20px] pb-[20px]">
<div class="flex">
<div class="flex items-center">
<el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer">
<el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer dark:!text-gray-400">
<ArrowLeftBold />
</el-icon>
<span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
<span class="text-[24px] font-500 text-[#171717] dark:text-gray-100 leading-[32px] mr-[8px]">
{{ title }}
</span>
</div>
<span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]" style="align-self: flex-end;">
<span class="text-[12px] font-400 text-[#99A0AE] dark:text-gray-500 leading-[16px]" style="align-self: flex-end;">
{{ desc }}
</span>
</div>