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}
})