需求 实现小程序暗夜模式
开发环境: "uniapp 微信小程序
指引
code
- 在 manifest.json -> app-plus 中配置,注意是小程序的
- 变量配置文件 theme.json
{
"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"
},
}
- 页面 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>
- 获取当前主题,监听手机主题. 手机主题切换暗夜模式时触发. 用处不是很大, 通过css@media就已经实现切换了. 这个监听事件可以自定义一些功能。
<script setup lang="ts">
// 暗夜模式切换监听
uni.onThemeChange(({ theme }) => {
console.log(theme)
})
</script>