theming

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Component Token customization

Each component has its own Component Token that enables style customization without affecting other components. Component Tokens can override global tokens, and by default do not derive based on Seed Token. Starting in version 5.8.0, component tokens support an algorithm property to enable algorithm derivation.

Customize theme via ConfigProvider

Pass a theme object to the ConfigProvider component to customize Ant Design's design tokens. The theme object allows modification of the smallest elements that affect the theme, called Design Tokens, to present various themes or components.

Disable motion animations

To disable Ant Design's built-in interaction animations, set the motion property of token to false. This may be needed in extreme scenarios where animations affect page interaction performance.

Zero Runtime basic usage

To enable zero runtime mode, pass zeroRuntime: true in the theme config to ConfigProvider and manually import the CSS file. Example: <ConfigProvider theme={{ zeroRuntime: true }}><App /></ConfigProvider> with import 'antd/dist/antd.css' at the top of the file.

Zero Runtime static styles package

For zero runtime mode, antd/dist/antd.css contains all component styles but does not include hashed className. If you need fewer styles or cannot use defaults due to configuration changes like prefix, use the @ant-design/static-style-extract package to generate custom static styles.

Dynamic theme switching

In Ant Design v5, dynamically switching themes is simple. You can dynamically switch themes at any time through the theme property of ConfigProvider without any additional configuration.

Nested ConfigProvider for local themes

By nesting ConfigProvider components, you can apply local themes to specific parts of your page. Design Tokens that have not been changed in the child theme will inherit from the parent theme.

Using design tokens in Less preprocessing

To use design tokens with Less preprocessing framework, use less-loader with the modifyVars option to inject mapped tokens. Example configuration: { loader: 'less-loader', options: { lessOptions: { modifyVars: mapToken } } }

Theme API properties

The Theme object accepts these properties: token (AliasToken to modify Design Token), inherit (boolean, default true to inherit parent ConfigProvider theme), algorithm (function or array of functions to modify theme algorithms, default defaultAlgorithm), components (ComponentsConfig for component-specific customization), cssVar (CSS Variables Configuration), hashed (boolean, default true for hash className patches), zeroRuntime (boolean, default false, version 6.0.0+).

cssVar configuration for CSS variables

The cssVar option in Theme accepts prefix (string, defaults to 'ant', same as prefixCls on ConfigProvider) and key (string, unique key for current theme, defaults to useId in React 18). These configure CSS variable generation for the theme.

Component algorithm property in version 5.8.0+

In Ant Design version 5.8.0 and later, component tokens support an algorithm property. This allows individual components to use algorithms for token derivation, overriding the default behavior where component tokens only override global tokens without derivation.

Combining multiple algorithms

Ant Design algorithms can be used alone or combined in any combination. For example, dark and compact algorithms can be combined to get a dark and compact theme by passing an array of algorithms: algorithm: [darkAlgorithm, compactAlgorithm].

CSS-in-JS theming enhancements in v5

Since Ant Design v5.0, the new CSS-in-JS approach for theming provides enhanced capabilities including dynamic theme switching, multiple themes support, customizing theme variables for specific components, and other advanced features beyond the less and CSS variables approach of v4.x.

antd overrides global styles

antd is designed to help develop a complete background application and overrides some global styles for styling convenience. These overrides cannot currently be removed or changed. To avoid modifying global styles, follow instructions in the customize-theme documentation.

Fix dynamic styles with Content Security Policy

To fix dynamic styles while using Content Security Policy (CSP), configure nonce through ConfigProvider's CSP prop.

Date component internationalization locale not working

When date component internationalization is not working, ensure dayjs locale is properly configured. Import the locale file and set dayjs.locale('zh-cn'). Check for conflicting dayjs versions using npm ls dayjs. If antd's dayjs version is incompatible with your project's dayjs version (semver mismatch), it will use different dayjs instances causing internationalization to fail.

Default language is English, how to switch to Chinese

Use the ConfigProvider component to wrap your application and set the locale. If date components' internationalization is not working after setting ConfigProvider locale, configure dayjs.locale('zh-cn') and verify that your local dayjs version matches the version antd depends on.

ConfigProvider prefixCls causes message/notification/Modal.confirm styling loss

Static methods like message.confirm, notification.open, and Modal.confirm render separately from ConfigProvider's context tree. Two solutions: (1) Use hook versions like message.useMessage, notification.useNotification, Modal.useModal which respect ConfigProvider context, or (2) Use App.useApp to call message, notification, and modal instance methods.

Disable component animations

To disable animations, use the motion token in ConfigProvider theme configuration: <ConfigProvider theme={{ token: { motion: false } }}><App /></ConfigProvider>

SSR server-side rendering support

For server-side rendering support with Ant Design, refer to the dynamic theme documentation section on server-side rendering.

Overlay components mask blur defaults changed in v6.3.0

v6 introduces mask overlay option with blur effect support. In v6.0.0 – v6.2.x, blur was enabled by default for Modal, Drawer and similar overlay components. Starting from v6.3.0, blur is disabled by default. To enable blur, configure it via ConfigProvider: modal={{ mask: { blur: true } }} and drawer={{ mask: { blur: true } }}.

Custom theme CSS extraction for SSR

To extract CSS with a custom theme for SSR, use extractStyle from @ant-design/static-style-extract and wrap the node parameter with ConfigProvider specifying your custom theme tokens, such as colorPrimary.

Mixed theme CSS extraction for SSR

To extract CSS with multiple themes for SSR, wrap the node parameter with multiple ConfigProvider instances, each with different theme token configurations. Each ConfigProvider can be nested to create theme variations.

Generate themed Ant Design CSS with ConfigProvider

To generate CSS for custom or mixed themes, wrap the node passed to extractStyle() with ConfigProvider components. For a single custom theme, use ConfigProvider with a theme object containing token properties like colorPrimary. For mixed themes, wrap the node with multiple ConfigProvider instances, each with different theme tokens. The extractStyle function accepts a callback that receives the node and returns JSX with the wrapped components.

Mixed theme CSS generation example

To generate CSS for mixed themes, pass a function to extractStyle that wraps the node with multiple ConfigProvider instances. Example: extractStyle((node) => (<> <ConfigProvider theme={{token: {colorBgBase: 'green'}}}>{node}</ConfigProvider> <ConfigProvider theme={{token: {colorPrimary: 'blue'}}}> <ConfigProvider theme={{token: {colorBgBase: 'red'}}}> {node} </ConfigProvider> </ConfigProvider> </>))

Customizing Ant Design theme in Farm with ConfigProvider

Customize Ant Design theme by wrapping components with ConfigProvider and passing a theme object with design tokens. Example: <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}><Button type="primary">Button</Button></ConfigProvider>

Pages Router theme configuration setup

For Next.js Pages Router custom theming, create theme/themeConfig.ts with ThemeConfig type from antd. Example: `import type { ThemeConfig } from 'antd'; const theme: ThemeConfig = { token: { fontSize: 16, colorPrimary: '#52c41a', }, }; export default theme;`

Creating a theme configuration file for Next.js Pages Router

Create a theme configuration file at `theme/themeConfig.ts` to customize antd theme settings. The file should export a `ThemeConfig` object. Example: `import type { ThemeConfig } from 'antd'; const theme: ThemeConfig = { token: { fontSize: 16, colorPrimary: '#52c41a', }, }; export default theme;`

Applying custom theme in Next.js Pages Router _app.tsx

Modify `pages/_app.tsx` to wrap your application with `ConfigProvider` from antd and pass your custom theme configuration. Example: `import React from 'react'; import { ConfigProvider } from 'antd'; import type { AppProps } from 'next/app'; import theme from './theme/themeConfig'; const App = ({ Component, pageProps }: AppProps) => (<ConfigProvider theme={theme}><Component {...pageProps} /></ConfigProvider>); export default App;`

Configure theme with ConfigProvider in Rsbuild

Customize the Ant Design theme in an Rsbuild project using ConfigProvider with the theme prop, specifying design tokens like colorPrimary: <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}><MyApp /></ConfigProvider>.

Configure antd theme with ConfigProvider in Rsbuild

To customize the antd theme in a Rsbuild project, wrap your app with ConfigProvider and pass a theme object: <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}><MyApp /></ConfigProvider>. Refer to the customize-theme documentation for more theme configuration options.

Dark mode color application approach

Color application in dark mode is based on 12 sets of basic color palettes, combined with transparency rules, to allow colors to blend better in different background environments.

Dark mode color palette generation tool

Ant Design provides a dark color palette generation tool that requires selection of the primary color and page background color, which generates a complete dark mode color palette.

Give your agent this brain