Change primary text color of the theme in Vuetify 2 on runtime

user_2764278 0
Viewed 2453

I allow the user to change the main primary color of the application by using any hexadecimal color by calling: 

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

the problem is that if the chosen color is too bright or dark, the text color can't be read.

enter image description here is there is something like this? ==>

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

I need to apply the changes too all the places where primary color is being used, app-bar, buttons...etc. I also have a toggle between dark and light mode, so I need to be sure that the color text doesn't change when switching between modes.

vuetify.js vue.js frontend
2 Answers

My solution

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;
}
user_121357340

Color values are available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Vuetify will regenerate and update your theme classes, seamlessly updating your application.

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

documentation

user_63747290
Related