orion
b60c003ec2
完善 2026 主题的移动端与桌面端交互体验，修复多项可访问性和信息展示问题。 - 允许浏览器缩放，补充焦点样式、按钮名称、表单标签和对话框键盘焦点管理\n- 支持 reduced-motion，扩大公共页、后台导航、记录列表和分页控件的触控区域\n- 优化系统设置分区导航、密码显示、字段语义和底部粘性保存栏\n- 压缩移动文件列表操作区，改善桌面表格滚动可达性和统计值截断\n- 优化仪表盘指标、趋势摘要、进度条语义及中英文文案
32 lines
1.0 KiB
Vue
32 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { inject } from 'vue'
|
|
import { SunIcon, MoonIcon } from 'lucide-vue-next'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const isDarkMode = inject('isDarkMode') as { value: boolean }
|
|
const toggleTheme = inject('toggleTheme') as () => void
|
|
const { t } = useI18n()
|
|
|
|
const toggleColorMode = () => {
|
|
toggleTheme()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
@click="toggleColorMode"
|
|
class="flex h-11 w-11 items-center justify-center rounded-full shadow-sm transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 motion-safe:hover:rotate-180"
|
|
:aria-label="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
|
|
:title="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
|
|
:class="
|
|
isDarkMode
|
|
? 'bg-[#263941] text-[#d8c98e]'
|
|
: 'bg-[#edf4f5] text-[#4f6c75]'
|
|
"
|
|
>
|
|
<SunIcon v-if="!isDarkMode" class="w-6 h-6" />
|
|
<MoonIcon v-else class="w-6 h-6" />
|
|
</button>
|
|
</template>
|