主题

主题

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

主题生成器

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

浅色和深色

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
  theme: {
    dark: true,
  },
})

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

自定义

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

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107',
}

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

// 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',
      },
    },
  },
})

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/lib/util/colors'
const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blue.lighten3,
      },
    },
  },
})

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        anchor: '#8c9eff',
      },
    },
  },
})
export default vuetify

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

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

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'
// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

自定义主题变量

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

// src/plugins/vuetify/theme.js
import colors from 'vuetify/lib/util/colors'
export default {
  primary: {
    base: colors.purple.base,
    darken1: colors.purple.darken2,
  },
  secondary: colors.indigo,
  // All keys will generate theme styles,
  // Here we add a custom `tertiary` color
  tertiary: colors.pink.base,
}

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import light from './theme'
Vue.use(Vuetify)
export default new Vuetify({
  theme: {
    themes: { light },
  },
})

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

interface ParsedThemeItem {
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string
  [name: string]: string
}

禁用主题

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
  theme: { disable: true },
})

选项

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

压缩

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

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import minifyTheme from 'minify-css-string'
Vue.use(Vuetify)
export default new Vuetify({
  theme: {
    options: { minifyTheme },
  },
})

缓存

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

// src/plugins/vuetify.js
export default new Vuetify({
  theme: {
    options: {
      themeCache: {
        get: key => localStorage.getItem(key),
        set: (key, value) => localStorage.setItem(key, value),
      },
    },
  },
})

提供的 themeCache 对象必须包含一个 get 和 set 方法。使用它们来检索和设置 生成的 css 字符串。

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

// src/plugins/vuetify.js
const themeCache = new LRU({
  max: 10,
  maxAge: 1000 * 60 * 60, // 1 hour
})
export default new Vuetify({
  theme: {
    options: {
      themeCache,
    },
  },
})

自定义属性

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

Internet Explorer 中不支持自定义属性。可使用 Polyfills（有一些限制）：https://github.com/nuxodin/ie11CustomProperties, https://github.com/jhildenbiddle/css-vars-ponyfill.

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
  },
})

<style scoped>
  .something {
    color: var(--v-primary-base);
    background-color: var(--v-accent-lighten2);
  }
</style>

CSP Nonce

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

<!-- Use with script-src -->
Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'
<!-- Use with style-src -->
Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
  theme: {
    options: {
      cspNonce: 'dQw4w9WgXcQ',
    },
  },
})

主题 Provider

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

props

name

dark

type

boolean

default

false

description

将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。

name

light

type

boolean

default

false

description

为组件设置浅色主题。

name

root

type

boolean

default

false

description

使用当前的值 $vuetify.theme.dark ，而不是提供的值。

用例

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

template script

<template>
  <v-card dark>
    <v-toolbar
      color="primary"
      flat
    >
      <v-switch
        v-model="$vuetify.theme.dark"
        hide-details
        inset
        label="Theme Dark"
      ></v-switch>
    </v-toolbar>
    <v-card-text>
      <v-list>
        <v-subheader>I inherit dark from my parent</v-subheader>
        <v-list-item>
          <v-list-item-title>One</v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-title>Two</v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-title>Three</v-list-item-title>
        </v-list-item>
      </v-list>
      <v-divider class="my-8"></v-divider>
      <v-theme-provider root>
        <v-list>
          <v-subheader>I inherit from the root $vuetify.theme.dark</v-subheader>
          <v-list-item>
            <v-list-item-title>One</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>Two</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>Three</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-theme-provider>
    </v-card-text>
  </v-card>
</template>

<script>
  export default {
    props: {
      attrs: {
        type: Object,
        default: () => ({}),
      },
    },
    data: vm => ({
      initialDark: vm.$vuetify
        ? vm.$vuetify.theme.dark
        : false,
    }),
    beforeDestroy () {
      if (!this.$vuetify) return
      this.$vuetify.theme.dark = this.initialDark
    },
  }
</script>

Theme（主题）

主题

主题生成器

浅色和深色

自定义

自定义主题变量

禁用主题

选项

压缩

缓存

自定义属性

CSP Nonce

主题 Provider

用例