naive-ui切换主题

1、在App.vue文件中使用

<script setup lang="ts">
import Dashboard from './views/dashboard/index.vue'
import { NConfigProvider, NGlobalStyle, darkTheme } from 'naive-ui'
import { useThemeStore } from "./store/theme";
// 获取存储的主题类型
const themeStore = useThemeStore()
</script><template><n-config-provider :theme="themeStore.darkTheme ? darkTheme: null"><dashboard /><!-- 这里不能忽略，否则不生效 --><n-global-style /></n-config-provider>
</template>

2、dashboard/index.vue文件（生成两个简单的按钮来进行主题切换测试）

<script setup lang="ts">
import { useThemeStore } from "../../store/theme";
const themeStore = useThemeStore()const changeTheme = (val: boolean) => {// 将数据存储到pinia，true深色主题，false浅色主题 themeStore.changeDarkTheme(val)
}
</script><template><div class="operate"><span @click="changeTheme(true)">深色</span><span @click="changeTheme(false)">浅色</span></div>
</template><style lang="scss" scoped>
.operate {position: absolute;top: 50px;right: 100px;span {display: inline-block;width: 80px;cursor: pointer;}
}
</style>

3、store/theme.ts

import { defineStore } from 'pinia'export type Theme = {darkTheme: boolean,
}export const useThemeStore = defineStore("useThemeStore", {state: (): Theme => ({darkTheme: false,}),actions: {changeDarkTheme(val: boolean) {this.darkTheme = val},},getters: {getDarkTheme: (state) => state.darkTheme}
})