Common Documentation

Customizing Theme Colors & Fonts

Colors and typography are defined in src/styles/theme.css using CSS variables. Update these variables to customize your theme.

src/styles/theme.css

@theme inline {
  /* Colors */
  --color-primary: #0031F4;
  --color-secondary: #9ECF59;
  --color-tertiary: #94E4F1;
  --color-accent: #6366F1;
  --color-body: #fff;
  --color-border-light: #ECEEF1;
  --color-theme-light: #FAFAFA;
  --color-theme-dark: #372D3F;

  --color-text-default: #3B3B3B;
  --color-dark: #322B2B;
  --color-light: #fff6f6;

  /* Typography scale */
  --text-base: 1rem;
  --text-base-scale: 1.23;
  --leading-body: 1.8;
}

Customizing Colors

• Adjust the --color-* variables to match your brand palette.
• Update --color-text-* variables to refine text contrast.

---

Typography Settings

Fonts are configured in src/config/fonts.json and automatically loaded via the theme’s font utilities.

[
  {
    "name": "Figtree",
    "weights": [400, 500],
    "styles": ["normal"],
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": ["latin"],
    "fallbacks": ["sans-serif"]
  },
  {
    "name": "Instrument Serif",
    "weights": [400],
    "styles": ["normal", "italic"],
    "display": "swap",
    "cssVariable": "--font-secondary",
    "provider": "google",
    "subsets": ["latin"],
    "fallbacks": ["sans-serif"]
  }
]

Font Customization

• Change name, weights, and styles to update your fonts.
• Update cssVariable names only if you also update theme styles that reference them.
• Adjust fallbacks to control font fallbacks in the browser.