On this page

设计指南 tmui.design

切换主题 v3.0.4+

🎉 tmApp ref切换

请在根目录务必创建目录theme，然后放置index.ts文件，就可以编写自己的主题啦。可以与系统主题重合。重合的主题会覆盖已有主题色哦。

查看模拟效果＋

查看代码

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.setTheme("red")
</script>

🎉 通过Pinia获取和设置主题

如果想使用pinia方法切换，请务必要在当前页面引入本js的库方法如下:

ts

import {useTmpiniaStore} from '@/tmui/tool/lib/tmpinia';
const store = useTmpiniaStore();

//方法一：调用pinia方法
store.setTmVuetifyTheme("red")
//方法二：
store.$patch(state=>{
	state.tmStore.color="red"
})
//方法三,简单粗暴，但不推荐：
store.tmStore.color="red"

//获取当前全局主题
console.log(store.tmStore.color)//当前全局主题，如果为""表示，未设置主题 ，使用的是默认布局主题。