如何在 vuetify 的浅色主题中使用自定义颜色启用深色模式? [英] How to enable dark mode with custom colors in light theme in vuetify?

问题描述

我正在使用 vuetify 2.0，但遇到了一个问题，在我的 vuetify.js 文件中，我有以下代码

导出默认的 new Vuetify({主题:{主题:{光: {主要:'#3f51b5'，次要:'#b0bec5'，口音:'#8c9eff'，错误:'#b71c1c'，}},黑暗:真实}})

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

在这里，我默认为浅色主题设置了自定义颜色，但是当我将深色设置为 true 时，我为浅色设置的颜色会发生变化.为什么会发生这种情况，为什么我不能在黑暗模式下拥有自己的颜色?我们如何覆盖此功能或这是默认功能?

更新如下

导出默认的 new Vuetify({主题:{主题:{光:store.getters.selectedTheme.theme，黑暗:store.getters.selectedTheme.theme},//暗:真},})

对于黑暗来说真/假是我通过复选框设置，我在复选框上调用 onChange 的方法在下面

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

最重要的是，我有 5 种不同的主题颜色集，例如主要、次要等，并使用单选按钮设置这些主题颜色.就像如果我点击红色(错误)，主题颜色将被设置为红色等等.并使用 vuex 完成所有这些.但是当我切换到暗模式时，我的主题颜色会更改为 vuetify 的默认颜色，并且我无法在暗模式下通过单选按钮动态更改主题颜色.

谢谢

解决方案

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

导出默认的 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
    }

})

这篇关于如何在 vuetify 的浅色主题中使用自定义颜色启用深色模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！