时间戳

首页 > 解决方案 > 如何在 vuetify 的浅色主题中启用具有自定义颜色的深色模式？

javascript - 如何在 vuetify 的浅色主题中启用具有自定义颜色的深色模式？

问题描述

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

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

})

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

在这里，我默认为浅色主题设置了自定义颜色，但是当我将深色设置为真时，我为浅色设置的颜色会改变。为什么会发生这种情况，为什么我不能在深色模式下拥有自己的颜色？我们如何覆盖这个或者这是一个默认功能？

更新如下

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

})

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

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

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

谢谢

标签： javascriptvue.jsvuetify.js

解决方案

您可以定义其他黑暗主题，如下所示

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
    }

})

推荐阅读