ConfigProvider 配置提供者

示例

主题切换

当前模式：light

default400: #A1A1AA

primary500: #006FEE

success500: #17C964

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Alert, ConfigProvider } from '@fluxuijs/core'
import { darkTheme, lightTheme } from '@fluxuijs/theme'

const mode = ref<'light' | 'dark'>('light')
const activeTheme = computed(() => (mode.value === 'dark' ? darkTheme : lightTheme))
const tokenValues = computed(() => {
  const colors = activeTheme.value.tokens.colors
  return {
    default400: colors?.default?.[400] ?? '-',
    primary500: colors?.primary?.[500] ?? '-',
    success500: colors?.success?.[500] ?? '-',
  }
})

const toggleMode = () => {
  mode.value = mode.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <div class="doc-example-stack">
    <div class="demo-toolbar">
      <button class="demo-button" type="button" @click="toggleMode">
        切换到{{ mode === 'light' ? '暗色' : '亮色' }}主题
      </button>
      <span class="demo-tip">当前模式：{{ mode }}</span>
    </div>

    <ConfigProvider :theme="activeTheme">
      <div class="doc-example-stack">
        <Alert color="default" variant="solid">default400: {{ tokenValues.default400 }}</Alert>
        <Alert color="primary" variant="solid">primary500: {{ tokenValues.primary500 }}</Alert>
        <Alert color="success" variant="solid">success500: {{ tokenValues.success500 }}</Alert>
      </div>
    </ConfigProvider>
  </div>
</template>

API

Props

名称	类型	默认值	说明
theme	ConfigProviderProps['theme']	lightTheme	当前主题对象
prefix	string	DEFAULT_PREFIX (--fl)	CSS 变量名前缀
attribute	string	DEFAULT_ATTRIBUTE (fl-data-theme)	写入目标元素的主题属性名

类型定义

ConfigProviderProps=ApplyThemeOptions & { theme?: Theme }

ThemeContext={ theme: ComputedRef<Theme>; mode: ComputedRef<ThemeMode>; isDark: ComputedRef<boolean>; toggle: () => void; set: (theme: Theme) => void }

Slots

名称	说明
default	主题容器内部内容

Events

名称	说明
无	当前版本未定义 emits

Composable: useTheme

字段	类型	说明
theme	ComputedRef<Theme>	当前主题对象
mode	ComputedRef<'light' | 'dark'>	当前模式
isDark	ComputedRef<boolean>	是否暗色模式
toggle	() => void	在 light/dark 间切换
set	(theme: Theme) => void	设置指定主题

import { useTheme } from "@fluxuijs/core";

const { theme, mode, isDark, toggle, set } = useTheme();