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.

@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.
--color-theme-dark is the background of the dark footer and other dark sections. --color-body-dark is the dark page background.
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, and IBM Plex Sans Arabic for Arabic pages.

[
  {
    "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"
  },
  {
    "name": "IBM Plex Sans Arabic",
    "variants": [
      { "style": "normal", "weight": "400" },
      { "style": "normal", "weight": "500" },
      { "style": "normal", "weight": "700" }
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-arabic",
    "provider": "google",
    "subsets": ["arabic"],
    "fallback": false,
    "languages": ["ar"]
  }
]

Font Customization

Update name, variants, provider, and subsets to match your preferred font.
Keep cssVariable aligned with the variables the styles use (--font-primary, and --font-arabic for Arabic).
languages loads a font only on pages in those languages. See RTL & Arabic.
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.
Latin text uses one font stack, so if you add a second family, also update the styles that should consume it.