且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 vuetify 的浅色主题中使用自定义颜色启用深色模式?

更新时间:2023-01-27 17:52:33

并且您可以定义其他深色主题,如下所示

导出默认的 new Vuetify({主题:{主题:{光: {主要:'#3f51b5',次要:'#b0bec5',口音:'#8c9eff',错误:'#b71c1c',},黑暗的: {//在这里你将为黑暗主题定义主要的次要内容}},黑暗:真实}})

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

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
    }

})