Overview
In this lesson, you'll learn how Chakra UI's theming system is structured and the different ways you can adapt it to your project or design system.
Key Takeaways
Chakra's theming system is powered by two main configurations - the defaultBaseConfig and the defaultThemeConfig.
The base config defines Chakra's core styling logic such as resets, utilities, and conditions.
The theme config adds design tokens, semantic tokens, and component recipes to bring your design system to life.
Three Main Theming Approaches in Chakra UI
-
Extend the Default Theme: The most common method which involes customizing tokens, colors, and fonts while retaining Chakra’s base styling logic.
-
Start from Scratch: Build your theme using
defaultBaseConfig. This is ideal for custom design systems that need total control. -
Eject the Theme: Use the CLI to scaffold the full default theme into your project for deep customization.
Core Functions for Theming
-
defineConfig(): defines your theme with TypeScript support. -
createSystem(): merges your custom theme with Chakra’s base config. -
defaultConfig/defaultBaseConfig: determines whether you’re extending or starting from scratch.