Custom Theme Demo

Demonstrates runtime CSS variable theming without Sass compilation. Switch themes to see how Bootstrap components adapt instantly.

Theme Picker

Each theme overrides --bs-primary, --bs-secondary, font family, and border radius via CSS variables.

Buttons

Buttons automatically use the overridden CSS variables.

Uses component-level CSS variables
Standard Card
Theme-Aware

This card uses Bootstrap's default styling with the current theme's border radius.

Action
Gradient Card
Custom Styled

Uses component-level CSS variables to create a gradient from primary to secondary colors.

Action
Primary Header
Colored Border

The border and header color adapt to the theme's primary color.

Action

Form Controls

Focus states use the theme's primary color.

Alerts

Alert variants with theme-aware subtle backgrounds.

Badges

Primary Secondary Success Warning Info

Progress Bars

Progress bar colors adapt to theme colors.

75%
50%
100%

CSS Variables Being Overridden

Variable Default Ocean Sunset Forest
--bs-primary #0d6efd #0077b6 #e76f51 #2d6a4f
--bs-secondary #6c757d #00b4d8 #f4a261 #40916c
--bs-border-radius 0.375rem 0.5rem 0 1rem
--bs-body-font-family system-ui Segoe UI Georgia Trebuchet MS