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

Posted 2023-02-22

【中文标题】如何在 vuetify 的浅色主题中启用具有自定义颜色的深色模式？

【英文标题】：How to enable dark mode with custom colors in light theme in vuetify?

【发布时间】：2020-01-08 00:50:53

【问题描述】：

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

谢谢

【问题讨论】：

深色主题在哪里定义？

我是指深色主题的颜色？

我有一个自定义侧边栏组件，我有一个暗模式功能复选框

这行返回什么？ store.getters.selectedTheme.theme....我认为在深色主题的情况下，它不会返回任何颜色，但您还需要定义深色主题

谢谢老哥的回复，问题已经解决了。你腾出时间来回答我的问题并再次帮助了我。非常感谢

【参考方案1】：

因此可以有两种主题变体，即浅色和深色。默认情况下应用浅色主题，但您可以通过

激活深色主题

dark: true

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

但如果您还想定义深色主题，那么稍后它会很有用。

现在这段代码应该可以正常工作了

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

更新答案：

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

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

【参考方案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
    

)

【讨论】：

这个工作正常，但是当我通过 vuex 获取这些主题颜色时，我遇到了问题，让我更新我的问题

当我定义一个主题时，我没有看到元素的背景颜色发生变化。但是当我将深色更改为 false 或从 false 更改为 true 时，我看到背景颜色也发生了变化。似乎只设置 6 种颜色并不能完全改变样式。我怎样才能完全改变风格。

【参考方案3】：

我在尝试弄清楚如何根据系统偏好在浅色和深色主题之间切换时发现了这个问题。这个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