THEMES / PALETTES

Eight coordinated palettes

Default is the standard palette: white and black foundations with Blue Teal actions, links and main headings. Choose Mono, Sand, Ocean, Cobalt, Citrus, Violet or Forest once on a parent. Ordinary HTML and existing component hooks inherit the colours.

Choose the whole site's palette

data-theme controls light, dark or system mode. data-palette controls the colour family. Both are independent of material, shape and other shared settings.

<html lang="en" data-theme="auto" data-palette="ocean">
  <!-- Load reva.css; your ordinary HTML inherits the colours. -->
</html>

Omitting data-palette uses Default. Mono remains available for monochrome primary actions and links. Primary fills are #1F6E8C in light mode and #2E8A99 in dark mode; dark links use #65BBC7 for contrast. For scoped styling, choose the palette on the .reva boundary. Changing data-theme inside a palette changes the mode without resetting its colour family. Semantic success, warning and error colours retain their meanings, including in Mono.

The default action palette

Exact solid role fills, with foregrounds adapted to each mode. Secondary uses the existing class; semantic roles use the shared variant attribute.

light actions

dark actions

<div class="grid" data-palette="default" data-fill="solid">
  <section data-theme="light" class="card stack">
    <h3>light actions</h3>
    <div class="row">
      <button type="button">Primary</button>
      <button type="button" class="secondary">Secondary</button>
      <button type="button" data-variant="success">Success</button>
      <button type="button" data-variant="warning">Warning</button>
      <button type="button" data-variant="danger">Danger</button>
    </div>
  </section>
  <section data-theme="dark" class="card stack">
    <h3>dark actions</h3>
    <div class="row">
      <button type="button">Primary</button>
      <button type="button" class="secondary">Secondary</button>
      <button type="button" data-variant="success">Success</button>
      <button type="button" data-variant="warning">Warning</button>
      <button type="button" data-variant="danger">Danger</button>
    </div>
  </section>
</div>

Default — standard

The same markup in light and dark mode. No palette attributes are repeated on the components.

Default / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Default / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="default">
  <section data-theme="light">
    <article class="card stack">
      <h3>Default / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="default-light-name">Project name</label><input id="default-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Default / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="default-dark-name">Project name</label><input id="default-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Mono

The same markup in light and dark mode. No palette attributes are repeated on the components.

Mono / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Mono / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="mono">
  <section data-theme="light">
    <article class="card stack">
      <h3>Mono / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="mono-light-name">Project name</label><input id="mono-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Mono / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="mono-dark-name">Project name</label><input id="mono-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Sand

The same markup in light and dark mode. No palette attributes are repeated on the components.

Sand / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Sand / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="sand">
  <section data-theme="light">
    <article class="card stack">
      <h3>Sand / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="sand-light-name">Project name</label><input id="sand-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Sand / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="sand-dark-name">Project name</label><input id="sand-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Ocean

The same markup in light and dark mode. No palette attributes are repeated on the components.

Ocean / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Ocean / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="ocean">
  <section data-theme="light">
    <article class="card stack">
      <h3>Ocean / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="ocean-light-name">Project name</label><input id="ocean-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Ocean / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="ocean-dark-name">Project name</label><input id="ocean-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Cobalt

The same markup in light and dark mode. No palette attributes are repeated on the components.

Cobalt / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Cobalt / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="cobalt">
  <section data-theme="light">
    <article class="card stack">
      <h3>Cobalt / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="cobalt-light-name">Project name</label><input id="cobalt-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Cobalt / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="cobalt-dark-name">Project name</label><input id="cobalt-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Citrus

The same markup in light and dark mode. No palette attributes are repeated on the components.

Citrus / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Citrus / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="citrus">
  <section data-theme="light">
    <article class="card stack">
      <h3>Citrus / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="citrus-light-name">Project name</label><input id="citrus-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Citrus / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="citrus-dark-name">Project name</label><input id="citrus-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Violet

The same markup in light and dark mode. No palette attributes are repeated on the components.

Violet / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Violet / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="violet">
  <section data-theme="light">
    <article class="card stack">
      <h3>Violet / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="violet-light-name">Project name</label><input id="violet-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Violet / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="violet-dark-name">Project name</label><input id="violet-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Forest

The same markup in light and dark mode. No palette attributes are repeated on the components.

Forest / light

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

Forest / dark

Page colours, surfaces, borders, links and actions share this palette.

Explore the palette · New

Project name

Success Error

<div class="grid" data-palette="forest">
  <section data-theme="light">
    <article class="card stack">
      <h3>Forest / light</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="forest-light-name">Project name</label><input id="forest-light-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
  <section data-theme="dark">
    <article class="card stack">
      <h3>Forest / dark</h3>
      <p>Page colours, surfaces, borders, links and actions share this palette.</p>
      <p><a href="#activate">Explore the palette</a> · <span class="badge">New</span></p>
      <div class="row">
        <button type="button">Primary action</button>
        <button type="button" class="secondary">Secondary</button>
      </div>
      <div><label for="forest-dark-name">Project name</label><input id="forest-dark-name" placeholder="My project"></div>
      <p><span class="badge" data-variant="success" data-appearance="solid">Success</span> <span class="badge" data-variant="danger" data-appearance="solid">Error</span></p>
    </article>
  </section>
</div>

Local palettes and explicit overrides

A local palette installs a complete coordinated set. On the same element, explicit data-accent and data-tone override its primary and surface colours respectively. A nearer palette resets inherited colour overrides; unrelated settings continue inheriting.

Local Mono

Forest with warm surfaces

Links keep the Forest colour.

<section class="stack" data-palette="ocean">
  <button type="button">Inherited Ocean</button>
  <article class="card" data-palette="mono">
    <h3>Local Mono</h3>
    <button type="button">Mono action</button>
  </article>
  <article class="card" data-palette="forest" data-accent="violet" data-tone="warm">
    <h3>Forest with warm surfaces</h3>
    <p><a href="#activate">Links keep the Forest colour.</a></p>
    <button type="button">Explicit violet action</button>
  </article>
</section>

Use the same palette with glass

Load reva.glass.css after the core. Palette tokens feed the material; glass links use the palette's text foreground for stronger readability. Styled text inputs retain their normal backing.

Ocean glass

The material uses the parent palette surfaces.

<section data-palette="ocean" data-theme="dark" data-material="glass">
  <article class="card">
    <h3>Ocean glass</h3>
    <p>The material uses the parent palette surfaces.</p>
    <button type="button">Primary action</button>
  </article>
</section>