我们如何在 vuetiy 中拥有多个它们？答案

【问题标题】：How can we have multiple them in vuetiy?我们如何在 vuetiy 中拥有多个它们？
【发布时间】：2021-11-04 14:36:52
【问题描述】：

Vuetify 有明暗模式而且您可以轻松地在它们之间切换。我想添加第三个“蓝色模式”。可能吗？又如何？？

【问题讨论】：

嗨，到目前为止你尝试了什么？
我阅读了文档vuetifyjs.com/en/features/theme/#custom-theme-variants，但我不清楚这是否可能
你需要从纯 CSS 的角度来考虑它。看看如何拥有一个 3 模式彩色网站，并按照下面 Mario 的建议使用 Vuetify 进行映射。

【解决方案1】：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
      dark: {
        // dark theme
      },
      customTheme: {
        // custom theme
      }
    },
  },
})

【讨论】：

也许这是针对 vuetify v.3 的，你确定这在 v.2 中有效吗？

【解决方案2】：

是的，这是可能的！使用组件框架不会阻止您创建其他样式。

在 Vuetify 中，您可能希望使用 SCSS 变量来生成新的主题样式。我建议你浏览所有 vuetify 样式目录并检查它是如何处理深色和白色主题的。这不是火箭科学，但您必须自己深入了解 vuetify 样式目录并找到您想要使用的所有 mixin，并使用您的新主题将它们的用法复制到您自己的 scss 文件中。

最重要的部分是：

您可以从Vuetify/src/styles/settings 复制其中一个主题文件（_light.scss 或_dark.scss）并使用您自己的样式设置更新新文件。
vuetify 中有一个 mixin，您可以使用它来生成新样式，检查 vuetify 是如何做到的 (Vuetify/src/styles/tools/_theme.sass)。你必须找到这个 mixin 的所有用法，并使用你的新主题将它们复制到你自己的 scss 样式中。
在vuetify/src/styles/elements/_headings.sass 文件中还有1 个主题变量（$material-dark 和$material-light）的用法。每个主题都使用标题混合生成标题样式。

【讨论】：