设计指南 tmui.design
设置暗黑效果
🎉 tmApp ref切换
请在根目录务必创建目录theme，然后放置index.ts文件，就可以编写自己的主题啦。可以与系统主题重合。 重合的主题会覆盖已有主题色哦。
关于暗黑闪白问题 由于uni在最新的3.7.3+已经出了darkMode配置方法，我原先的一些方法将注销不再使用。如果你们的app,微信,h5出现暗黑闪白问题，请按照官方的配置方法去配置解决。
官方的暗黑配置教程
查看模拟效果＋
查看代码
vue
<template>
<tm-app ref="app">
<!-- 这里是你的页面代码。 -->
</tm-app>
</template>
<script lang="ts" setup>
import {getCurrentInstance} from 'vue';
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
const proxy = getCurrentInstance()?.proxy ?? null
//切换暗黑
proxy?.$refs?.app.setDark(true)
</script>🎉 通过Pinia获取/设置
如果想使用pinia方法切换，请务必要在当前页面引入本js的库方法如下:
ts
import {useTmpiniaStore} from '@/tmui/tool/lib/tmpinia';
const store = useTmpiniaStore();
//方法一：调用pinia方法
store.setTmVuetifyDark(true)
//方法二：
store.$patch(state=>{
state.tmStore.dark=true
})
//方法三,简单粗暴，但不推荐：
store.tmStore.dark=true
//获取当前主题状态
console.log(store.tmStore.dark) //当前是否是暗黑