暗黑模式

本节将介绍如何在项目中使用 暗黑模式

在rice-ui中，暗黑模式是通过 CSS 变量 实现的

如何启用

rice-ui内部暴露了一个 setTheme 方法设置组件库是否处于暗黑模式， 可以传入dark 或者 light 值。

注意

需要注意的是：目前组件库内部并不会监听 系统/App主题 的变化去动态设置组件库是否处于暗黑模式，需要使用者手动调用setTheme 方法设置。

import { setTheme } from "@/uni_modules/rice-ui"

//使用者需要手动调用 setTheme 方法设置暗黑模式
const setRiceUiTheme = () => {
	setTheme(themeState.isDark ? 'dark' : 'light')
}

自定义颜色主题

1.新建一个 css 文件，自行修改以下颜色变量，其中 rice-theme-light 表示明亮模式，rice-theme-dark 表示暗黑模式

/* 自定义主题色示例 */

/* 明亮模式下的主题 */
.rice-theme-light {
	--rice-primary-color: #845ec2;
	--rice-primary-color-1: #b7abc2;
	--rice-primary-color-7: #782ec2;
	--rice-success-color: #4d8076;
	--rice-success-color-1: #4d8076;
	--rice-success-color-7: #4d8076;
	--rice-warning-color: #e6a23c;
	--rice-warning-color-1: #fffbe8;
	--rice-warning-color-7: #bf7e28;
	--rice-error-color: #f56c6c;
	--rice-error-color-1: #fff2f0;
	--rice-error-color-7: #cf5155;
	/* ....其他你自己要修改的颜色值 */
}

/* 暗黑模式下的主题 */
.rice-theme-dark {
	--rice-primary-color: #6235c2;
	--rice-primary-color-1: #a391c2;
	--rice-primary-color-7: #aa97c2;
	--rice-success-color: #0d8063;
	--rice-success-color-1: #e6ffee;
	--rice-success-color-7: #009c50;
	--rice-warning-color: #e6a23c;
	--rice-warning-color-1: #fffbe8;
	--rice-warning-color-7: #bf7e28;
	--rice-error-color: #f56c6c;
	--rice-error-color-1: #fff2f0;
	--rice-error-color-7: #cf5155;
	/* ....其他你自己要修改的颜色值 */

}

2.在APP.vue中引入该css文件，假设上述 css 文件是放在 /common/theme.css 下的

<style>
	@import "@/uni_modules/rice-ui/libs/style/index.css";
	/* 自定义主题色示例，注意要放在基础样式文件下面 */
	@import "@/common/theme.css";
	
</style>