Vuetify dark theme customizing does not work

Question

I'm using Vue with Vuetify 1.5.14 and I'm trying to customize my theme. I just follow the docs to do this. When I apply color="primary" to my v-card component, it correctly uses the custom primary base color. However when I apply the dark property to it, it still show the base color instead of the darken1 color. This is my vuetify.js file:

Vue.use(Vuetify, {
    iconfont: 'md',
    theme: {

        primary: {
            base: '#673ab7',
            darken1: '#320b86',
            lighten1: '#9a67ea'
        },
        secondary: {
            base: '#00bcd4',
            darken1: '#008ba3',
            lighten1: '#62efff'
        },
        accent: '#ffeb3b',
        error: '#f44336',
        warning: '#ffc107',
        info: '#009688',
        success: '#8bc34a'
    }

});

Anyone has an idea how to properly customize the light theme colors?

I think base is just used for the light theme which is the default? Also, why is your title about dark theme, and question about light theme? What are you trying to achieve? — Traxo
@Traxo the light theme is default indeed, but you can add 'light' or 'dark' properties to separate components in your app. With the default theme, this works, so dark becomes dark grey en light becomes white. So my purpose is actually to change these dark and light colors to my own custom ones. — Simon

Traxo Traxo · Accepted Answer · 2019-06-04T12:20:52

From v1.5.14 docs:

Custom theme variants

While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.

// src/theme.js
import colors from 'vuetify/es5/util/colors'

export default {
  primary: {
    base: colors.purple.base,      // modifies `primary`
    darken1: colors.purple.darken2 // modifies `primary darken-1`
  },

When you set colors predefined by vuetify then light and dark variants are automatically set for you.
Modifying these options in vuetify v1 just change your custom lightening or darkening of your color i.e. primary lighten-1.
So in dark theme (i.e. <v-app dark) you would use them like so:

:color="$vuetify.dark ? 'primary darken-1' : 'primary'"

$vuetify.dark is a property which determines if you are using dark theme.
If you need this per component (i.e. you want to pass dark property to a component), then you need to manually extend a component to support that feature.

Automatic toggle between custom dark and light theme colors will be supported in v2. ^{(already works in beta)}

Vuetify dark theme customizing does not work

1 Answers