Prebuilt themes

Seven prebuilt palettes ship with the design system. Each has its own page with the full primary/secondary shade chart, light and dark, plus that theme's grey scale, semantic states, and neutral tokens, every swatch rendered with real compiled CSS, scoped to that theme regardless of what's active in the toolbar.

Eunomia

Salmon

Forest

Violet

Ocean

Gold

Fire

Using a prebuilt theme

On this site, pick a theme from the toolbar: it sets data-brand/data-theme on <html> and every --eun-* token updates instantly (see Theming):

<html data-brand="violet" data-theme="light"></html>

Consuming the component library directly, import the theme's stylesheet, then add its class to your app root: unlike this site, there's no data-brand attribute to set, since that compiled, every-brand-in-one-selector bundle is specific to this docs site, not something the published package ships. Pick a framework in the toolbar above and the import snippet below adapts:

<link
  rel="stylesheet"
  href="node_modules/@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss"
/>

Works anywhere a plain <link> tag does. If your setup can't serve a .scss file directly (no build step compiling it), run it through Sass first and link the compiled .css output instead.

import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Needs a bundler that already handles CSS/Sass imports (Vite, webpack with sass-loader, etc.) — the import itself has no exports, it's only there for the side effect of injecting the stylesheet.

// index.js / main.jsx, once, before rendering
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

// app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

Next.js only allows global CSS/Sass imports in these two files (root layout or _app), not inside a regular component.

// main.js, once, before mounting the app
import "@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

{
  "styles": [
    "node_modules/@eunomia/elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss",
    "src/styles.scss"
  ]
}

Angular CLI compiles Sass by default, so add the theme file to the styles array in angular.json's relevant build target instead of importing it from TypeScript.

Once it's loaded, add the class to your app root:

<body class="eunomia-theme eunomia-violet-theme">
  <app-root></app-root>
</body>

For dark mode, swap in eunomia-violet-theme--dark instead. The eunomia-theme base class supplies the neutral/grey scale and the non-color settings (fonts, spacing, radius, shadows); the eunomia-<name>-theme class layered on top supplies just that theme's brand colors.

Or, from Sass:

@import "eunomia-elements/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss";

:root {
  @include eunomia-violet-theme();
}

The Sass mixin form (eunomia-violet-theme()) bundles everything (colors, fonts, spacing, radius, shadows, grid utilities) in one @include, which is what this site's own data-brand attributes compile down to.