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

2
votes

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

3
javascriptvue.jsvuetify.js
where is dark theme defined? – Asim Khan
I mean the colors for dark theme? – Asim Khan
I have a customizer sidebar component there I have a checkbox for dark mode funcionality – shashi verma
what does this line returns? store.getters.selectedTheme.theme.... I think in case of Dark theme, it return no color, but you will need to define dark theme as well – Asim Khan
Thanks bro for your response, I have solved the problem. You spare time for my question and helped me once again. Thank you so much – shashi verma

3 Answers

9
votes

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
    }

})
4
votes

I found this question while trying to figure out how to switch between light and dark themes based on system preferences. This post helped me.

const mq = window.matchMedia('(prefers-color-scheme: dark)')

export const vuetify = new Vuetify({
  theme: { dark: mq.matches }
})

mq.addEventListener('change', (e) => {
  vuetify.framework.theme.dark = e.matches
})

All credit goes to jellehak

1
votes

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