Colors

sitemd includes a named color palette you can reference by name instead of hex codes. Use +color:name on buttons, inline icons, and card icons — or anywhere a color value is accepted.

Palette

The default palette ships with 21 colors. Each one is shown below as a button:

Accent color

The special keyword accent refers to the theme's accent color. Unlike palette colors which resolve to static hex values at build time, accent outputs a CSS variable that adapts dynamically when the user switches between light, dark, and paper modes.

icon:zap +color:accent

button: Get Started: /start +color:accent

card: Feature
card-icon: star +color:accent
card-text: Highlighted with accent color.

Use accent when you want a color that stays consistent with the rest of the theme's interactive elements — links, focus rings, and active states all use the same accent color.

Using named colors

Reference any palette color by name with +color::

button: Subscribe: /signup +color:green
button: Delete: /confirm +color:red +outline
button: Info: none +color:sky

Works everywhere buttons work — header, footer, sidebar, and markdown content. You can always use a raw hex code instead: +color:#7c3aed.

Named colors also work on inline icons and card icons:

icon:heart +color:rose
card-icon: shield-check +color:emerald

Customizing the palette

The palette is defined in settings/theme.md under the palette: key:

# settings/theme.md
palette:
  red: #ef4444
  orange: #f97316
  green: #22c55e
  blue: #3b82f6
  purple: #a855f7
  # ... more colors

You can:

• Change a color — edit the hex value next to any name
• Add a color — add a new name: #hex line
• Remove a color — delete the line

Custom names work immediately with +color:yourname on any button or icon.

Default palette reference

Neutrals: slate #64748b, gray #6b7280, zinc #71717a, stone #78716c

Dynamic: accent — the theme's accent color (adapts to light/dark/paper mode)