Card title
This is a sample card component to preview the theme colors.
Themes
µCSS ships with 20 color themes. Each theme is a single CSS file — just swap the <link> tag. Click a theme to preview it below.
Red
Pumpkin
Orange
Amber
Yellow
Lime
Green
Jade
Cyan
Azure
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Sand
Grey
Zinc
Slate
Preview #
Buttons
Outline
Card
Alerts
Primary alert message.
Secondary alert message.
Tertiary alert message.
Contrast alert message.
Spark alert message.
Accent alert message.
Pop alert message.
Success alert message.
Informational alert message.
Warning alert message.
Error alert message.
Form
Badges
Primary
Secondary
Tertiary
Contrast
Spark
Accent
Pop
Success
Info
Warning
Error
Progress
Color role mapping #
Each theme remaps the 11 color roles to different color families. Pop always derives from accent with lighter shades, and spark always derives from contrast with lighter shades.
| Theme | primary | secondary | tertiary | contrast | spark | accent | pop | success | info | warning | error |
|---|---|---|---|---|---|---|---|---|---|---|---|
| red | red | slate | sand | indigo | indigo | jade | jade | green | azure | amber | pink |
| pumpkin | pumpkin | slate | sand | violet | violet | jade | jade | green | cyan | amber | red |
| orange | orange | slate | sand | violet | violet | jade | jade | green | cyan | amber | red |
| amber | amber | slate | sand | purple | purple | jade | jade | green | cyan | yellow | red |
| yellow | yellow | slate | sand | purple | purple | jade | jade | green | cyan | amber | red |
| lime | lime | slate | sand | pink | pink | azure | azure | green | cyan | amber | red |
| green | green | slate | sand | blue | blue | pink | pink | jade | cyan | amber | red |
| jade | jade | slate | sand | violet | violet | pumpkin | pumpkin | green | cyan | amber | red |
| cyan | cyan | slate | sand | fuchsia | fuchsia | lime | lime | green | azure | amber | red |
| azure (default) | azure | slate | sand | fuchsia | fuchsia | lime | lime | green | cyan | amber | red |
| blue | blue | slate | sand | pink | pink | lime | lime | green | cyan | amber | red |
| indigo | indigo | slate | sand | pink | pink | lime | lime | green | cyan | amber | red |
| violet | violet | slate | sand | pumpkin | pumpkin | jade | jade | green | cyan | amber | red |
| purple | purple | slate | sand | pumpkin | pumpkin | jade | jade | green | cyan | amber | red |
| fuchsia | fuchsia | slate | sand | blue | blue | lime | lime | green | cyan | amber | red |
| pink | pink | slate | sand | azure | azure | lime | lime | green | cyan | amber | red |
| sand | sand | slate | grey | purple | purple | jade | jade | green | cyan | amber | red |
| grey | grey | slate | sand | violet | violet | orange | orange | green | cyan | amber | red |
| zinc | zinc | slate | grey | violet | violet | pumpkin | pumpkin | green | cyan | amber | red |
| slate | slate | grey | sand | pink | pink | lime | lime | green | cyan | amber | red |
Installation #
To use the selected theme, include the following in your HTML:
<link rel="stylesheet" href="https://unpkg.com/@digicreon/mucss/dist/mu.fuchsia.css">