Last updated
We’re excited to introduce full Custom Theme support — giving you complete control over the visual design of your projects.
Theme Config Basics
You can now define your design system using a centralized theme config file. This includes:
- Color palettes: Set primary, secondary, background, and surface colors.
- Typography: Customize font families, weights, sizes, and line-heights.
- Spacing: Define spacing tokens for consistent layout control.
- Radius & borders: Apply border radii and strokes across components.
Themes are structured, versionable, and live in your repo — making it easy to reuse or extend them across multiple sites or workspaces.
Scoped or Global
Themes can be applied:
- Globally to your entire site.
- Scoped to specific sections, pages, or components.
- Switched dynamically at runtime via a theme picker.
This makes it simple to support light/dark modes, customer branding, or white-labeled layouts.
Developer Experience
- Built-in schema validation to catch errors early.
- Autocomplete support in most editors.
- Optional TypeScript definitions for strongly typed themes.
Use Cases
- Build a client site with their exact brand guidelines.
- Switch themes for seasonal campaigns or product launches.
- Enable your team to collaborate with shared design tokens.
This update gives developers and designers a shared language to work from — flexible enough for rapid prototyping, powerful enough for production.