Theme Builder

Build a scoped Bootstrap theme from palette colors or from the app defaults.

Bootstrap Source Colors

Bootstrap component preview

Controls in context

Theme roles below are applied to standard Bootstrap components so color choices can be judged against real UI states.

Text contrast AA

Navbars

Buttons

Forms

Email address

Form text, placeholder, and borders use theme roles.

Example select

Example textarea

Example range

Checked checkbox

Selected radio

Checked switch

Tables

Type	Status	Use
Active	Live	Selected row
Default	Draft	Normal row
Success	Pass	Positive state
Warning	Review	Attention state
Danger	Fail	Error state

Navs

Indicators

Primary. A simple primary alert.

Success. A simple success alert.

Warning. A simple warning alert.

Danger. A simple danger alert.

Primary Secondary Success Danger Warning Info

25%

Cards

Header

Default card title

Card surfaces, borders, links, and muted copy are all themed.

Card link

Footer

Header

Primary card title

Context cards show foreground contrast on color roles.

Secondary card

Secondary fills should stay readable and distinct.

Light card

Light cards preview the shell-adjacent surface.

Dark card

Dark cards use the generated near-black role.

Border card

Border-only cards show outlines without color fills.

List Groups

Cras justo odio 14 Dapibus ac facilisis in Morbi leo risus Disabled item

Accordion body text previews panel and body color roles.

Collapsed states inherit border and control colors.

Dialogs

Hello, world! This is a toast message.

Saved palettes