Theming

#How it works

Every customisable value is a CSS variable prefixed with --elyri-, with defaults declared on :root by styles.css. Override the variables to restyle — no component changes needed.

#Global overrides

Redeclare variables on :root in a stylesheet loaded after styles.css:

:root {
  --elyri-duration-base: 500ms;
  --elyri-ui-accent: #0f766e;
  --elyri-ui-accent-soft: rgb(15 118 110 / 12%);
  --elyri-ui-radius: 6px;
}

#Scoped overrides

CSS variables inherit, so declaring them on any container scopes the change to that subtree.

/* Only affects components inside .marketing */
.marketing {
  --elyri-ui-accent: #e11d48;
  --elyri-duration-base: 700ms;
}

#Motion tokens (@elyri/motion)

#UI tokens (@elyri/ui)

#Dark mode

UI tokens follow the system via prefers-color-scheme by default. If your site has its own theme switch, override both the light and dark values under that selector so the system setting cannot leak through.

/* If your site toggles themes with data-theme, override under the same selector */
:root[data-theme='light'] {
  --elyri-ui-text: #1a1d23;
  --elyri-ui-surface: #ffffff;
}
:root[data-theme='dark'] {
  --elyri-ui-text: #eef0f4;
  --elyri-ui-surface: #16191f;
}

#Per-component customisation

Components also expose their own variables (such as --elyri-gradient-colors) and props for colour, speed and size. Props are applied as inline styles and win over stylesheets; WebGL backgrounds take colours through props only. See the Props table on each component page.