根据Vuetify中的页面切换主题

Question

环境

• nuxt 2.12.2
• @ nuxtjs / vuetify 1.11.2
• ssr模式

我期望的结果

在页面上切换主题亮/暗时，将正确应用颜色变量。

我尝试过的事情

在nuxt.config.js中设置浅色和深色。默认为浅色主题。 在我要使用深色主题的页面组件中，将$vuetify.theme.dark = true设置为mounted()。

结果是，应用了深色主题，但是颜色变量来自浅色主题。

theme: {
  themes: {
    dark: {
      primary: '#000000',
      secondary: '#ff0000',
      warning: '#ffff00',
      error: '#ff0000',
      tertiary: '#00ff00' // Custom theme variants
    },
    light: {
      primary: '#ffffff',
      secondary: '#4555e5',
      warning: '#ffff00',
      error: '#ff0000',
      tertiary: '#ff0000' // Custom theme variants
    }
  }
}

<template>
  $vuetify.theme.themes.light.tertiary is applied.
  <v-btn color="tertiary">hoge</v-btn>
</template>
<script>
export default {
  mounted() {
    this.$vuetify.theme.dark = true
  }
}
</script>