Add the copied CSS to your global stylesheet and set the generated data-theme value on the target element. Base style and theme setup

Theme Builder

Theme Builder
Theme Builder

Overview

Live theme structure summary.

My Custom Theme

Based on default

Tokens

53

Colors

39

Changed

0

Light modeDual modePreset clean

Accent Quick Switch

Apply a derived accent family from a single color.

Current accent

hsl(221 83% 53%)

Token Catalog

Search, filter, and edit token groups.

0 changed
Surface#ffffff
Surface Raised#ffffff
Surface Overlay#ffffff
Surface Input#edf0f3
Surface Input Hover#e3e9ed
Surface Inset#000000
Accent
Base
Hover
Active
Subtle
FG

My Custom Theme

default preset

LightDual mode0 changed
DefaultSuccessWarningErrorInfo

Info

Information message

Success

Operation completed

Warning

Please review

Error

Something went wrong

Card Title

Card content with secondary text color. This demonstrates surface, border, and shadow tokens.