简介#
可以获取到 ThemeProvider 下的主题外观模式。
用法#
/**
* inherit: true
* defaultShowCode: true
*/
import { Divider, Typography } from 'antd';
import { useThemeMode } from 'antd-style';
import { Flexbox } from 'react-layout-kit';
const { Text } = Typography;
export default () => {
const { themeMode, appearance, browserPrefers } = useThemeMode();
return (
<Flexbox horizontal align={'center'}>
<Text type={'secondary'}>主题模式：</Text>
{themeMode}
<Divider type={'vertical'} />
<Text type={'secondary'}>外观模式：</Text>
{appearance}
<Divider type={'vertical'} />
<Text type={'secondary'}>浏览器外观：</Text>
{browserPrefers}
</Flexbox>
);
};
API#
Typescript#
useThemeMode: () => ThemeContextState;
ThemeContextState#
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| browserPrefers | BrowserPrefers | light | 浏览器外观 |
| themeMode | ThemeMode | light | 主题模式 |
| appearance | ThemeAppearance | light | 显示外观 |
| isDarkMode | boolean | false | 是否为暗色模式 |
BrowserPrefers#
浏览器外观，仅为 dark 或者 light。
ThemeAppearance#
外观模式，为 dark 或者 light 或自定义的字符串。
ThemeMode#
主题模式，可以是 dark、light 或者 auto。