在运行时更改Vuetify 2中主题的主要文本颜色

Question

我允许用户通过调用以下任何十六进制颜色来更改应用程序的主要原色：

changeTheme(color){
  Vuetify.framework.theme.themes.light.primary = color
}

问题是，如果选择的颜色太亮或太暗，则无法读取文本颜色。

有这样的东西吗？ ==>

changeTheme(color, textColor){
  Vuetify.framework.theme.themes.light.primary = color <== This line works
  Vuetify.framework.theme.themes.light.primaryText = textColor <== This not
}

我也需要在所有使用原色的地方，应用程序栏，按钮等处应用更改。我还在黑暗和明亮模式之间切换，因此我需要确保在模式之间切换时，彩色文本不会改变。

Answer 1

我的解决方案

vuetify.js

export default new Vuetify({
  icons: {
    iconfont: 'md'
  },
  theme: {
    // dark: true,
    // theme: { disable: true },
    options: { customProperties: true },//add this
    themes: {
      light: {
        primary2: colors.indigo.base,//add this 
        primary2Text: colors.shades.white//You can also use localStorage.getItem('XXX')
      },
      dark: {
        // primary: colors.blue.lighten3,
        background: colors.grey.base
      }
    }
  }
});

vue

<v-app-bar app class="appbar"></v-app-bar>
.appbar,
.footer {
  background-color: var(--v-primary2-base) !important;
  color: var(--v-primary2Text-base) !important;
}