Colors and fonts live in CSS variables. Change them once and the entire site updates.

CSS Custom Properties

Most LiteInk themes define a set of CSS variables at the top of the global stylesheet. These act as design tokens:

:root {
  /* Colors */
  --bg: #faf8f5;
  --ink: #1a1a1a;
  --accent: #ff7a30;
  --muted: rgba(26, 26, 26, 0.4);

  /* Typography */
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --radius: 8px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

Change --accent to your brand color and every button, link, and highlight updates instantly.

Finding the Variables

Variables are usually in one of these files:

  • src/styles/global.css
  • src/layouts/Base.astro (inside a <style is:global> block)
  • src/styles/tokens.css

Search for :root in your project to find them quickly.

Changing the Accent Color

The accent color is the single most impactful change. Pick a color that represents your brand:

/* Before */
--accent: #ff7a30;  /* LiteInk orange */

/* After */
--accent: #2563eb;  /* Your brand blue */

That’s it. Buttons, links, hover states, and highlights all follow.

Changing Fonts

Fonts are set via the --sans and --mono variables. Most themes self-host fonts for performance.

To use a different font:

  1. Download the font files (.woff2 format recommended)
  2. Place them in public/fonts/
  3. Add a @font-face declaration in your CSS:
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
  1. Update the variable:
--sans: 'MyFont', system-ui, sans-serif;

If you prefer Google Fonts, add the <link> tag in your layout’s <head> — but be aware this adds an external request.

Tailwind CSS

If the theme uses Tailwind, colors may be defined in tailwind.config.mjs:

export default {
  content: ['./src/**/*.{astro,html,js,jsx}'],
  theme: {
    extend: {
      colors: {
        accent: '#ff7a30',
      },
    },
  },
};

Change the hex value and rebuild.

Dark Mode

Some themes support dark/light mode toggles. The implementation varies, but typically uses a data-theme attribute on <html>:

:root {
  --bg: #faf8f5;
  --ink: #1a1a1a;
}

[data-theme="dark"] {
  --bg: #0e0e0e;
  --ink: #f5f5f5;
}

Override the variables under [data-theme="dark"] to customize dark mode colors.

What’s Next?