谁能解释一下 vuetify 主题代码

Posted 2023-02-23

【中文标题】谁能解释一下 vuetify 主题代码

【英文标题】：Can anyone explain onto the vuetify themes code

【发布时间】：2019-04-25 21:52:04

【问题描述】：

谁能解释一下这个主题如何在 vuetify 中工作以将变量动态传递给 scss 并更改主题。即，他们如何将主题值从 vue.js 传递到 scss。或者他们在做什么。请提供以下链接，我可以在其中看到为主题编写的代码，我在他们的 git hub 帐户中查找过，但徒劳无功，我不明白他们在哪里为主题编写代码。

  Vue.use(Vuetify, 
 theme: 
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
 
)

您也可以使用预定义的材质颜色。

import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, 
 theme: 
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
 
         )

我急切地想知道它是如何工作的。你们只是我的希望请帮忙。 我想了解核心文件为实现这一目标所做的工作。或者任何人都可以提供编写 theme.js 的确切文件链接

是否可以只运行主题部分？如果可以，请让我知道这怎么可能？我很想学它

【问题讨论】：

它们会更改类和属性，因此您可以使用 class="primary"、class="text--primary" 和 color="primary" 例如，文档中有示例。同样默认情况下，您不能在 CSS 中使用它们，请参见：***.com/questions/48280990/…

@Traxo 如果他们没有操纵 css？那么如何更改 r 和 css 的类和属性请解释清楚 m 但尚未澄清

【参考方案1】：

大部分代码可以在vuetify/app-theme.js^(source)中找到。从创建的生命周期挂钩中，要么调用 applyTheme，要么修改 this.$s-s-rContext.head。任何一个都会将 generatedStyles 中生成的 css 添加到页面中，这是一个计算属性，用于解析 vuetify 选项并从中生成样式。这些样式在vuetify/theme.ts ^(source)

中生成

【讨论】：

谢谢你，我看到代码对我来说非常高级，你能解释一下吗？这对我来说太多了，我不明白那么短，请不要介意

我认为叙述那里的每一行代码对我没有用处。你可以在这个框架的代码中添加一个调试器语句来逐行遍历它。最终结果是在页面的某处添加了一个块<style>theme classes</style>，它根据配置文件设置vuetify的样式。