秒学会！uni-app动态修改主题色，告别重复代码的烦恼！

前端

2023-10-02 10:13:10

uni-app：轻松实现动态修改主题色

痛点：频繁更改色彩体系的烦恼

作为前端开发人员，在uni-app项目中，经常会遇到这样的烦恼：当项目初版完成不久，甲方突然提出要更改整个项目的色彩体系。以往，修改色彩体系需要修改uni.scss文件，替换页面上对应的CSS，不仅代码量巨大，后期维护也十分麻烦。

优雅解决方案：动态修改主题色的秘诀

今天，我们将分享一个更简单、更优雅的方法，让你在uni-app中轻松实现动态修改主题色。

1. 定义基础样式

在uni.scss文件中，定义一些基础的样式，如主色调、次色调、背景色和字体颜色等。

// 基础颜色
$primary-color: #007aff;
$secondary-color: #666666;
$background-color: #ffffff;

// 字体颜色
$font-color: #333333;

2. 使用 @import 动态引入主题色文件

在需要修改主题色的页面中，引入uni.scss文件，然后使用 @import 语句导入一个新的scss文件，定义不同的主题色。

@import "@/styles/theme.scss";

3. 定义主题色样式

在theme.scss文件中，定义不同的主题色样式，如浅色主题和深色主题。

// 浅色主题
.light-theme {
  $primary-color: #007aff;
  $secondary-color: #666666;
  $background-color: #ffffff;
  $font-color: #333333;
}

// 深色主题
.dark-theme {
  $primary-color: #333333;
  $secondary-color: #666666;
  $background-color: #000000;
  $font-color: #ffffff;
}

4. 使用 JavaScript 切换主题

通过使用 JavaScript，我们可以通过改变 @import 语句引入的scss文件，来实现动态修改主题色。

// 在需要修改主题色的页面中
import { ref } from 'vue';

// 定义一个主题变量
const theme = ref('light-theme');

// 监听主题变量的变化，并修改样式
watch(theme, (newTheme) => {
  document.body.classList.remove(oldTheme);
  document.body.classList.add(newTheme);
});