CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
shashi verma
shashi verma

Reputation: 973

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

Upvotes: 4

Views: 10351

Answers (3)

Marc Barbeau
Marc Barbeau

Reputation: 836

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

Upvotes: 9

Asim Khan
Asim Khan

Reputation: 2039

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

Upvotes: 1

Asim Khan
Asim Khan

Reputation: 2039

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
    }

})

Upvotes: 11

Related Questions