Skip to content
RefineUI

Theming

Light and dark surfaces from semantic color aliases.

RefineUI themes resolve through semantic aliases (--refineui-color-alias-*). Toggle dark by setting data-theme="dark" (and optionally .dark) on the document root — the same path documentation uses.

<html data-theme="light">
<html data-theme="dark" class="dark">

Rules

Section titled “Rules”
  • Consume aliases in UI (background-brand, foreground-primary), not raw palette steps
  • Component sizes stay linked to Foundation size steps
  • Do not invent theme-specific hex in product CSS

See Color for the visual token map.