Color schemes

Pre-defined color combinations for backgrounds, text, and accents. Apply to any container to change its color context.

Available schemes

Each scheme sets --color-bg, --color-fg, and --color-accent for its descendants.

Code

<!-- Apply to any container -->
<section class="scheme-dark">...</section>
<div class="scheme-subtle">...</div>
<header class="scheme-accent">...</header>

<!-- Greyscale -->
<div class="scheme-black">...</div>
<div class="scheme-grey-900">...</div>
<div class="scheme-grey-100">...</div>

<!-- Brand colors -->
<div class="scheme-orange">...</div>
<div class="scheme-blue">...</div>
<div class="scheme-green">...</div>

<!-- Light variants -->
<div class="scheme-orange-light">...</div>
<div class="scheme-blue-light">...</div>

Dark mode adaptive schemes

Greyscale schemes

Brand color schemes