玩转vue项目换肤：一步切换，主题随心变！

2023-07-18 04:52:23

打破沉闷：用个性点亮你的 Vue 项目

还在为 Vue 项目单调乏味的 UI 而烦恼吗？还在为繁琐的主题切换而抓狂吗？今天，我们将揭秘 Vue 项目一键换肤的终极奥义，让你轻松实现主题随心变，让你的项目瞬间焕发新生！

准备工作：创建公共 CSS 变量文件

首先，创建一个名为 theme.js 的 CSS 变量文件，放置在项目根目录下。在这个文件中，存放需要定义的 CSS 变量，例如：

// theme.js
export const primaryColor = '#409EFF';
export const secondaryColor = '#67C23A';
export const backgroundColor = '#F5F5F5';

安装 CSS-vars-ponyfill 插件

为了让 CSS 变量在项目中生效，我们需要安装 CSS-vars-ponyfill 插件。此插件可以帮助浏览器解析 CSS 变量，实现主题切换。具体安装方法如下：

npm install --save css-vars-ponyfill

在 main.js 中引入 CSS-vars-ponyfill 插件：

// main.js
import 'css-vars-ponyfill';

封装切换主题的 JS

接下来，封装一个切换主题的 JS 文件，以便在项目中调用。此文件名为 theme.js，同样放置在项目根目录下。在 theme.js 中，实现根据不同主题设置不同样式的功能。代码如下：

// theme.js
export function setTheme(theme) {
  document.documentElement.classList.remove('theme-light');
  document.documentElement.classList.remove('theme-dark');
  document.documentElement.classList.add('theme-' + theme);
}

在组件中使用 CSS 变量

在组件中，使用 CSS 变量设置样式。例如，在 App.vue 中，我们可以这样使用 CSS 变量：

<template>
  <div :style="{ backgroundColor: backgroundColor }">
    ...
  </div>
</template>

<script>
import { primaryColor, secondaryColor, backgroundColor } from './theme.js';

export default {
  data() {
    return {
      primaryColor,
      secondaryColor,
      backgroundColor,
    };
  },
};
</script>

页面中使用主题切换按钮

最后，在页面中添加一个主题切换按钮，让用户随时切换主题。可以使用 <button> 标签实现此功能，例如：

<template>
  <button @click="toggleTheme">切换主题</button>
</template>

<script>
import { setTheme } from './theme.js';

export default {
  methods: {
    toggleTheme() {
      const theme = document.documentElement.classList.contains('theme-light') ? 'dark' : 'light';
      setTheme(theme);
    },
  },
};
</script>