THEMES / PALETTES

2 coordinated palettes

Default is the standard palette: white and black foundations with Blue Teal actions, links and main headings. Available alternatives: Mono. Choose 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="default">
  <!-- Load reva.css; your ordinary HTML inherits the colours. -->
</html>

Only Default and Mono are built in. The other experimental palettes have been removed from the source preview. Replace their names with Default, Mono or your own CSS palette before upgrading. Published 1.2.1 archives keep their original palettes.

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.

Create your own palette

The built-in palettes are starting points. Define your own name and tokens in ordinary CSS, loaded after RevaCSS. This complete template starts from Default; replace its colours with your brand colours.

<html lang="en" data-theme="auto" data-palette="my-brand">
  <head>
    <link rel="stylesheet" href="reva.css">
    <link rel="stylesheet" href="my-brand.css">
  </head>
  <!-- Your page -->
</html>

/* my-brand.css */
@layer re.tokens {
  :where([data-palette="my-brand"], :scope[data-palette="my-brand"]) {
    --re-text: light-dark(#111111, #F5F5F5);
    --re-line: light-dark(#D4D4D4, #414141);
    --re-link: light-dark(#1F6E8C, #65BBC7);
    --re-muted: light-dark(#4C4C4C, #BEBEBE);
    --re-control-line: light-dark(#7C7C7C, #929292);
    --re-secondary: light-dark(#4B5563, #BFC8CD);
    --re-secondary-end: light-dark(#3D4652, #CDD5D9);
    --re-on-secondary: light-dark(#FFFFFF, #111111);
    --re-secondary-link: light-dark(#4B5563, #BFC8CD);
    --re-success: light-dark(#256B4E, #78B99B);
    --re-success-end: light-dark(#1D573F, #8EC9AD);
    --re-on-success: light-dark(#FFFFFF, #111111);
    --re-danger: light-dark(#A63D4F, #D98B97);
    --re-danger-end: light-dark(#8C3041, #E39EAA);
    --re-on-danger: light-dark(#FFFFFF, #111111);
    --re-danger-link: light-dark(#A63D4F, #D98B97);
    --re-warning: light-dark(#E6BC63, #E6BC63);
    --re-warning-end: light-dark(#D5A94E, #F0CB7C);
    --re-on-warning: light-dark(#111111, #111111);
    --re-palette-muted: light-dark(#4C4C4C, #BEBEBE);
    --re-palette-link: light-dark(#1F6E8C, #65BBC7);
    --re-palette-control-line: light-dark(#7C7C7C, #929292);
  }
  :where([data-palette="my-brand"]:not([data-tone]:not([data-tone="default"]))) {
    --re-bg: light-dark(#FAFAFA, #101010);
    --re-surface: light-dark(#FFFFFF, #191919);
    --re-surface-alt: light-dark(#EDEDED, #292929);
  }
  :where([data-palette="my-brand"]:not([data-accent]:not([data-accent="default"]))) {
    --re-primary: light-dark(#1F6E8C, #2E8A99);
    --re-primary-end: light-dark(#195E78, #57ACB8);
    --re-on-primary: light-dark(#FFFFFF, #111111);
  }
}

In Customize → Colours → Palette → Custom, choose primary, secondary, background and text colours separately for light and dark mode. Changing a foundation regenerates supporting colours for that mode. Advanced colours give you control over every token, including status colours, gradient ends and text on buttons. Choices are saved across documentation and demo pages when browser storage is available.

Export or copy the palette CSS and load it after RevaCSS. The editor exports data-palette="custom"; rename the selector to use a brand name, and use the same name in your HTML. Downloaded starting HTML includes the palette. Exported colours, materials and theme switching run entirely in CSS; the editor's JavaScript is only for the demo.

Keep the three --re-palette-* aliases alongside their matching colours: material boundaries use them to restore links, muted text and control borders. The token layer lets material and accessibility rules take priority. Explicit surface tone and accent settings can override their corresponding palette colours. Contrast feedback checks solid colour pairs in both modes, including gradient endpoints; inspect the rendered gradient and translucent materials in their actual surroundings.

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>

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

Mono with warm surfaces

Links keep the Mono colour.

<section class="stack" data-palette="default">
  <button type="button">Inherited Default</button>
  <article class="card" data-palette="mono">
    <h3>Local Mono</h3>
    <button type="button">Mono action</button>
  </article>
  <article class="card" data-palette="mono" data-accent="violet" data-tone="warm">
    <h3>Mono with warm surfaces</h3>
    <p><a href="#activate">Links keep the Mono 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.

Default glass

The material uses the parent palette surfaces.

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