Ant Design StyleAnt Design Style
Quick Start
Best Practices
API Reference
Release Notes
⌘ K

Table of Contents

Introduction
Usage
API
Typescript
ThemeContextState
BrowserPrefers
ThemeAppearance
ThemeMode
Creating Styles
createStyles
🚧 createStylish
createGlobalStyle
Container Components
ThemeProvider
StyleProvider
Hooks
useTheme
useThemeMode
useResponsive
Advanced Settings
🚧 setupStyled
createInstance

useThemeMode

Obtain the theme appearance mode under ThemeProvider.
引入方法
js
import { useThemeMode } from 'antd-style';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
编辑文档
PREV
useTheme
NEXT
useResponsive

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2024
Made with ❤️ by 蚂蚁集团 - AFX & 数字科技
‌
‌
‌
‌

Introduction

Obtain the theme appearance mode under ThemeProvider.

Usage

API

Typescript

ts

ThemeContextState

ParameterTypeDefaultDescription
browserPrefersBrowserPreferslightBrowser appearance
themeModeThemeModelightTheme mode
appearanceThemeAppearancelightDisplay appearance
isDarkModebooleanfalseWhether it is dark mode

BrowserPrefers

Browser appearance, only dark or light.

ThemeAppearance

Appearance mode, can be dark, light, or a custom string.

ThemeMode

Theme mode, can be dark, light, or auto.

index.tsx
tsx
Theme Mode:auto
Appearance Mode:light
Browser Appearance:light