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

Question

我正在使用 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

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

更新如下

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 的默认颜色，并且我无法在暗模式下通过单选按钮动态更改主题颜色。

谢谢

Answer 1

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

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
    }

})

Answer 2

我在尝试弄清楚如何根据系统首选项在浅色和深色主题之间切换时发现了这个问题。这篇文章对我有帮助。

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
})

所有功劳都归于jellehak