Vue3 实现多主题切换

文章介绍了如何使用CSS变量和Vue.js来实现一个多主题切换的功能。首先，在CSS文件中定义了根元素的样式变量，包括背景色、文本色和主题色，并为不同的主题（亮色、暗色、蓝色）设置了不同的颜色值。接着，通过Vue组件中的按钮点击事件来切换主题，使用`document.documentElement.setAttribute`来改变根元素的`data-theme`属性，从而应用不同的主题样式。同时，使用`localStorage`来持久化用户的主题选择。最后，通过CSS变量应用到组件的样式中，实现主题的动态切换。评价：文章提供了一个实用的多主题切换实现方案，通过CSS变量和Vue.js的结合，使得主题切换变得简单而高效。代码示例清晰，易于理解和应用，对于需要实现主题切换功能的开发者来说是一个不错的参考。

结果由AI生成

利用 :root { --color-primary: ... } 定义主题变量

在切换时修改 document.documentElement.style.setProperty()

定义主题变量

/* theme.css */
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-primary: #42b883;
}

html[data-theme='dark'] {
  --color-bg: #121212;
  --color-text: #ffffff;
  --color-primary: #ff9800;
}

html[data-theme='blue'] {
  --color-bg: #e3f2fd;
  --color-text: #0d47a1;
  --color-primary: #2196f3;
}

组件中切换主题

<template>
  <div class="app">
    <h1>多主题切换示例</h1>
    <button @click="setTheme('light')">亮色模式</button>
    <button @click="setTheme('dark')">暗色模式</button>
    <button @click="setTheme('blue')">蓝色主题</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

const theme = ref(localStorage.getItem("theme") || "light")

const setTheme = (t) => {
  theme.value = t
  document.documentElement.setAttribute("data-theme", t)
  localStorage.setItem("theme", t)
}

onMounted(() => {
  document.documentElement.setAttribute("data-theme", theme.value)
})
</script>

<style>
.app {
  background-color: var(--color-bg);
  color: var(--color-text);
}
button {
  background: var(--color-primary);
  color: var(--color-text);
  margin: 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
}
</style>

结果由AI生成

定义主题变量

组件中切换主题

宝剑锋从磨砺出，梅花香自苦寒来。