How to enable dark mode with custom colors in light theme in vuetify?

问题

I am using vuetify 2.0 and I am facing an issue, in my vuetify.js file I have the following code

export default new Vuetify({
    theme:{
        themes: {
            light: {
                primary: '#3f51b5',
                secondary: '#b0bec5',
                accent: '#8c9eff',
                error: '#b71c1c',
              }
        },
        dark: true
    }

})

vuetify theme https://vuetifyjs.com/en/customization/theme

Here, I have set the custom color for the light theme by default but when I set the dark to true the colors I have set for light gets changed. Why this is happening, why can't I have my own color on dark mode? How can we override this or this is a default feature?

Updated below

export default new Vuetify({
    theme:{
        themes: {
            light: store.getters.selectedTheme.theme,
            dark: store.getters.selectedTheme.theme
        },
        // dark: true
    },

})

and true/false for dark is I am setting through checkbox and the method I am calling on onChange on checkbox is below

emitDarkMode(e) {
        this.$vuetify.theme.dark = e;
      // this.$store.dispatch("darkModeHandler");
    },

The main thing is, I have 5 differnt color sets for theme like for primary, secondary etc and setting these theme colot with radio button. Like If I click on red(error), theme color will be set to red and so on. and doing all this with vuex. But when I switch to dark mode my theme color gets change to the default color of vuetify and I am unable to dynamically change the theme color through radio button on dark mode.

Thanks

回答1:

and you can define other dark theme like below

export default new Vuetify({
    theme:{
        themes: {
            light: {
                primary: '#3f51b5',
                secondary: '#b0bec5',
                accent: '#8c9eff',
                error: '#b71c1c',
              },
            dark: {
              //here you will define primary secondary stuff for dark theme
            }
        },
        dark: true
    }

})

回答2:

so there can be two variants of themes as light and dark. by default light theme is applied but you can active dark theme by

dark: true

so I think you don't need to add this line here.

But if you also want to define dark theme then it will be useful later on.

now this code should work fine for you

  theme:{
    themes: {
        light: {
            primary: '#3f51b5',
            secondary: '#b0bec5',
            accent: '#8c9eff',
            error: '#b71c1c',
          }
        }
    }

updated answer:

what does this line return? store.getters.selectedTheme.theme

I think in case of Dark theme, it returns no color, but you will need to define dark theme as well

来源：https://stackoverflow.com/questions/57800048/how-to-enable-dark-mode-with-custom-colors-in-light-theme-in-vuetify

标签

javascript

Vue.js

vuetify.js