Skip to content
On this page
设计指南 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) //当前是否是暗黑