uniapp主题颜色配置

需求 实现小程序暗夜模式

开发环境: "uniapp 微信小程序

指引

官方参考

code

1. 在 manifest.json -> app-plus 中配置,注意是小程序的
   1. 
2. 变量配置文件 theme.json
   1. 

{
	"light": {
		"navBgColor": "#f8f8f8",
		"navTxtStyle": "black",
		"bgColor": "#ffffff",
		"bgTxtStyle": "light",
		"bgColorTop": "#eeeeee",
		"bgColorBottom": "#efefef",
		"tabFontColor": "#000000",
		"tabSelectedColor": "#3cc51f",
		"tabBgColor": "#ffffff",
		"tabBorderStyle": "black",
	},
	"dark": {
		"navBgColor": "#292929",
		"navTxtStyle": "white",
		"bgColor": "#1f1f1f",
		"bgTxtStyle": "dark",
		"bgColorTop": "#292929",
		"bgColorBottom": "#1f1f1f",
		"tabFontColor": "#ffffff",
		"tabSelectedColor": "#51a937",
		"tabBgColor": "#292929",
		"tabBorderStyle": "white"
	},

}

3. 页面 css 适配, 我直接配置在App.vue这样全局生效了!

<style lang="scss">
@import '@/uni.scss';
/* 一般情况下的样式 start */
page {
  background: $uni-bg-color;
  color: black;
}
/* 一般情况下的样式 end */

@media (prefers-color-scheme: dark) {
  /* DarkMode 下的样式 start */
  page {
    background: #1b1b1b;
    color: grey;
  }
  /* DarkMode 下的样式 end */
}
</style>

4. 获取当前主题,监听手机主题. 手机主题切换暗夜模式时触发. 用处不是很大, 通过css@media就已经实现切换了. 这个监听事件可以自定义一些功能。

<script setup lang="ts">
// 暗夜模式切换监听
uni.onThemeChange(({ theme }) => {
  console.log(theme)
})
</script>

效果