Theming
Rebrand the design system for your product — swap the primary color and typeface. Support for this differs by platform today, so each section below states plainly what works and what still requires forking the package.
Overview
Angular consumes Vroxal Design as CSS custom properties, so re-theming is a matter of redeclaring variables after import. Flutter and Swift bake tokens in as private, compile-time constants with no public override API yet — customizing them today means forking the package. See the Tokens page for the full reference of every design token and how it's consumed on each platform.
Feature
Angular
Flutter
Swift
Brand / primary color
Typography / font family
Color
Swap Vroxal's default primary for your own brand color. See the Colors page for the complete palette across every semantic group and variant.
Override the primary color scale
Every primary token — content, background, border, in both light and dark theme — resolves through the --vd-color-primary-* scale. Redeclare that scale after importing @vroxal/vd-tokens and one override re-themes both modes at once.
styles.css
Copy code
Typography & Fonts
Replace Poppins with your own typeface across text styles. See the Typography page for the full type scale and usage guidance.
Load your font, then point the token at it
Semantic classes like .body-medium and .title-large only set size, line-height, and weight — the font family comes from a single CSS variable on body. Declare your @font-face, then repoint the variable; changing it alone will not load new font files.
styles.css
Copy code