vue.js - 谁能解释一下 vuetify 主题代码

Question

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

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

您还可以使用预定义的 Material 颜色。

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 的确切文件链接

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

Answer 1

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

中生成