Temas

Two themes ship out of the box. Add your own in themes.css.

Loop ships with two themes out of the box and a token system that makes adding your own a five-minute job.

The two built-in themes

By default the template includes:

Light — clean, high-contrast, the default
Dark — a deep, low-glare palette for night owls

Visitors can switch themes from the header toggle, and their choice persists across reloads via a cookie.

How themes work

Every color is a CSS custom property defined per theme in src/styles/themes.css. Components never hardcode a hex value — they reference a token.

:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #0c0d10;
  --accent: #5b5bd6;
  --border: #e6e6ea;
  --card-bg: #ffffff;
  --card-fg: #0c0d10;
  --card-line: #ececf1;
}

:root[data-theme="dark"] {
  --bg: #0c0d10;
  --fg: #f4f4f6;
  --accent: #8b8bf0;
  --border: #23242b;
  --card-bg: #14151a;
  --card-fg: #f4f4f6;
  --card-line: #23242b;
}

Add your own theme

Copy an existing :root[data-theme="…"] block in themes.css.
Rename the attribute selector, e.g. data-theme="midnight".
Override the tokens you want to change. You only need to set the ones that differ.
Register the new theme name in the theme list so the toggle can offer it.

Card surfaces

Cards use a dedicated set of tokens — --card-bg, --card-fg, and --card-line — so they read correctly on every theme, including darker palettes where a plain --bg would disappear.

Removing the toggle

Don't want runtime theme switching? Delete the toggle component from the header and hardcode data-theme on the <html> element. The token system keeps working without it.