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

在这里，我默认情况下为灯光主题设置了自定义颜色，但是当我将dark设置为true时，我为灯光设置的颜色就会更改。为什么会这样，为什么在黑暗模式下我无法拥有自己的颜色？我们该如何覆盖它或这是默认功能？

在下面更新

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

})

对于暗色，则为true / false是我通过复选框设置，而我在复选框上的onChange调用的方法位于

之下

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

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

谢谢

Answer 1

我尝试根据系统偏好设置找出浅色和深色主题之间的切换时遇到了这个问题。这个post帮助了我。

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

Answer 2

您可以定义其他类似以下的深色主题

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 3

因此，可以有两种不同的主题，分别是浅色和深色。默认情况下会应用浅色主题，但您可以通过

激活深色主题

dark: true

所以我认为您不需要在此处添加此行。

但是，如果您还想定义深色主题，则稍后将很有用。

现在此代码对您来说应该可以正常工作

  theme:{
    themes: {
        light: {
            primary: '#3f51b5',
            secondary: '#b0bec5',
            accent: '#8c9eff',
            error: '#b71c1c',
          }
        }
    }

更新的答案：

此行返回什么？ store.getters.selectedTheme.theme

我认为在深色主题的情况下，它不会返回任何颜色，但是您还需要定义深色主题

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

3 个答案: