Theme Palettes

The colors of every theme in both modes, and how to use them: classes, CSS variables and scripts.

Current theme Businesslight

The colors of the theme and mode chosen in the header. Change the theme or the mode there, and the swatches follow. Click a name, a class or a HEX value to copy it.

Brand

Primary

Primary subtle

Primary emphasis

Link

Alternate

Status

Secondary

Success

Info

Warning

Danger

Light

Dark

Focus

Tertiary

Surfaces

Page

Surface

Secondary surface

Tertiary surface

Border

Text

Body text

Secondary text

Tertiary text

Gradients

Primary

Success

Info

Warning

Danger

Dark

All themes

Light Dark

Every theme side by side, collected from the theme sources. Each swatch stands on the surface of its own theme, so translucent colors look as they do there. Click a swatch to copy its HEX value.

Color	Business	Orange	Indigo	Indigo Calathea	Coffee	Garden	Warm	Operations	Space	Cyberpunkdark only
Brand
Primary `--bs-primary`
Primary subtle `--bs-primary-bg-subtle`
Primary emphasis `--bs-primary-text-emphasis`
Link `--bs-link-color`
Alternate `--bs-alternate`
Status
Secondary `--bs-secondary`
Success `--bs-success`
Info `--bs-info`
Warning `--bs-warning`
Danger `--bs-danger`
Light `--bs-light`
Dark `--bs-dark`
Focus `--bs-focus`
Tertiary `--bs-tertiary`
Surfaces
Page `--aui-app-bg`
Surface `--aui-surface`
Secondary surface `--bs-secondary-bg`
Tertiary surface `--bs-tertiary-bg`
Border `--bs-border-color`
Text
Body text `--bs-body-color`
Secondary text `--bs-secondary-color`
Tertiary text `--bs-tertiary-color`
Gradients
Primary `--aui-gradient-primary`
Success `--aui-gradient-success`
Info `--aui-gradient-info`
Warning `--aui-gradient-warning`
Danger `--aui-gradient-danger`
Dark `--aui-gradient-dark`

How to use the colors

Use the Bootstrap color classes. Every theme gives them its own values, in both modes, so the markup stays the same when the theme changes.

text-bg-primary bg-primary bg-primary-subtle text-bg-success text-bg-warning text-bg-danger text-bg-focus text-bg-alternate

link-primary text-danger text-body-secondary

text-bg-<color> — the solid color with a readable text color of the theme.
bg-<color> — the theme gradient over the color (widgets, progress bars).
bg-<color>-subtle, text-<color>-emphasis, border-<color>-subtle — pale backgrounds with dark text, for notes and statuses.
text-<color>, link-<color>, border-<color>, btn-<color>, btn-outline-<color>, alert-<color>.
Surfaces and text: bg-body, bg-body-secondary, bg-body-tertiary, text-body, text-body-secondary, text-body-tertiary, border.
Colors: primary, secondary, success, info, warning, danger, light, dark from Bootstrap; focus, alternate, tertiary from the theme.

<span class="badge text-bg-primary">New</span>
<div class="card bg-primary text-white">...</div>
<div class="alert alert-warning">...</div>
<p class="bg-success-subtle text-success-emphasis p-2">Saved</p>
<button class="btn btn-outline-primary">Edit</button>
<a class="link-primary" href="#">Details</a>

For your own styles, read the colors from CSS variables instead of writing HEX values: a variable follows the theme and the dark mode, a fixed value does not.

A panel on theme variables

Its surface, border, text and shadow come from the current theme. Switch the theme in the header to see it change.

var(--bs-<color>) and rgba(var(--bs-<color>-rgb), .5) for any color with transparency.
--bs-<color>-bg-subtle, --bs-<color>-text-emphasis, --bs-<color>-border-subtle.
Surfaces: --aui-app-bg (page), --aui-surface (cards), --bs-secondary-bg, --bs-tertiary-bg, --bs-border-color.
Text: --bs-body-color, --bs-secondary-color, --bs-tertiary-color, --bs-link-color.
Gradients: --aui-gradient-<color>.
Override a value in your stylesheet loaded after the theme: for every theme in :root, for one theme in [data-aui-theme="<id>"], for the dark mode in [data-bs-theme="dark"]. Change the -rgb pair together with the color.

.order-panel {
  background: var(--aui-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 .5rem 1rem rgba(var(--bs-primary-rgb), .15);
}

.order-panel h3 {
  color: var(--bs-primary-text-emphasis);
}

/* Your brand color in every theme */
:root {
  --bs-primary: #3f6ad8;
  --bs-primary-rgb: 63, 106, 216;
}

/* Only in Coffee, only in the dark mode */
[data-aui-theme="coffee"][data-bs-theme="dark"] {
  --aui-surface: #2b201b;
}

Scripts read the same variables through ArchitectUI. Read them when you draw, and again after aui:theme-change: the theme or the mode may change while the page is open.

token("primary")
token("--aui-surface")
rgba("primary", .25)
theme-change events: 0

ArchitectUI.token(name) — the value of --bs-<name>; a name that starts with -- is read as is.
ArchitectUI.rgba(name, alpha) — the color with transparency, from the -rgb pair.
ArchitectUI.chartDefaults(Chart) — fonts, text and grid colors of the theme for Chart.js.
The event aui:theme-change on document fires after a theme or mode change.

const { token, rgba, chartDefaults } = window.ArchitectUI;

chartDefaults(Chart);
const chart = new Chart(canvas, {
  type: "line",
  data: { labels, datasets: [{
    data: values,
    borderColor: token("primary"),
    backgroundColor: rgba("primary", .15),
  }] },
});

document.addEventListener("aui:theme-change", () => {
  chartDefaults(Chart);
  chart.data.datasets[0].borderColor = token("primary");
  chart.data.datasets[0].backgroundColor = rgba("primary", .15);
  chart.update();
});

Copied