ConfigProvider 全局配置

介绍

用于全局配置组件样式变量，提供深色模式、主题定制等能力。

开启深色模式

将 ConfigProvider 组件的 theme 属性设置为 dark，即可开启深色模式。

深色模式会全局生效，使页面上的所有 Vital Design 组件变为深色风格。

<vd-config-provider theme="dark">...</vd-config-provider>

自动切换与手动切换

为 ConfigProvider 组件提供了 useDark 方法，用于自动切换深色模式。

你也可以手动切换深色模式，通过 isDark 变量或 toggle 方法控制深色模式的开启与关闭。

<vd-config-provider :theme="theme">...</vd-config-provider>

import { useDark } from '@vital-design/use';

const { isDark, toggle } = useDark();

const theme = computed(() => {
  return isDark.value ? 'dark' : 'light';
});

API

Props

参数	说明	类型	默认值
theme	主题	light dark	-
theme-vars	主题变量配置	ConfigProviderThemeVars	-
theme-vars-light	主题变量配置（浅色模式生效）	ConfigProviderThemeVars	-
theme-vars-dark	主题变量配置（暗黑模式生效）	ConfigProviderThemeVars	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
default	自定义内容

类型定义

组件导出以下类型定义：

import type { ConfigProviderTheme, ConfigProviderThemeVars } from 'vital-design';