THEMES / COLOUR MODE

System theme

Follow the visitor’s preferred colour scheme using native CSS colour-scheme.

Activate on the page

Only one theme value is needed. Default is the standard palette; Mono is optional. Add data-palette to choose another colour family; other component settings keep their shared defaults.

<html lang="en" data-theme="auto">
  <!-- Load reva.css in the head, then add your content. -->
</html>

Omitting data-theme also uses the system mode. When the device preference changes, supporting browsers update the palette without a script. The documentation theme menu changes this document only; it does not persist across navigation. Fixed theme values inside individual demos remain local overrides.

The same component markup

No theme attributes are repeated on the card, actions, badge or alert.

Your account

Surfaces, text, links and controls use this colour mode.

Active

Warning: Verify your email address.

<section class="stack" data-theme="auto" data-accent="teal">
  <article class="card">
    <h3>Your account</h3>
    <p>Surfaces, text, links and controls use this colour mode.</p>
    <p><span class="badge" data-variant="success">Active</span></p>
    <div class="row">
      <button type="button">Save changes</button>
      <button type="button" class="secondary">Cancel</button>
    </div>
  </article>
  <div class="alert" data-variant="warning">Warning: Verify your email address.</div>
</section>

Override one section

A nearer theme value changes this section while leaving its neighbours in the page mode.

A local colour mode

Other settings still inherit independently.

<section data-theme="dark">
  <article class="card">
    <h3>A local colour mode</h3>
    <p>Other settings still inherit independently.</p>
  </article>
</section>

Add glass independently

Load reva.glass.css after the core and add data-material="glass" to a parent. The theme remains auto. Styled text controls retain their normal backing.

Glass installation, coverage and fallback guide · Full-page colour preview · Full-page glass preview

Inspect the light and dark palette tokens. Both modes use the same shape, density and component defaults.