如何在 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

Answer 3

所以可以有兩種不同的主題，即淺色和深色。 默認情況下應用淺色主題，但您可以通過以下方式激活深色主題

dark: true

所以我認為你不需要在這里添加這一行。

但是，如果您還想定義深色主題，那么稍后它會很有用。

現在這段代碼應該適合你

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

更新的答案：

這條線返回什么？ store.getters.selectedTheme.theme

我認為在深色主題的情況下，它不會返回任何顏色，但您還需要定義深色主題