Theming & Vibes

config/theme.js is read by both the app and tailwind.config.js. Change the values below and the whole site restyles. Restart the dev server afterwards; Tailwind reads the file at build time.

// config/theme.js
const themeConfig = {
  primaryColor: "#3b82f6",        // any hex
  primaryColorFocus: "#2563eb",
  secondaryColor: "#8b5cf6",      // gradient partner
  accentColor: "#f59e0b",
  vibe: "terminal",               // terminal | aurora | studio | ledger | editorial
  defaultMode: "dark",            // dark | light
  daisyTheme: "whirlwind",
};

A vibe changes the feel, not just the colours: typeface pairing, hero effect, card surface, corner radius, heading case, and which hero, features and pricing layouts render. - terminal: square corners, uppercase display type, 3D grid hero - aurora: rounded corners, glass cards, drifting aurora glow, split hero - studio: rounded glass cards, serif display, dotted hero field - ledger: dense hairline tables, tight tracking, no hero effect - editorial: hairline borders, quiet backgrounds, wide-tracked labels Presets are defined at the bottom of config/theme.js. Copy one to make your own.

tests/e2e/appearance.spec.js derives its cases from the presets, so every vibe is rendered and checked by npm test, including the fonts each one loads.