rice-ui

暗黑模式

暗黑模式 ​

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

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

如何启用 ​

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

注意

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

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

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

自定义颜色主题 ​

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

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

/* 明亮模式下的主题 */
.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 下的

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

如何在自己写的css中使用RiceUI组件库的css变量 ​

由于App平台不支持:root伪类，需要使用者自行在页面根元素或合适的父级元素使用 rice-theme-light 或 rice-theme-light 类名；使用哪个类名取决于当前应用是否处于暗黑模式，如果您的应用不需要适配暗黑模式，直接写 rice-theme-light 即可。

vue
<template>
  <view :class="`rice-theme-${appTheme}`" class="page" @click="changeAppTheme">
    <text class="text">使用 var(--rice-text-color) css变量</text>
  </view>
</template>

<script setup>
const appTheme = ref('light') //dark
const changeAppTheme = () => {
  appTheme.value = appTheme.value == 'light'? 'dark': 'light'
}
</script>

<style scoped lang="scss">
.page{
  background-color:var(--rice-primary-color);
  height:100px;
  width:100%;
}
.text{
  color:var(--rice-text-color);
}
</style>