如何在Vuetify 3中实现主题的动态切换？

问题描述 #

已定义lightTheme和darkTheme两个自定义主题，配置代码如下：

export default createVuetify({
  theme: {
    defaultTheme: "lightTheme",
    themes: {
      lightTheme: {
        dark: false,
        colors: {
          primary: "#ad1c3d",
          "page-header-background": "#d7d7ce",
          "page-background": "#cdcdc1",
          "table-header": "#cdcdc1",
          background: "#c0c0b5",
          "header-background": "#b5b5a6",
          "info-text": "#666660",
        },
      },
      darkTheme: {
        dark: true,
        colors: {
          primary: "#52E3C2",
          "page-header-background": "#282831",
          "page-background": "#32323E",
          "table-header": "#2e2e2e",
          background: "#3F3F4A",
          "header-background": "#4a4a59",
          "info-text": "#99999F",
        },
      },
    },
  },
});

可通过this.$vuetify.theme访问主题，但找不到Vuetify 3中运行时切换主题的方法，Vuetify 2的实现方式不适用，求正确的动态切换方法。

解决方案 #

在Vuetify 3中，动态切换自定义主题可通过修改$vuetify.theme.global.name的值实现，具体操作如下：

1. 组件内切换主题 #

• Options API 组件：直接修改目标属性值即可

// 切换到深色主题
this.$vuetify.theme.global.name = 'darkTheme'
// 切换到浅色主题
this.$vuetify.theme.global.name = 'lightTheme'

• Composition API 组件：先通过useVuetify获取Vuetify实例再操作

import { useVuetify } from 'vuetify'

const vuetify = useVuetify()

// 切换深色主题
vuetify.theme.global.name = 'darkTheme'
// 切换浅色主题
vuetify.theme.global.name = 'lightTheme'

2. 主题持久化（可选） #

若需要刷新页面后保留用户选择的主题，可将主题名称存入localStorage，并在Vuetify初始化时读取：

初始化时读取本地存储的主题

const savedTheme = localStorage.getItem('selectedTheme') || 'lightTheme'

export default createVuetify({
  theme: {
    defaultTheme: savedTheme,
    themes: {
      // 你的主题配置...
    },
  },
});

切换主题时同步存储

// Options API
switchTheme(themeName) {
  this.$vuetify.theme.global.name = themeName
  localStorage.setItem('selectedTheme', themeName)
}

// Composition API
const switchTheme = (themeName) => {
  vuetify.theme.global.name = themeName
  localStorage.setItem('selectedTheme', themeName)
}

注意事项 #

• 切换的主题名称必须和themes配置中的键名完全一致，大小写敏感。
• Vuetify 3的theme结构和Vuetify 2不同，不再通过直接修改dark属性切换，而是通过切换整个主题实例实现。

内容的提问来源于stack exchange，提问作者Michael