Changer la couleur du texte principal du thème dans Vuetify 2 en temps d'exécution

Question

Je permet à l'utilisateur de changer la couleur primaire principale de l'application en utilisant n'importe quelle couleur hexadécimale en appelant :

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

le problème est que si la couleur choisie est trop claire ou trop sombre, la couleur du texte ne peut pas être lue.

y a-t-il quelque chose comme ça? ==>

changeTheme(color, textColor){
  Vuetify.framework.theme.themes.light.primary = color <== Cette ligne fonctionne
  Vuetify.framework.theme.themes.light.primaryText = textColor <== Cela non
}

J'ai besoin d'appliquer les changements à tous les endroits où la couleur primaire est utilisée, barre d'application, boutons...etc. J'ai également un commutateur entre le mode sombre et le mode clair, donc je dois m'assurer que la couleur du texte ne change pas lorsque je bascule entre les modes.

Answer 1

Ma solution

vuetify.js

export default new Vuetify({
  icons: {
    iconfont: 'md'
  },
  theme: {
    // dark: true,
    // theme: { disable: true },
    options: { customProperties: true },//ajouter ceci
    themes: {
      light: {
        primary2: colors.indigo.base,//ajouter ceci 
        primary2Text: colors.shades.white//Vous pouvez également utiliser localStorage.getItem('XXX')
      },
      dark: {
        // primary: colors.blue.lighten3,
        background: colors.grey.base
      }
    }
  }
});

vue

.appbar,
.footer {
  background-color: var(--v-primary2-base) !important;
  color: var(--v-primary2Text-base) !important;
}