Ant Design
Overview
Ant Design is an enterprise-grade React UI library developed by Alibaba. It provides a comprehensive set of high-quality components following a consistent design language aimed at enterprise products. Theming is driven by a typed ThemeConfig object applied through ConfigProvider, which uses CSS-in-JS to inject styles at runtime. No CSS variables or global stylesheets required.
Project Files
| File | Purpose |
|---|---|
antdTheme.ts | Defines antdLightTheme and antdDarkTheme (ThemeConfig) |
AntdThemeProvider.tsx | Wraps with AntdRegistry + ConfigProvider; handles SSR cookie sync |
Configuration
Theme
Ant Design reads from tokens.ts. Two ThemeConfig objects are defined for light / dark modes:
import { tokens } from "@/styles/_generated/tokens";
export const antdLightTheme: ThemeConfig = {
token: {
colorPrimary: tokens.light.colorPrimary,
colorBgBase: tokens.light.colorBackground,
colorTextBase: tokens.light.colorForeground,
borderRadius: tokens.radiusBase.number,
},
};
export const antdDarkTheme: ThemeConfig = {
algorithm: theme.darkAlgorithm,
token: {
colorPrimary: tokens.dark.colorPrimary,
colorBgBase: tokens.dark.colorBackground,
},
};Light & Dark Mode
AntdThemeProvider reads the resolved theme from next-themes and passes either
antdLightTheme or antdDarkTheme to ConfigProvider.
export const AntdThemeProvider = ({ children, initialTheme }) => {
const { resolvedTheme } = useNextTheme();
const isDark = (resolvedTheme ?? initialTheme) === "dark";
useEffect(() => {
document.cookie = `theme-resolved=${resolvedTheme}...`;
}, [resolvedTheme]);
return (
<AntdRegistry>
<StyleProvider layer>
<ConfigProvider theme={isDark ? antdDarkTheme : antdLightTheme}>
{children}
</ConfigProvider>
</StyleProvider>
</AntdRegistry>
);
};Initial Cookie Read
To avoid a flash on first load, layout.tsx reads a theme-resolved cookie server-side before serving the page.
// layout.tsx (server)
const cookieStore = await cookies();
const initialTheme =
cookieStore.get("theme-resolved")?.value === "dark" ? "dark" : "light";See Pain Points: SSR Flicker for details.
Components
All Ant Design components work exactly as documented. The ThemeConfig applied via ConfigProvider ensures every component automatically inherits the correct colors, border radius, and typography.