THEMES

Choose colours, then material

Default is the standard palette; Mono is optional. data-theme selects the colour mode; data-palette selects one of eight coordinated colour families. Optional data-material changes supported surfaces independently.

Compare Mono, Sand, Ocean, Cobalt, Citrus, Violet and Forest, with HTML examples.

Colour modes

Light

An explicitly light palette.

data-theme="light"

Dark

An explicitly dark palette.

data-theme="dark"

System

Follow the visitor’s preferred colour scheme.

data-theme="auto"

Material is independent

Both cards use a dark palette. Only the glass section changes its supported surfaces.

Solid material

The default surface is opaque.

Glass material

Load the optional glass stylesheet to activate this treatment.

HTMLSelect text to copy
<div class="grid" data-theme="dark">
  <article class="card">
    <h3>Solid material</h3>
    <p>The default surface is opaque.</p>
  </article>
  <section data-material="glass">
    <article class="card">
      <h3>Glass material</h3>
      <p>Load the optional glass stylesheet to activate this treatment.</p>
    </article>
  </section>
</div>

Veil material

A clear centre with diffused perimeter colour and two contained contours, without backdrop blur. Load reva.veil.css and set data-material="veil" on your shared parent.

Veil examples and API · Complete Veil website

Soft UI material

Raised opaque surfaces, inset text controls and pressed actions. Load reva.soft.css and set data-material="soft" on a shared parent.

Explore Soft UI

The same styling logic in every mode

Light and dark select different colour tokens, not different component APIs. Rounded shape, comfortable density, medium control size, subtle depth and gradient fill are the common omitted defaults. Change them once on html or on a scoped boundary.

See all supported defaults and values. Semantic meanings remain local: a warning alert can differ from a success badge inside the same theme.

Full-page previews

Existing previews remain available for exploration
ExampleLightDarkSystem
FoundationlightdarkSystem
Page defaultslightdarkSystem
NavigationlightdarkSystem
GlasslightdarkSystem