Theming.
Four levels. One token system.
Every Synq SDK that ships UI uses the same token system. Five built-in presets, light/dark with system follow, full token overrides, BYO provider icons, slot-level classNames. Stop at the lightest level that fits.
Four progressive levels
Pick a preset, override tokens, split light/dark, drop in slot overrides — pick the lightest that fits.
<SynqProvider {...config} theme="dark" />
// or: "light" | "glass" | "monochrome" | "brutalist"Every visual axis named
Same token names across @synqid/react and @synqid/react-native. Designer specs carry one-to-one between web and native.
| Group | Tokens |
|---|---|
| Colors | primary · primaryForeground · primaryHover · surface · surfaceElevated · border · borderHover · textPrimary · textMuted · textOnPrimary · danger · success · warning · backdrop |
| Typography | fontFamily · fontFamilyDisplay · fontFamilyMono · fontWeightHeadline · fontWeightButton |
| Spacing | spacingXs · spacingSm · spacingMd · spacingLg · spacingXl |
| Radii | radiusSm · radiusMd · radiusLg · radiusFull · radius (sugar) |
| Effects (web only) | shadowSm · shadowMd · shadowLg · glow · backdropBlur |
| Motion (web only) | durationFast · durationBase · easingStandard |
Pick one, then refine
dark
Synq’s default. Purple-tinted ground, teal accent.
light
High-contrast white surface, deep teal accent.
glass
Dark + heavy blur backdrop. For overlay UIs.
monochrome
Grayscale; no brand color. Subtle and editorial.
brutalist
Hard edges, yellow accent, fat shadows.
Common questions
Make the auth UI match your product.
Start with a preset, refine the tokens, hit the slots only if you need to. Done before lunch.