The uniapp WeChat applet configures the global theme color and realizes dynamic modification of the theme color

Foreword:

        The goal of this article is to globally configure the overall theme color of the applet, including the color tone of the local icons. The first step is to realize that the overall theme color and the color of local icons can be uniformly modified locally; the second step is to dynamically adjust the overall theme color and local icon color of the front end of the applet through the background interface. The theme color adjustment of local icons requires the use of pictures in svg format. For the color modification of svg pictures, please refer to the article uniapp develops WeChat applets - realize dynamic modification of svg icon colors .

1. Unified configuration

        1、uni.scss

        The uni.scss file is used here for global color configuration. The uniapp compiler makes special treatment for uni.scss in the webpack configuration, so that each scss file is injected into uni.scss, so that the configuration can be globally available.

        The style node only needs to add lang="scss" to directly refer to the variables configured in uni.scss without importing.

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

        Here directly use the default uni.scss file content:

/* 颜色变量 */

/* 行为相关颜色 */
$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;

         After we add lang="scss" to the style node of the page to be referenced, we can directly use the color variable configured in uni.scss in the style. Here we take $uni-color-primary as an example:

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

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

You can see the displayed effect, the background color is the color set in uni.scss:

        2. js refers to variables in uni.scss

        The above shows that the color variables configured in uni.scss are directly referenced in the style. Let's see if it is possible to refer to the color variable in uni.scss in js.

        It is not possible to directly refer to the variables in uni.scss in js. First, you need to export the color variables in uni.scss, and then import uni.scss in js to call the configured color variables.

        An example of exporting variables in the uni.scss file is as follows, and it is enough to add the following code:

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

      Introduce the uni.scss file in js:

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

        Where you need to use the configured color, use the following code to call it:

styles.uni_color_success

        The effect is as follows:

this.bagColor = styles.uni_color_success;

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

 Combined with the article uniapp to develop a WeChat applet - realize the dynamic modification of the color of the svg icon . We can use the value of the referenced color variable to modify the color of the svg image:

        Throughout the project, we import uni.scss into the styles and js that need to use colors, and configure unified color variables in uni.scss. It can realize the function of modifying a color value, and the global color will be modified, so as to achieve the purpose of local unified configuration and modification of global theme color.