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