【vue3主题切换】

vue3主题切换

目录结构

bash 复制代码
src/
├── store/
│   └── theme.ts            # Pinia 管理主题
├── styles/
│   └── theme.scss          # CSS变量样式
├── App.vue
├── main.ts

CSS 变量配置(src/styles/theme.scss)

复制代码
:root,
[data-theme='light'] {
    --el-bg-color: #ffffff;
    --el-text-color-primary: #303133;
    --layout-bg-color: #f3f3f4;
}

[data-theme='dark'] {
    --el-bg-color: #1e1e1e;
    --el-text-color-primary: #e5eaf3;
    --layout-bg-color: #121212;
}

Pinia 主题 store(src/store/theme.ts)

ts 复制代码
import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
    state: () => ({
        mode: 'light' as 'light' | 'dark',
        primary: '#1C84C6'
    }),
    actions: {
        loadTheme() {
            // 从 localStorage 获取保存的模式,如果没有则使用默认值 'light'
            // 使用类型断言确保值只能是 'light' 或 'dark'
            const m = localStorage.getItem('mode') as 'light' | 'dark' || 'light'
            // 从 localStorage 获取保存的主色调,如果没有则使用默认值 '#1C84C6'
            const p = localStorage.getItem('primary') || '#1C84C6'

            // 更新存储库的状态
            this.mode = m
            this.primary = p
            document.documentElement.setAttribute('data-theme', m)
            document.documentElement.style.setProperty('--el-color-primary', p)
        },
        setMode(mode: 'light' | 'dark') {
            this.mode = mode
            document.documentElement.setAttribute('data-theme', mode)
            localStorage.setItem('mode', mode)
        },
        setPrimary(color: string) {
            this.primary = color
            document.documentElement.style.setProperty('--el-color-primary', color)
            localStorage.setItem('primary', color)
        }
    }
})

入口文件(src/main.ts)

ts 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import pinia from '@/store'
import '@/styles/theme.scss'

const app = createApp(App)
app.use(pinia)

import { useThemeStore } from './store/theme'
const ts = useThemeStore()
ts.loadTheme()

app.mount('#app')

主题抽屉组件

ts 复制代码
<!-- 主题抽屉 -->
    <el-drawer v-model="drawer" title="主题设置" size="20%">
      <el-form>
        <el-form-item label="主题颜色">
          <el-color-picker @change="onColorChange" v-model="color" show-alpha
        /></el-form-item>
        <el-form-item label="暗黑模式">
          <el-switch v-model="isDark" @change="onModeChange"
        /></el-form-item>
      </el-form>
    </el-drawer>

import { useThemeStore } from "@/store/modules/theme";
const themeStore = useThemeStore();

const color = computed({
  get: () => themeStore.primary,
  set: (val: string) => themeStore.setPrimary(val),
});

// 暗黑模式绑定
const isDark = computed({
  get: () => themeStore.mode === "dark",
  set: (val: boolean) => {
    const mode = val ? "dark" : "light";
    themeStore.setMode(mode);
  },
});

// 可选,也可以直接在 computed set 内处理
function onColorChange(color: string) {
  themeStore.setPrimary(color);
}
function onModeChange(val: boolean) {
  themeStore.setMode(val ? "dark" : "light");
}

全局样式引用变量

ts 复制代码
<style scoped>
.page {
  background-color: var(--layout-bg-color);
  color: var(--el-text-color-primary);
}
</style>
相关推荐
PBitW8 小时前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊11 小时前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊18 小时前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy2 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
獨孤殤2 天前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue
BYSJMG2 天前
基于Python毕业设计推荐:基于Django的全国降水分析可视化系统
hadoop·python·django·vue·毕业设计·课程设计·毕设
zkkkkkkkkkkkkk2 天前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue
她似晚风般温柔7893 天前
SpringBoot3 + Netty + Vue3 实现消息推送(最新)
java·websocket·spring·vue·netty
瓯雅爱分享3 天前
Java搭建高效后端,Vue打造友好前端,联合构建电子采购管理系统,实现采购流程电子化、自动化,涵盖采购全周期管理,功能完备,附详细可运行源码
java·mysql·vue·软件工程·源代码管理
williamdsy3 天前
【Element-Plus】媒体预览模态框优化实战:从复杂到简洁的设计之路
vue·媒体·element-plus