Lumio Theme Documentation

Customizing Theme Colors & Fonts

Lumio uses Tailwind theme variables in src/styles/theme.css. Update those values to match your brand palette and typography.

src/styles/theme.css

@theme inline {
  --leading-body: 1.7;
  --leading-inherit: inherit;

  /* Colors */
  --color-primary: #7952ff;
  --color-body: #ffffff;
  --color-border-dark: #e4e4e7;
  --color-border-light: #f1f1f3;
  --color-theme-dark: #141825;
  --color-theme-light: #f7f8fc;

  --color-text-default: #444444;
  --color-dark: #161616;
  --color-light: #a3a3a8;
}

Customizing Colors

• Update the --color-* variables in src/styles/theme.css.
• Keep contrast in mind for button states, footer text, and dark sections.
• If you change brand colors heavily, review buttons.css, navigation.css, and section-specific classes afterwards.

---

Typography Settings

Fonts are configured in src/config/fonts.json and wired into Astro through astro.config.mjs.

[
  {
    "name": "Outfit",
    "variants": [
      { "style": "normal", "weight": "400" },
      { "style": "normal", "weight": "500" },
      { "style": "normal", "weight": "600" },
      { "style": "normal", "weight": "700" },
      { "style": "normal", "weight": "900" }
    ],
    "preload": true,
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": ["latin"],
    "fallback": "sans-serif"
  }
]

Font Customization

• Update name, variants, provider, and subsets to match your preferred font.
• Keep cssVariable aligned with the variables referenced in theme.css.
• Lumio currently uses a single primary font stack, so if you add a second family, also update the styles that should consume it.