Magenta dark theme

Background and text colors

Each semantic color includes lightest, lighter, light, base, dark, darker and darkest tokens. White and black remain the global contrast extremes.

Primary dark text

<div class="bg-primary p-3">Primary background</div>
<p class="text-primary-dark">Primary dark text</p>

Transparent backgrounds

These utilities change only the background color and preserve the current text color.

<div class="bg-transparent p-3">Transparent background</div>
<div class="bg-scrim text-white p-3">Scrim background</div>
<div class="bg-media-scrim text-white p-3">Media scrim background</div>

Buttons by color

<button type="button" class="bg-primary">primary</button>
<button type="button" class="bg-accent">accent</button>
<button type="button" class="bg-info">info</button>
<button type="button" class="bg-success">success</button>
<button type="button" class="bg-warning">warning</button>
<button type="button" class="bg-danger">danger</button>
<button type="button" class="bg-default">default</button>

Form fields by color

<fieldset data-field="primary">
  <label for="primary-field">primary field</label>
  <input id="primary-field" name="primary-field" type="text" aria-describedby="primary-field-help">
  <small id="primary-field-help">Uses the primary theme color.</small>
</fieldset>
<fieldset data-field="accent">
  <label for="accent-field">accent field</label>
  <input id="accent-field" name="accent-field" type="text" aria-describedby="accent-field-help">
  <small id="accent-field-help">Uses the accent theme color.</small>
</fieldset>
<fieldset data-field="info">
  <label for="info-field">info field</label>
  <input id="info-field" name="info-field" type="text" aria-describedby="info-field-help">
  <small id="info-field-help">Uses the info theme color.</small>
</fieldset>
<fieldset data-field="success">
  <label for="success-field">success field</label>
  <input id="success-field" name="success-field" type="text" aria-describedby="success-field-help">
  <small id="success-field-help">Uses the success theme color.</small>
</fieldset>
<fieldset data-field="warning">
  <label for="warning-field">warning field</label>
  <input id="warning-field" name="warning-field" type="text" aria-describedby="warning-field-help">
  <small id="warning-field-help">Uses the warning theme color.</small>
</fieldset>
<fieldset data-field="danger">
  <label for="danger-field">danger field</label>
  <input id="danger-field" name="danger-field" type="text" aria-describedby="danger-field-help">
  <small id="danger-field-help">Uses the danger theme color.</small>
</fieldset>
<fieldset data-field="default">
  <label for="default-field">default field</label>
  <input id="default-field" name="default-field" type="text" aria-describedby="default-field-help">
  <small id="default-field-help">Uses the default theme color.</small>
</fieldset>

Interactive color states

<button type="button" class="bg-primary-dark hover:bg-primary active:bg-primary-light">Background states</button>
<input aria-label="Color focus example" class="p-3 text-primary-dark focus:text-primary" value="Focus this field">

Compile a theme from one color

The Sass theme module derives every semantic family, weight, foreground and progress color from one opaque primary. Every base uses its lightest family token as foreground. The compiler accepts an OKLCH primary lightness from 42% through 56% and a contrast ratio of at least 4.5:1 for that pair. The compiled theme loads after dragonglass.css.

@use "pkg:dragonglass/theme" as dragonglass;

:root {
  @include dragonglass.tokens(#7c3aed);
}

bunx sass --pkg-importer=node theme.scss theme.css --style=compressed

A theme selector around each mixin call lets one stylesheet contain several themes.

@use "pkg:dragonglass/theme" as dragonglass;

[data-theme="violet"] {
  @include dragonglass.tokens(#7c3aed);
}

[data-theme="forest"] {
  @include dragonglass.tokens(#167c55);
}

Automatic dark mode

Each theme derives dark structural roles from the same primary and follows prefers-color-scheme automatically. The data-color-scheme attribute on the root element forces light or dark mode.

<html data-color-scheme="dark"></html>

Color tokens

Semantic custom properties expose token values directly as an alternative to generated color utility classes.

<div style="background-color: var(--primary); color: var(--primary-darker)">
  Primary token preview
</div>