Theming

What is it?

Theming is a powerful and flexible method for controlling the visual look and feel of your application.

Themes - shadcn/ui

Themes are based on shadcn/ui themes, combining modern aesthetics with responsiveness, ease of use, and visual coherence.

Locale-Specific Theming

Locale-specific theming allows you to customize the application's appearance for different cultural preferences, providing a more relevant and engaging global user experience.

Dark Mode Theming

Dark mode theming allows you to create a customized user experience optimized for use in low-light conditions.

Colors

Type	CSS Variable	Applies to
Background	‑‑background	Layout pages background Drawers background Accordions background Alerts background Navbar 'inverted' variant header text Navbar icon
Foreground	‑‑foreground	Text
Primary	‑‑primary	Button hover background Input ring focus Carousel navigation buttons - Dark mode Checkbox ring
Primary Foreground	‑‑primary-foreground	Button hover text Cart quantity bubble text Badge default variant text color CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Secondary	‑‑secondary	Button background
Secondary Foreground	‑‑secondary‑foreground	Button text CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Destructive	‑‑destructive	Account: edit address alert Account: profile error Cart: promo code error Checkout: place order error Checkout: shipping error Product: add to cart error Product List: create error Destructive variant Button background Destructive variant Badge background Destructive variant Toast background
Destructive Foreground	‑‑destructive‑foreground	Destructive variant Button text Destructive variant Badge text Destructive variant Toast text CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Muted	‑‑muted	Footer background Skeleton background
Muted Foreground	‑‑muted‑foreground	Not-Found Page message text Ancestor breadcrumbs text Strikethrough pricing text Radio button selected inner ring Input placeholder text CMS-configurable text color in Footer MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Accent	‑‑accent	'ghost' variant Button hover background
Accent Foreground	‑‑accent‑foreground	Navbar icons hover Footer links animated underline hover Cart quantity button hover Cart shipping, delivery, payment button text hover Category links animated underline hover Mobile PDP Gallery buttons CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Border	‑‑border	Inactive product variant border Inactive radio button border Navbar category menu border Order totals border Cart drawer border and dividers

Fonts

Type	CSS Variable	Applies to
Font Heading	‑‑font‑heading	Drawer headings PDP heading Order Details heading Product Tile title Search Results heading Grid heading Carousel heading
Font Mono	‑‑font‑mono	Not currently used
Font Body	‑‑font‑body	All other text

Typography

Go here to learn more about typography theming.

Layout

Type	CSS Variable	Applies to
Button Radius	‑‑rounded-btn	Button
Button Padding Base	‑‑btn-base	Button with 'default' variant
Button Padding Small	‑‑btn-sm	Button with 'small' size variant Currently not in use
Button Padding Large	‑‑btn-lg	Button with 'large' size variant Clear All* (search filters) Apply* (search filters) *Restricted to vertical adjustment due to layout constraint