# Website templates with a real dark mode

> Templates where dark mode was designed, not generated: a second set of colour tokens with its own contrast, shadows and accents, and a toggle that follows the visitor's system setting.

A dark mode is easy to add badly. Inverting the palette leaves shadows that vanish, accents that glow, images with white edges and grey text that fails contrast. A dark mode that holds up is a second design: surfaces step up in lightness instead of down, shadows give way to borders and light, and saturated colours are toned so they don't vibrate on a dark background.

Each template below ships light and dark as two designed token sets. Changing the theme swaps a group of CSS custom properties, so the same components look right in both, and your own additions will too if they use the tokens. On a first visit the theme follows the visitor's system setting; the toggle then remembers their choice.

## The 5 templates

- [Halden: AI Lab Website Template](https://frontiertemplates.com/templates/halden) ($79; ready in HTML). Its near-black dark theme is the same colour as the film-card hero, so the page reads as one surface; the italic accents switch to ivory buff.
- [Foldline: AI Code Review Website Template](https://frontiertemplates.com/templates/foldline) ($79; ready in HTML). Folded paper by day and inked paper by night: a dark olive sheet with the same hairline frames, from one token file.
- [Tidewell: AI Inbox Agent Website Template](https://frontiertemplates.com/templates/tidewell) ($79; ready in HTML). The frosted glass turns into a faint white tint over a dark ground, with the edge light kept, so the glass still reads in the dark.
- [Foray: AI Sales Agent Website Template](https://frontiertemplates.com/templates/foray) ($79; ready in HTML). White ink on near-black, inverted panels go deeper rather than white, and the signal yellow stays as the focus and shadow colour.
- [Meetly: AI Meeting Assistant Website Template](https://frontiertemplates.com/templates/meetly) ($79; ready in Astro, HTML, Prompt pack). A neutral near-black set for the soft-slab layout, with timestamps and data in Geist Mono kept at readable contrast.

## What separates a designed dark mode from an inverted one

- Elevation by lightness: raised surfaces get lighter in dark mode, because shadows don't read on dark grounds.

- Text contrast checked in both themes, not just the light one.

- Accents adjusted per theme: the same hex rarely works on white and on near-black.

- Images and mock-ups that don't flash white panels in the dark.

- No flash of the wrong theme on load: the preference is applied before first paint.

## Should a marketing site have dark mode at all?

If your audience is developers or designers, or your product itself has a dark theme, yes: visitors arrive from dark editors and dark apps, and a white page at night is a poor first impression. For audiences that browse during the day on phones, it matters less, but following the system setting costs nothing when the template already has both themes.

## Questions

### Does the dark mode follow the visitor's system setting?

Yes. On a first visit the theme follows the system setting; if the visitor uses the toggle, their choice is remembered on later visits.

### Can I ship only the dark theme?

Yes. Set the dark tokens as the default and remove the toggle; nothing else needs to change.

### How do I keep my own sections working in both themes?

Use the template's colour tokens (CSS custom properties) rather than fixed hex values. Then a new section follows the theme automatically.

### Why aren't all the templates in this collection?

This collection lists the templates whose product pages list light and dark mode as a feature, each with both themes designed as token sets. Check the other template pages for how each one handles themes.

Canonical: https://frontiertemplates.com/collections/dark-mode-website-templates