Cornerstone themes apply a cohesive look and feel across the entire library, built from stackable layers — a theme, a color palette, variants, and a light or dark color scheme — that you mix and match with classes on the <html> element.
Try it live! Use the Theme and Color Scheme selectors in this site’s header to preview themes or switch light/dark modes.
Key Concepts
Themes
.cs-theme-{name}
A theme is the overall look — fonts, borders, space, shadows, and how each variant gets used across components. Two themes can share a palette and variants and still feel completely different. Themes ship with a default palette and may include custom CSS overrides for individual components.
Your theme is determined by class="cs-theme-{name}" on the <html> element. If no class is specified, the default theme is used.
Browse Built-in Themes
Color Palettes
.cs-palette-{name}
A color palette is the full set of 10 hues — red, orange, yellow, green, cyan, blue, indigo, purple, pink, and gray — each with 11 tints from 05 (darkest) to 95 (lightest), all available as color design tokens.
Each palette has its own hue shifts and chroma, so swapping palettes changes the entire feel of your project — especially alongside a theme and variant colors. Your palette is determined by class="cs-palette-{name}" on the <html> element; if no class is specified, the default palette is used.
Lemon
--cs-color-lemon-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Yellow
--cs-color-yellow-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Orange
--cs-color-orange-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Vermilion
--cs-color-vermilion-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Rose
--cs-color-rose-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Pink
--cs-color-pink-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Cerise
--cs-color-cerise-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Ruby
--cs-color-ruby-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Sky
--cs-color-sky-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Cyan
--cs-color-cyan-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Turquoise
--cs-color-turquoise-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Navy
--cs-color-navy-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Mint
--cs-color-mint-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Green
--cs-color-green-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Moss
--cs-color-moss-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Olive-drab
--cs-color-olive-drab-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Gray
--cs-color-gray-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Graphite
--cs-color-graphite-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Purple
--cs-color-purple-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Browse All Palettes
Variants
.cs-{variant}-{hue}
Variants assign palette hues to semantic roles — brand, neutral, success, warning, and danger among them — so components like buttons and callouts can convey meaning through color. Any hue from your palette can be assigned to any variant with class="cs-{variant}-{hue}". Apply the class to the <html> element to set variants globally, to a wrapper to scope them to one section, or to a single component to override just that element. For deeper customization, override the --cs-color-{variant}-* tokens in your own CSS.
Brand
--cs-color-brand-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Neutral
--cs-color-neutral-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Success
--cs-color-success-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Warning
--cs-color-warning-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Danger
--cs-color-danger-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
See Variant Tokens
Light and Dark Mode
.cs-light.cs-dark
Every theme is designed to adapt to light and dark mode. Light mode applies by default; apply class="cs-light" or class="cs-dark" to set the color scheme on the page or on any section. Because the classes cascade, a dark page can hold a light section, and the components inside each pick up the scheme around them.
Light
Whipped creamHershey's KissesJelly beans
Make Waffles
Dark
Whipped creamHershey's KissesJelly beans
Make Waffles
<divclass="cs-grid"><cs-cardclass="cs-light"><divslot="header"class="cs-split cs-color-text-quiet"><h4class="cs-heading-s">Light</h4><cs-iconname="sunny"></cs-icon></div><divclass="cs-stack"><cs-inputlabel="# of Waffles"type="number"value="3"></cs-input><cs-selectlabel="Toppings"multiplevalue="jelly-beans"><cs-optionvalue="whipped-cream">Whipped cream</cs-option><cs-optionvalue="hershey">Hershey's Kisses</cs-option><cs-optionvalue="jelly-beans">Jelly beans</cs-option></cs-select><cs-buttonappearance="filled"variant="brand"><cs-iconslot="start"name="grid_on"></cs-icon>
Make Waffles
</cs-button></div></cs-card><cs-cardclass="cs-dark"><divslot="header"class="cs-split cs-color-text-quiet"><h4class="cs-heading-s">Dark</h4><cs-iconname="dark_mode"></cs-icon></div><divclass="cs-stack"><cs-inputlabel="# of Waffles"type="number"value="3"></cs-input><cs-selectlabel="Toppings"multiplevalue="jelly-beans"><cs-optionvalue="whipped-cream">Whipped cream</cs-option><cs-optionvalue="hershey">Hershey's Kisses</cs-option><cs-optionvalue="jelly-beans">Jelly beans</cs-option></cs-select><cs-buttonappearance="filled"variant="brand"><cs-iconslot="start"name="grid_on"></cs-icon>
Make Waffles
</cs-button></div></cs-card></div>
Using Themes
Load the theme’s stylesheet, then put its class on the <html> element. The snippets below cover each way of loading it.
npmSelf-Hosted
After installing @cruglobal/cornerstone-components, import the theme's stylesheet:
