Theme architecture
Brand theme (NexWell Default / NexWell Navy) and appearance (light/dark/system) as independent axes, the ThemeProvider/useTheme contract, and the live four-combination preview matrix. New/proposed — not yet through DS governance review; see the page for full status.
GitHub Issue #128
Three independent concepts
- Brand/Visual Theme —
nexwell-default(Landing-aligned, navy/orange) ornexwell-navy(dark navy app shell, compatible light content surfaces). - Appearance —
light,dark, orsystem. Never conflated with brand. - User Preference / persistence — not owned by the Design System.
ThemeProvideris controlled-or-uncontrolled; the consuming app decides whether/how to persist a choice.
Live — runtime switching, no reload
Try it
Resolved: nexwell-default / light → light
Required preview matrix
NexWell Default / NexWell Navy × Light / Dark
nexwell-default / light
Period TrackerNotifications
nexwell-default / dark
Period TrackerNotifications
nexwell-navy / light
Period TrackerNotifications
nexwell-navy / dark
Period TrackerNotifications
API
ThemeProvider / useTheme
import { ThemeProvider, useTheme, getThemeInitScript } from "@nexwell/theme";
// App root (Next.js layout) — no-flash via an inline init script:
<script dangerouslySetInnerHTML={{ __html: getThemeInitScript({
defaultBrand: "nexwell-default",
defaultAppearance: "system",
brandStorageKey: "nexwell-brand", // optional — you own persistence
appearanceStorageKey: "nexwell-appearance",
}) }} />
<ThemeProvider defaultBrand="nexwell-default" defaultAppearance="system">
<App />
</ThemeProvider>
// Anywhere inside:
const { brand, appearance, resolvedAppearance, setBrand, setAppearance } = useTheme();