55f2e020b5
* Add dark/light theme toggle feature * update: refine dark/light theme and related components * 调整语义化主题变量，优化暗/亮模式切换效果 * Revert "调整语义化主题变量，优化暗/亮模式切换效果" This reverts commit 85d9373297686fdbacb252a880b2847d20a39641. * 深色模式适配：减少 !important，迁移 CSS 变量，优化布局 * style: 替换硬编码颜色值为CSS变量以支持主题切换 将多处硬编码的颜色值（如#fff、#f0f0f0等）替换为CSS变量（如--gray-0、--gray-150等），统一管理颜色样式，便于主题切换和样式维护。主要修改包括背景色、边框色、文字色等视觉元素，同时移除不再需要的深色模式适配代码。 * style: 使用CSS变量替换硬编码颜色值 * refactor(theme): 重构主题系统，统一使用CSS变量并优化暗色模式实现 - 移除冗余的theme.js配置文件，将主题配置集中到theme store - 使用ant-design-vue的darkAlgorithm实现暗色模式 - 在多个组件中替换硬编码颜色值为CSS变量 - 优化用户信息组件，整合文档中心和主题切换功能 - 更新基础CSS样式，完善颜色系统和滚动条样式 * reset: 恢复被覆盖的修改（96d257a7ace38c94e2b113d56472d211d1141087） * feat(theme): 实现深色主题支持并重构样式系统 重构颜色变量系统，添加深色主题支持 移除硬编码颜色值，统一使用CSS变量 优化图表组件以响应主题切换 清理无用样式代码，提升可维护性 * docs: 更新开发规范文档 * style: 调整边框和背景颜色样式 --------- Co-authored-by: Wenjie Zhang <xerrors@163.com>
34 lines
751 B
Vue
34 lines
751 B
Vue
<template>
|
|
<a-tooltip :title="themeStore.isDark ? '切换到浅色模式' : '切换到深色模式'">
|
|
<a-button
|
|
type="text"
|
|
@click="themeStore.toggleTheme"
|
|
class="theme-toggle-btn"
|
|
>
|
|
<template #icon>
|
|
<component :is="themeStore.isDark ? SunIcon : MoonIcon" :size="18" />
|
|
</template>
|
|
</a-button>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useThemeStore } from '@/stores/theme'
|
|
import { Sun as SunIcon, Moon as MoonIcon } from 'lucide-vue-next'
|
|
|
|
const themeStore = useThemeStore()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.theme-toggle-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle-btn:hover {
|
|
transform: rotate(20deg);
|
|
}
|
|
</style>
|