themes

klera has two surface themes: dark (the default — patient, provider, hq, this design app) and light (used by the marketing home and the intake/onboarding flow, where the page itself is brand-card blue).

same component code in both. the page sets data-theme="light" on its root element and the --surface-elevated token family remaps from a brighter blue to a translucent-white treatment that reads "lifted" against the brand-card ground.

How to opt a surface into the light theme: put data-theme="light" on the <html> element (whole app) or any wrapper (a single section). No additional CSS needed — all primitives reach for the same tokens, so they automatically pick up the override.

import from data-theme attribute on any element

variants

dark theme (default)

elevated cardbrand-card #1a4fef

elevated card--surface-elevated

page bg = brand-deep (#000080); cards = brand-card (#1a4fef). PortalCard, StatCard, StatusCard, etc. all use this contrast.

light theme (brand-card ground)

elevated cardrgba(255,255,255,0.22)

elevated card--surface-elevated

set data-theme="light" on the wrapper. surface-elevated remaps to translucent white over the brand-card page.

side by side

dark themethis is what dashboards see

light themethis is what intake / home see

same component, different theme. the contrast pattern (one tier brighter than the page) holds across both.