Customize

Color

felt-css keeps Bootstrap's colour meanings and dyes them like wool: denim, taupe, moss, tomato, mustard and petrol. Every colour is a custom property you can re-dye.

View page source on GitHub

On this page

Theme colors#

Like Bootstrap, felt-css has eight theme colours with the usual meanings. Their tones are chosen to look good as felt and work flat too.

Primary · denim

Secondary · taupe

Success · moss

Danger · tomato

Warning · mustard

Info · petrol

Light

Dark

<div class="row row-cols-2 row-cols-md-4 g-3">
  <div class="col"><div class="p-3 rounded text-bg-primary">Primary · denim</div></div>
  <div class="col"><div class="p-3 rounded text-bg-secondary">Secondary · taupe</div></div>
  <div class="col"><div class="p-3 rounded text-bg-success">Success · moss</div></div>
  <div class="col"><div class="p-3 rounded text-bg-danger">Danger · tomato</div></div>
  <div class="col"><div class="p-3 rounded text-bg-warning">Warning · mustard</div></div>
  <div class="col"><div class="p-3 rounded text-bg-info">Info · petrol</div></div>
  <div class="col"><div class="p-3 rounded text-bg-light">Light</div></div>
  <div class="col"><div class="p-3 rounded text-bg-dark">Dark</div></div>
</div>

Each colour comes as a small family of tokens, Bootstrap's *-bg-subtle, *-border-subtle and *-text-emphasis included:

Token	Use	Classes that use it
`--primary`	The fill: buttons, badges, progress bars, active items	`.btn-primary`, `.bg-primary`, `.text-bg-primary`
`--primary-ink`	Text on the fill, at least 4.5:1	`.text-bg-primary`, `.btn-primary`
`--primary-subtle`	A tint of the fill on the current surface	`.bg-primary-subtle`, `.alert-primary`
`--primary-border-subtle`	A border on that tint	`.border-primary-subtle`
`--primary-emphasis`	Text on the tint, at least 4.5:1	`.text-primary-emphasis`, `.alert-primary`
`--primary-text`	Coloured text directly on the page	`.text-primary`, `.link-primary`

The same tokens exist for secondary, success, danger, warning, info, light and dark (light and dark have no -text).

Palette#

The theme colours point at a small palette of wool dyes:

--denim

--taupe

--moss

--tomato

--mustard

--petrol

--navy

<div class="row row-cols-2 row-cols-md-4 g-3 small">
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--denim)">--denim</div></div>
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--taupe)">--taupe</div></div>
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--moss)">--moss</div></div>
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--tomato)">--tomato</div></div>
  <div class="col"><div class="p-3 rounded" style="background: var(--mustard); color: #3a2a06">--mustard</div></div>
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--petrol)">--petrol</div></div>
  <div class="col"><div class="p-3 rounded text-white" style="background: var(--navy)">--navy</div></div>
</div>

Light and dark#

Theme tokens are written as light-dark(light, dark). Dark mode mutes the fills a little, so they glare less and white ink stays readable:

:root {
  --primary: light-dark(var(--denim), #385c93);
  --primary-ink: #fff;
  --primary-emphasis: light-dark(#26406a, #a9c4ee);
}

Tints (*-subtle, *-border-subtle) are mixed from the fill and the current surface with color-mix(), so they follow the theme without a second value.

Re-dyeing#

To change a colour, override its tokens in your own stylesheet. There's no build step: the whole sheet — buttons, alerts, focus rings, the felt patches — takes the new dye.

:root {
  --primary: light-dark(#7a3d8f, #6c3780);       /* heather instead of denim */
  --primary-ink: #fff;
  --primary-emphasis: light-dark(#4d2259, #dcb5e8);
  --primary-text: light-dark(#7a3d8f, #cfa2df);
  --link: light-dark(var(--primary), #cfa2df);
}

Keep *-ink and *-emphasis readable when you change a fill: felt-css aims for at least 4.5:1 contrast for text on fills and on tints, in both modes.

Surfaces and text#

Neutral colours are tokens too. See CSS variables for the full list.

--body-bg page

--surface cards, fields

--surface-sunk wells, code

--surface-raised raised

--surface-overlay menus, modals

--field inputs

<div class="row row-cols-1 row-cols-md-3 g-3 small">
  <div class="col"><div class="p-3 rounded border" style="background: var(--body-bg)"><code>--body-bg</code> page</div></div>
  <div class="col"><div class="p-3 rounded border" style="background: var(--surface)"><code>--surface</code> cards, fields</div></div>
  <div class="col"><div class="p-3 rounded border" style="background: var(--surface-sunk)"><code>--surface-sunk</code> wells, code</div></div>
  <div class="col"><div class="p-3 rounded border" style="background: var(--surface-raised)"><code>--surface-raised</code> raised</div></div>
  <div class="col"><div class="p-3 rounded border" style="background: var(--surface-overlay)"><code>--surface-overlay</code> menus, modals</div></div>
  <div class="col"><div class="p-3 rounded border" style="background: var(--field)"><code>--field</code> inputs</div></div>
</div>