主题

Discover and generate new color themes for your Vuetify applications using our Theme Generator tool.

Vuetify支持Material Design规范中的明亮和暗黑变量。这个名称从根应用程序组件v-app开始，并被大多数组件支持。默认情况下，您的应用程序将使用明亮主题，但是通过添加dark属性就可以很容易地复写这个主题。

当你指定一个组件是明亮或者暗黑时，除非另有说明，它的所有子组件都会继承和应用相同的主题设置。由于css的特殊性，一些组合（certain combinations）可能会提示您未嵌套的子项手动分配 主题。使用暗黑主题时，最有可能发生这种情况。

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

这也可以很容易地修改。只需简单地将theme属性传递给Vue.use函数即刻。您可以选择修改全部或仅部分主题属性，其余部分会继承默认配置。

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

在引擎盖下，Vuetify将会根据这些可以在DOM中访问的值生成CSS类。这些类将遵循与其他辅助器类相同的标记，例如primary或者secondary--text。

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

While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.

You can now import your custom theme object and apply it to Vuetify

Below is a full list of the overwritable keys on the theme object:

Vuetify generates theme styles at run-time for SPA's and server side for SSR applications. The generated styles will be placed in a <style> tag with the id of vuetify-theme-stylesheet.

For SSR applications, you can pass a callback function to $vuetify.options.minifyTheme to reduce the initial page size. When using this option, it is recommended to also use themeCache.

A custom caching object can be provided (works in tandem with minifyTheme) to increase SSR efficiency. The object must contain a get and a set method. Below is an example using LRU cache.

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' <style> blocks.

Pages with the script-src CSP rule enabled may require a nonce to be specified for embedded style tags.

Vuetify建立在stylus的顶部，类似于scss，您可以更改变量并重新编译样式文件，可用变量的列表在这里。为了重新构建stylus文件，您需要配置您的应用程序以支持。如果您正在使用快速入门指南，则可以跳过下一节。

在命令行执行：

这将安装导入和解析stylus文件所需的依赖包。安装完成后，打开您的webpack配置并且加入一个stylus的规则（rule）。对于基于SSR的应用程序，请确保导入操作是在您的client-entry中.

在您的源码（src）目录（或相应资源文件目录）创建一个名叫stylus的文件夹。它将作为导入和重建默认Vuetify样式的入口点。一单创建，打开.styl文件并添加此条目。

请记住，node_modules的相对位置可能在您的项目中有所不同，请相应地进行调整。建议导入被定位在主应用程序的index.js或client-entry.js文件。 不要导入您的main.styl到一个组件内，否则 将会 导致性能问题并大大减慢HMR（模块重新热加载）。

确定导入位置之后，如果要在Index文件中使用一个<link>标签来请求Vuetify样式表，您应该可以看到所有样式都在正常工作。

现在stylus是已经配置好了，您可以为需要改变的stylus变量设置默认值。这些必须在导入 之前 声明，它们将会自动覆盖Vuetify的默认值。