SakurasanandClaude
a422034b2b
- 引入语义化 CSS 变量令牌(bg/surface/edge/ink/muted/accent 等), data-theme 三态切换 - theme store(localStorage + 系统偏好跟随), 首屏内联脚本防主题闪烁 - ThemeToggle 组件(浅色/深色/跟随系统) 置于导航与控制台顶栏 - 全量替换硬编码 zinc/emerald/red 类为令牌, 图表基线/状态色随主题适配 - 浅色对比度校准(accent/err/warn 深浅各一套) Co-Authored-By: Claude <noreply@anthropic.com>
33 lines
871 B
Vue
33 lines
871 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { PhSun, PhMoon, PhMonitor } from '@phosphor-icons/vue'
|
|
import { useThemeStore } from '@/stores/theme'
|
|
|
|
const theme = useThemeStore()
|
|
const icon = computed(() => {
|
|
switch (theme.resolved) {
|
|
case 'light':
|
|
return PhSun
|
|
case 'dark':
|
|
return PhMoon
|
|
default:
|
|
return PhMonitor
|
|
}
|
|
})
|
|
const label = computed(() => {
|
|
const names = { light: '浅色', dark: '深色', system: '跟随系统' }
|
|
return names[theme.mode]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-muted transition hover:bg-surface2 hover:text-ink"
|
|
:title="`主题：${label}，点击切换`"
|
|
:aria-label="`主题：${label}，点击切换`"
|
|
@click="theme.cycle()"
|
|
>
|
|
<component :is="icon" :size="15" weight="bold" />
|
|
</button>
|
|
</template>
|