ThemeProvider is a component that provides a theme to all the child components.
ThemeProvider
import { ThemeProvider } from '@lobehub/ui';Default
Custom Fonts
Default Fonts
Hello World
Custom Fonts
Hello World
APIs
| Name | Description | Type | Default |
|---|---|---|---|
| className | -- | string | -- |
| customFonts | Webfont loader css strings | string[] | -- |
| customStylish | -- | (theme:import("/node_modules/antd-style/lib/types/function").CustomStylishParams)=>{} | -- |
| customTheme | -- | {neutralColor?:any;primaryColor?:any} | -- |
| customToken | Custom extra token | (theme:import("/node_modules/antd-style/lib/types/function").CustomTokenParams)=>{} | -- |
| enableCustomFonts | -- | boolean | -- |
| enableGlobalStyle | -- | boolean | -- |
| style | -- | {} | -- |
| children | -- | ReactNode | -- |
| styled | -- | {ThemeContext:object;ThemeProvider?:(props:P,deprecatedLegacyContext?:any)=>|ReactElement} | -- |
| prefixCls | -- | string | -- |
| theme | 直接传入 antd 主题，或者传入一个函数，根据当前的主题模式返回对应的主题 | ThemeConfig|GetAntdTheme | -- |
| getStaticInstance | 从 ThemeProvider 中获取静态方法的实例对象 | (instances:import("/node_modules/antd-style/lib/factories/createThemeProvider/type").StaticInstance)=>void | -- |
| staticInstanceConfig | 静态方法的入参 | {message?:object;notification?:object} | -- |
| appearance | 应用的展示外观主题，默认提供亮色和暗色两种，用户可以自行扩展 | string | "light" |
| defaultAppearance | -- | string | -- |
| onAppearanceChange | -- | (appearance:string)=>void | -- |
| themeMode | 主题的展示模式，有三种配置：跟随系统、亮色、暗色 默认不开启自动模式，需要手动进行配置 | "light"|"dark"|"auto" | "light" |
| defaultThemeMode | -- | "light"|"dark"|"auto" | -- |
| onThemeModeChange | -- | (mode:import("/node_modules/antd-style/lib/types/appearance").ThemeMode)=>void | -- |