Most customization happens in one file. Here’s how to make the theme yours.

The Config File

Every LiteInk theme centers on a config file — usually src/data.ts, src/config.ts, or src/config.json. Open it first.

It contains structured data for things like:

export const SITE = {
  name: 'Your Brand',
  description: 'What you do, in one sentence.',
  url: 'https://yoursite.com',
};

export const HERO = {
  eyebrow: 'Welcome',
  title: 'We build <em>remarkable</em> things.',
  subtitle: 'A short tagline goes here.',
};

export const NAV = [
  { label: 'Home', href: '/' },
  { label: 'Work', href: '/work/' },
  { label: 'About', href: '/about/' },
  { label: 'Contact', href: '/contact/' },
];

Change the values, save, and your dev server updates instantly.

Nav items are defined as an array in the config. To add a page to the nav:

  1. Add the route file (e.g., src/pages/services.astro)
  2. Add the entry: { label: 'Services', href: '/services/' }

To remove a nav item, delete its array entry.

The logo is usually defined as an SVG component or inline in the layout file. To replace it:

  1. Find your logo file (SVG recommended)
  2. Replace the SVG path in src/components/Logo.astro or the layout file

Keep the viewBox attribute — it ensures the logo scales properly.

Footer Content

Footer links, social media, and copyright text are also in the config file:

export const FOOTER = {
  links: [
    { label: 'Privacy', href: '/privacy/' },
    { label: 'Terms', href: '/terms/' },
  ],
  social: {
    twitter: 'https://twitter.com/youraccount',
    github: 'https://github.com/yourorg',
  },
};

Toggling Sections

Some themes (like Nodus) support section toggles in the config:

export const SECTION_VISIBILITY = {
  hero: true,
  testimonials: true,
  pricing: false,    // ← hides the pricing section
  faq: true,
};

Set a section to false and it disappears from the page — no code changes needed.

What’s Next?