uniapp 微信小程序配置全局主题色、实现动态修改主题色_微信小程序 主题色切换

前言：

        本文的实现目标是全局配置小程序的整体主题色，包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色；第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片，关于svg图片颜色修改可以参考文章uniapp开发微信小程序——实现动态修改svg图标颜色。

一、统一配置

        1、uni.scss

        这里使用uni.scss文件来做全局的颜色配置。uniapp的编译器在webpack配置中对uni.scss做了特殊处理，使每个scss文件都被注入了uni.scss，达到配置全局可用的效果。

        style节点只需要加上lang="scss"，就可以直接引用uni.scss中配置好的变量，无需import导入。

<style lang="scss">
</style>

        这里直接用默认的uni.scss文件内容：

/* 颜色变量 */
 
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
 
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
 
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
/* 边框颜色 */
$uni-border-color:#c8c7cc;
 
/* 尺寸变量 */
 
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
 
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
 
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
 
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
 
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
 
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

         我们在需要引用的页面的style节点加上lang="scss"之后，就可以在样式中直接使用uni.scss中配置好的颜色变量，这里以 $uni-color-primary 为例：

<style lang="scss">
	.quare-v{
		width: 200rpx;
		height: 200rpx;
		background-color: $uni-color-primary;
	}
</style>

<view class="content">
	<view class="quare-v"></view>
</view>

可以看到展现出来的效果，背景颜色为uni.scss中设置好的颜色：

        2、js引用uni.scss中变量

        以上展示了在style中直接引用uni.scss中配置好的颜色变量。下面来看一下在js中可不可以去引用uni.scss中的颜色变量呢。

        js中是不可以直接引用uni.scss中的变量的，首先需要在uni.scss中通过export导出颜色变量，然后在js中import引入uni.scss就可以调用其中配置好的颜色变量了。

        uni.scss文件中导出变量示例如下，加上如下代码就可以了：

:export {
	uni_color_success: $uni-color-success
}

      在js中引入uni.scss文件：

import styles from '../../uni.scss'

        在需要使用到配置好的颜色的地方，使用如下代码，就可以调用到：

styles.uni_color_success

        效果如下：

this.bagColor = styles.uni_color_success;

<view class="content">
	<view class="square-v" :style="{'background-color': bagColor}"></view>
	<view class="square-v"></view>
</view>

 结合文章uniapp开发微信小程序——实现动态修改svg图标颜色。我们可以使用引用的颜色变量的值，修改svg图片的颜色：

        在整个工程中，需要用到颜色的样式和js中我们都引入uni.scss，在uni.scss中配置统一的颜色变量。就可以实现修改一处颜色值，全局的颜色都被修改的功能，达到本地统一配置修改全局主题色的目的。