5 templates · Style

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

How each one handles the dark

Halden: 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: Folded paper by day and inked paper by night: a dark olive sheet with the same hairline frames, from one token file.
Tidewell: 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: White ink on near-black, inverted panels go deeper rather than white, and the signal yellow stays as the focus and shadow colour.
Meetly: A neutral near-black set for the soft-slab layout, with timestamps and data in Geist Mono kept at readable contrast.

What's included

Template	Pages	Ready today	Start-here guide	Extras ready	Price	Live preview
Halden Applied AI lab	27	HTML	Yes	None yet	$79	Open the Halden demo (opens in a new tab)
Foldline AI code review	29	HTML	Yes	Product UI kit	$79	Open the Foldline demo (opens in a new tab)
Tidewell AI inbox and sales agent	29	HTML	Yes	None yet	$79	Open the Tidewell demo (opens in a new tab)
Foray AI SDR and sales agent	29	HTML	Yes	None yet	$79	Open the Foray demo (opens in a new tab)
Meetly AI meeting assistant	30	Astro, HTML, Prompt pack	Yes	AI copy prompts, Pitch deck, Launch kit, Email templates, Brand kit, Product UI kit	$79	Open the Meetly demo (opens in a new tab)

Page counts are the site pages in each demo, not counting the password, 404 and coming-soon screens. Every paid template is one price for every format it ships in.

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.