Vuetify

商店

企业版

轻松更改你的应用程序的颜色。重建默认样式表,并根据你的特定需求自定义框架的各个方面。

使用我们的 Theme Generator 工具为你的 Vuetify 应用程序发现和生成新的颜色主题。

Vuetify 同时支持 Material Design spec 中的 lightdark 变量。这个指定从根组件的 v-app 开始,大多数组件都支持它。默认情况下,你的应用程序将会使用 light 主题,但是你也可以轻松的在主题服务中使用 dark 选项来改变它。

当你指定一个组件为浅色或暗色时,除非另有指定,所有子组件将继承并应用同样的组件。 你可以手动打开 dark 开关,方法是将 this.$vuetify.theme.dark 更改为 truefalse

默认情况下,Vuetify 具有适用于所有组件的标准主题。

这可以很容易地改变。只需传递一个 主题 属性给 Vuetify 构造函数即可。你可以选择修改所有或只修改部分主题属性,其余的属性则继承自默认的主题属性。

你也可以使用预定义的 material 色彩。

默认情况下,主题服务将使用你应用程序的主颜色为 anchor 标签。 你可以通过向主题 anchor 属性来覆盖它:

深入原理,Vuetify 将会根据这些可以在 DOM 中访问的值生成 CSS 类。这些类将遵循与其他助手类相同的标记,例如 primary 或者 secondary--text。如果提供整个颜色对象(如上述 colors.purple 中的颜色),则 lighten/darken 变量将立即使用来代替生成。

这些值会在 theme 属性下的 $vuetify 对象示例中可用。这可以让你动态地修改你的主题,Vuetify 将在后台重新生成并更新你的主题类,无缝更新你的应用程序。

虽然 Vuetify 会自动生成主题颜色的 lightendarken 变量,但你可能想要自己控制这个东西。 只需传递一个包含你想要修改的变量的主题对象。不需要提供任何东西就为你生成。

你现在可以导入你的自定义主题对象并将其应用到 Vuetify

下面是主题对象上可覆盖键的完整列表:

您可以使用值为 truedisable 属性来禁用主题功能 。这将禁止创建 Vuetify 样式表。

Vuetify 在运行时为 SPA 生成主题样式,在服务器端为 SSR 应用程序生成主题样式。生成的样式将被放置在一个带有 idvuetify-theme-stylesheet<style> 标签中。

minifyTheme 选项允许你提供一个自定义的 minify 实现。这有助于减少初始页面的大小,建议与 `options.meincessCache' 搭配使用。在这个例子中,我们使用了 minify-css-string 包来减化 生成的主题样式

你可以选择传递一个自定义的 themeCache实现。这可以让你跳过重新计算主题对象的需要。下面是一个使用 localStorage 属性的例子。

缓存也可以通过 lru-cache 来完成。这对于 SSR(服务器端渲染)应用特别有用。

启用 customProperties 也会为每个主题颜色生成一个 css 变量,你可以在组件的 <style> 块中使用。

启用了 script-srcstyle-src CSP 规则的页面可能需要为嵌入的样式标签指定一个 nonce

When Vuetify generates your application's theme, it creates 9 variants for each color. For majority of users, these variants are rarely used. This is an opt in feature that will be false by default in the next major version.

Vuetify 主题系统是通过 Vue 中的 provide 功能传播的。在某些情况下可能需要手动更改提供的主题(深色或浅色)。

在这个例子中,底层卡继承自 $vuetify.mechanical.dark 的根目录。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!