vue.js - 在运行时更改 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
      }
    }
  }
});

视觉

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