Customizing Theme Colors & Fonts

Techbyte Theme Documentation

Techbyte uses Tailwind CSS 4 theme variables in src/styles/theme.css. The palette is defined in modern OKLCH color notation. Update those values to match your brand palette and typography.

@theme inline {
  --leading-body: 1.6;

  /* === PRIMARY BRAND === */
  --color-primary: oklch(0.778 0.134 38.36);
  /* Same hue as primary, darkened to meet WCAG AA as text on white */
  --color-primary-ink: oklch(0.53 0.134 38.36);
  --color-secondary: oklch(0.959 0.01 87.47);
  --color-accent: oklch(0.955 0.015 37.88);

  /* === BACKGROUNDS === */
  --color-body: oklch(1 0 0);
  --color-body-dark: oklch(0.238 0.034 182.1);
  --color-theme-dark: oklch(0.182 0 0);
  --color-theme-light: oklch(0.96 0.02 37.83);

  /* === TEXT === */
  --color-text-dark: oklch(0.182 0 0);
  --color-text-light: oklch(1 0 0);

  /* === BORDERS === */
  --color-border-light: oklch(0.914 0.012 84.58);
  --color-border-dark: oklch(0.167 0.01 18.24);
}

Customizing Colors

Update the --color-* variables in src/styles/theme.css.
--color-primary is the coral/orange brand hue used on buttons, links, and accents. --color-primary-ink is a darkened version of the same hue kept for text states (like the active nav link) so contrast stays WCAG AA compliant — if you change the primary hue, re-derive the ink variant too.
--color-theme-dark / --color-body-dark drive the dark topbar, Header 2, and dark sections.
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. Techbyte ships with two font families: Kanit as the primary font and Syne as the secondary (display) font.

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

Font Customization

Update name, variants, provider, and subsets to match your preferred fonts.
Keep the cssVariable values (--font-primary, --font-secondary) aligned with the variables referenced in theme.css and the styles that consume them.
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.