黄孟
b22fc82432
- 在 App.vue 中添加主题切换按钮和逻辑 - 新增 global.css 和 theme.css 文件，统一全局样式和主题样式 - 更新 LoginPage、RegisterPage 和 HomePage 的样式，适配新主题 - 实现暗黑模式下的样式调整
68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
|
||
|
||
<template>
|
||
<div id="app">
|
||
<router-view></router-view>
|
||
<div class="theme-switcher" @click="toggleTheme" :title="`切换到${theme === 'light' ? '深色' : '浅色'}主题`">
|
||
<span v-if="theme === 'light'">🌙</span>
|
||
<span v-else>☀️</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watchEffect } from 'vue';
|
||
|
||
const theme = ref('light');
|
||
|
||
const toggleTheme = () => {
|
||
theme.value = theme.value === 'light' ? 'dark' : 'light';
|
||
localStorage.setItem('theme', theme.value);
|
||
};
|
||
|
||
onMounted(() => {
|
||
const savedTheme = localStorage.getItem('theme');
|
||
if (savedTheme) {
|
||
theme.value = savedTheme;
|
||
} else {
|
||
// 如果没有保存的主题，则根据系统设置初始化
|
||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
theme.value = prefersDark ? 'dark' : 'light';
|
||
}
|
||
});
|
||
|
||
watchEffect(() => {
|
||
document.documentElement.className = theme.value === 'dark' ? 'dark-theme' : '';
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.theme-switcher {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background-color: var(--bg-color-secondary);
|
||
box-shadow: var(--box-shadow);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-size: 24px;
|
||
user-select: none;
|
||
transition: all var(--transition-duration) ease;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.theme-switcher:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: var(--box-shadow-dark);
|
||
}
|
||
|
||
.theme-switcher:active {
|
||
transform: scale(0.95);
|
||
}
|
||
</style>
|