Vuetify 中文网

简体中文

English

简体中文

English

主题

主题配置 ​

自定义应用程序的默认文本颜色、表面等。轻松修改您的主题编程实时。Vuetify 提供了对浅色和深色变体的标准支持。

API ​

产品特点描述
useThemeThe theme composable allows you to get information about, and modify the current theme
v-theme-providerThe theme provider component modifies the theme of all its children

...

起步 ​

Vuetify 预装了两个主题，light和 dark。要设置应用程序的默认主题，请使用defaultTheme选项。

Javascript ​

只有defaultTheme值的示例

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";

export default createVuetify({
  theme: {
    defaultTheme: "dark",
  },
});

添加新主题就像在 theme （主题） 中定义一个新属性一样简单。themes object （主题对象）。主题是一组颜色和选项的集合，可以改变应用程序的整体外观和感觉。其中一个选项将主题指定为 light 或 dark 变体。这使得 Vuetify 实现材料设计概念成为可能，比如高架表面的叠加颜色越高越浅。在官方Material Design上找到更多关于黑暗主题的信息页面。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";

const myCustomLightTheme = {
  dark: false,
  colors: {
    background: "#FFFFFF",
    surface: "#FFFFFF",
    "surface-bright": "#FFFFFF",
    "surface-light": "#EEEEEE",
    "surface-variant": "#424242",
    "on-surface-variant": "#EEEEEE",
    primary: "#1867C0",
    "primary-darken-1": "#1F5592",
    secondary: "#48A9A6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FB8C00",
  },
  variables: {
    "border-color": "#000000",
    "border-opacity": 0.12,
    "high-emphasis-opacity": 0.87,
    "medium-emphasis-opacity": 0.6,
    "disabled-opacity": 0.38,
    "idle-opacity": 0.04,
    "hover-opacity": 0.04,
    "focus-opacity": 0.12,
    "selected-opacity": 0.08,
    "activated-opacity": 0.12,
    "pressed-opacity": 0.12,
    "dragged-opacity": 0.08,
    "theme-kbd": "#212529",
    "theme-on-kbd": "#FFFFFF",
    "theme-code": "#F5F5F5",
    "theme-on-code": "#000000",
  },
};

export default createVuetify({
  theme: {
    defaultTheme: "myCustomLightTheme",
    themes: {
      myCustomLightTheme,
    },
  },
});

Typescript ​

只有defaultTheme值的示例

ts
import { createApp } from "vue";
import { createVuetify } from "vuetify";

export default createVuetify({
  theme: {
    defaultTheme: "dark",
  },
});

当使用 Typescript 时，你可以使用 ThemeDefinition 类型来获取主题对象结构的类型提示。

ts
import { createApp } from "vue";
import { createVuetify, type ThemeDefinition } from "vuetify";

const myCustomLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: "#FFFFFF",
    surface: "#FFFFFF",
    primary: "#6200EE",
    "primary-darken-1": "#3700B3",
    secondary: "#03DAC6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FB8C00",
  },
};

export default createVuetify({
  theme: {
    defaultTheme: "myCustomLightTheme",
    themes: {
      myCustomLightTheme,
    },
  },
});

更改主题 ​

当您需要在运行时更改主题时使用

html
<template>
  <v-app>
    <v-btn @click="toggleTheme">toggle theme</v-btn>
    ...
  </v-app>
</template>

<script setup>
  import { useTheme } from "vuetify";

  const theme = useTheme();

  function toggleTheme() {
    theme.global.name = theme.global.current.dark ? "light" : "dark";
  }
</script>

您应该记住，大多数 Vuetify 组件都支持theme 道具。使用时，将为 该 特定组件及其所有子组件创建一个新的上下文。在下面的示例中，v-btn使用dark主题，因为它被应用到它的v-card。

html
<template>
  <v-app>
    <v-card theme="dark">
      <!-- button uses dark theme -->
      <v-btn>foo</v-btn>
    </v-card>
  </v-app>
</template>

您可以使用<v-theme-provider>组件来动态地将不同的主题应用到应用程序的较大部分，而不必在每个单独的组件上设置主题道具。在下面的示例中，我们应用一个名为 high-contrast 的自定义主题。

html
<template>
  <v-app>
    <!-- uses the current default theme -->
    <v-card>...</v-card>

    <v-theme-provider theme="high-contrast">
      <!-- uses the high-contrast theme -->
      <v-card>...</v-card>
      <v-btn>...</v-btn>
    </v-theme-provider>
  </v-app>
</template>

自定义主题颜色 ​

Vuetify 主题系统支持添加自定义颜色。在配置 Vuetify 主题设置时，将自定义颜色添加到colors对象中，Vuetify 将生成许多 CSS 类和变量供您在应用程序中使用。

js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          ..., // We have omitted the standard color properties here to emphasize the custom one that we've added
          something: '#00ff00',
        },
      },
    },
  },
})

颜色的自定义属性是red, green, blue的列表，因此必须使用rgb() or rgba()函数:

html
<template>
  <div class="bg-something on-something">
    background color with appropriate text color contrast
  </div>

  <div class="text-something">text color</div>

  <div class="border-something">border color</div>
</template>

<style>
  .custom-class {
    background: rgb(var(--v-theme-something))
    color: rgba(var(--v-theme-on-something), 0.9)
  }
</style>

颜色衍生(Color variations) ​

Vuetify 主题系统可以帮助您为主题中的颜色生成任意数量的variations(变化)。下面的例子展示了如何为primary和secondary生成 1 个亮色和 2 个暗色变体。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";

export default createVuetify({
  theme: {
    defaultTheme: "myCustomTheme",
    variations: {
      colors: ["primary", "secondary"],
      lighten: 1,
      darken: 2,
    },
    themes: {
      //
    },
  },
});
html
<template>
  <div class="text-primary-lighten-1">text color</div>

  <div class="text-primary-darken-1">text color</div>

  <div class="text-primary-darken-2">text color</div>
</template>

禁用主题 ​

可以通过将theme配置属性设置为false来禁用主题功能。这将防止创建 Vuetify 样式表，并且不会将主题类应用于组件。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";

export default createVuetify({
  theme: false,
});

主题对象结构 ​

ts
interface ThemeInstance {
  /**
   * Raw theme objects
   * Can be mutated to add new themes or update existing colors
   */
  themes: Ref<{ [name: string]: ThemeDefinition }>;

  /**
   * Name of the current theme
   * Inherited from parent components
   */
  readonly name: Ref<string>;

  /** Processed theme object, includes automatically generated colors */
  readonly current: Ref<ThemeDefinition>;
  readonly computedThemes: Ref<{ [name: string]: ThemeDefinition }>;

  readonly global: {
    /** Name of the current global theme */
    name: Ref<string>;

    /**
     * Processed theme object of the current global theme
     * Equivalent to `theme.computedThemes.value[theme.global.name.value]`
     */
    readonly current: Ref<ThemeDefinition>;
  };
}

CSP Nonce ​

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

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

<!-- Use with style-src -->
Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'
ts
// src/plugins/vuetify.js

import { createVuetify } from "vuetify";

export const vuetify = createVuetify({
  theme: {
    cspNonce: "dQw4w9WgXcQ",
  },
});

实现 ​

Vuetify 在运行时根据给定的配置生成主题样式。生成的样式被注入到 DOM 的<head>部分的<style>标记中，其id为vuetify-theme-stylesheet。