Scheme

The scheme= attribute forces a color scheme on any element. Apply to <html> or <body> for a global override, or to any container to create isolated light or dark regions.

scheme="dark"

The default aura scheme. Dark background (#0a0a0f) with light text.

Dark card

Default dark surface tokens

<div scheme="dark" style="padding: 1.5rem; border-radius: 12px;">
  <div surface="glass" density="spacious" radius="xl">
    <p weight="semibold">Dark card</p>
    <p text="caption">scheme="dark" — default</p>
  </div>
</div>

scheme="light"

Inverts surface tokens for a light background. All surfaces, inputs, and shadows adapt automatically.

Light card

Tokens inverted for light context

Light input

<div scheme="light" style="padding: 1.5rem; border-radius: 12px;">
  <div surface="glass" density="spacious" radius="xl">
    <p weight="semibold">Light card</p>
    <p text="caption">scheme="light" — inverted tokens</p>
  </div>
</div>

Side-by-side comparison

Dark

Card on dark

Light

Card on light

<div scheme="dark"  style="flex: 1; padding: 1rem; border-radius: 10px;">Dark</div>
<div scheme="light" style="flex: 1; padding: 1rem; border-radius: 10px;">Light</div>

Global usage

Apply to the root element to theme your entire page. Combine with a system preference check via prefers-color-scheme in CSS.

<!-- Force dark globally -->
<html scheme="dark">

<!-- Force light globally -->
<html scheme="light">

<!-- System preference (CSS only) -->
@media (prefers-color-scheme: light) {
  html { scheme: light; }     /* not real CSS — use JS or body attr */
}

/* OR just set the custom properties directly */
@media (prefers-color-scheme: light) {
  :root {
    --aura-color-primary:   #5b48e8;
    --aura-input-bg:        rgba(0,0,0,0.04);
    --aura-input-border:    rgba(0,0,0,0.14);
    background: #f8f8fc;
    color: #1a1a2e;
  }
}