Techlo Theme Documentation

Customizing Theme Colors & Fonts

Techlo uses Tailwind CSS 4 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.8;

  /* Brand colors */
  --color-primary: #2b4dff;
  --color-primary-soft: #eef1ff;
  --color-accent: #e3ff04;

  /* Surface colors */
  --color-body: #fff;
  --color-body-dark: #070800;
  --color-theme-dark: #040d43;
  --color-theme-light: #f5f6f7;

  /* Content colors */
  --color-dark: #0a165e;
  --color-light: #ced0df;
  --color-text-default: #585b6f;

  /* Border colors */
  --color-border-light: #e5e5e5;
  --color-border-dark: #272f5d;
}

Customizing Colors

• Update the --color-* variables in src/styles/theme.css.
• --color-primary drives buttons, links, and accents; --color-accent is the lime highlight used on badges and small details.
• The --color-theme-dark / --color-body-dark tokens control the dark hero and footer sections used by header layouts one and three.
• Keep contrast in mind for button states, footer text, and dark sections. If you change brand colors heavily, review buttons.css, navigation.css, and components.css afterwards.

---

Typography Settings

Fonts are configured in src/config/fonts.json and wired into Astro through astro.config.mjs. Techlo ships with Sora as its primary font.

[
  {
    "name": "Sora",
    "variants": [
      { "style": "normal", "weight": "400" },
      { "style": "normal", "weight": "500" },
      { "style": "normal", "weight": "700" }
    ],
    "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 (--font-primary).
• The type scale itself is generated from --text-base and --text-base-scale in theme.css, so you can resize all headings at once by tuning those two values.
• Techlo uses a single primary font stack, so if you add a second family, also update the styles that should consume it.