Theming
Customize the look and feel of Acronis UIKit using CSS custom properties and theme switching.
How themes work
Acronis UIKit uses generated --ui-* CSS custom properties from
@acronis-platform/tokens-pd. You never hand-author
theme values — they are generated from the design system and resolved at paint
time, so brand and light/dark switches need no rebuild.
Load the default base, then (optionally) layer another brand override on top:
import '@acronis-platform/ui-react/styles'; // includes tokens-pd/css/default.css
import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css'; // optional brand overrideDark mode
Dark mode is built into the tokens via light-dark() + color-scheme. Toggle
the active scheme with data-theme:
<html data-theme="dark"></html>Theme switching
Brand switching is import-order based (last import wins), not a class toggle:
@import '@acronis-platform/tokens-pd/css/default.css';
@import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css';Design tokens
Key CSS variables you can override:
| Variable | Purpose |
|---|---|
--ui-background-surface-primary | Main page background |
--ui-background-surface-secondary | Secondary surfaces |
--ui-text-on-surface-primary | Primary text color |
--ui-text-on-surface-secondary | Secondary / muted text |
--ui-border-on-surface-border | Dividers and borders |
--ui-background-brand-primary | Brand accent color |
Custom theme
Override any variable in your CSS:
:root {
--ui-background-brand-primary: #7c3aed;
}