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

Posted 2023-02-22

【中文标题】我们如何在 vuetiy 中拥有多个它们？

【英文标题】：How can we have multiple them in vuetiy?

【发布时间】：2021-11-04 14:36:52

【问题描述】：

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

【问题讨论】：

嗨，到目前为止你尝试了什么？

我阅读了文档vuetifyjs.com/en/features/theme/#custom-theme-variants，但我不清楚这是否可能

你需要从纯 CSS 的角度来考虑它。看看如何拥有一个 3 模式彩色网站，并按照下面 Mario 的建议使用 Vuetify 进行映射。

【参考方案1】：

Vuetify Theme Configuration

Add custom theme

// 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）的用法。每个主题都使用标题混合生成标题样式。