Themes

Velu ships with a light and a dark appearance. You control the look with theme, colors, and font in velu.json. Readers switch between light and dark with the theme control in the header.

Visual preset

theme selects the layout chrome. Omit it (or set "velu") for the default Velu look.

{ "theme": "velu" }

Vepa preset

Set "theme": "vepa" for a denser header, sidebar, and table of contents.

{
  "theme": "vepa",
  "colors": { "primary": "#16A34A", "light": "#07C983" }
}

For Vepa, colors.primary is the light-mode accent and colors.light is the dark-mode accent. The default font is Inter unless you set font.family.

Thulir preset

Set "theme": "thulir" for a fresh, open layout with Inter typography and a compact previous/next footer.

{
  "theme": "thulir",
  "colors": {
    "primary": "#0D9373",
    "light": "#12A481",
    "dark": "#46D6AD"
  }
}

For Thulir, colors.primary is the light-mode accent, colors.light is the dark-mode accent, and colors.dark tints the header button. The default font is Inter unless you set font.family. The name means a fresh sprout in Tamil.

Aalam preset

Set "theme": "aalam" for branding, search, and navigation in the left sidebar, with tabs above the article.

{
  "theme": "aalam",
  "colors": {
    "primary": "#C2410C",
    "light": "#EA580C",
    "dark": "#FB923C"
  }
}

For Aalam, colors.primary is the light-mode accent, colors.light is the dark-mode accent, and colors.dark tints header buttons. The default font is Inter unless you set font.family. The name means banyan in Tamil.

Nila preset

Set "theme": "nila" for a compact header, grouped sidebar, and a focused reading column.

{
  "theme": "nila",
  "colors": {
    "primary": "#4338CA",
    "light": "#6366F1",
    "dark": "#A5B4FC"
  }
}

For Nila, colors.primary is the light-mode accent, colors.light is the dark-mode accent, and colors.dark tints header buttons. The default font is Inter unless you set font.family. The name means moon in Tamil.

The visual preset is separate from the reader's Light / Dark / System preference.

Light and dark mode

Every site supports both themes. On a reader's first visit, Velu follows their operating system preference.

Dark mode is on by default and always available. There is no config to turn it off or to lock the site to a single theme.

Colors

colors.primary is the accent used across the interface: links, active navigation items, and buttons. It defaults to #dc143c.

{ "colors": { "primary": "#dc143c" } }

Per-theme accents

A single accent can look too dark on a dark background or too light on a light one. Add light and dark to set the accent for each theme; either one falls back to primary when omitted.

{
  "colors": {
    "primary": "#dc143c",
    "light": "#f26b83",
    "dark": "#b3102f"
  }
}

Here light is used when the reader is in light mode and dark when they're in dark mode.

Font

font.family is any Google Font family name. Velu loads the font automatically and applies it as the body font: you don't add a stylesheet or a script.

{ "font": { "family": "Inter" } }

Use the exact family name as it appears on Google Fonts, for example "Roboto Mono" or "IBM Plex Sans".

Beyond colors and fonts

When colors and font aren't enough, add a .css file to your project. Velu includes it on every page, after its own styles, so your rules win. The same goes for .js files. See Custom scripts for the stable selectors you can target and how scripts are loaded.

See Global settings for the full velu.json reference, including the logo and favicon that sit alongside these theme fields.