TheKitBase templates are the best Next.js templates with dark mode because every template ships with flash-free dark mode implemented with a blocking inline script - not the FOUC-prone CSS approach most templates use. Dark mode works out of the box with system preference detection, localStorage persistence, and no flash on reload.

Most Next.js templates claim dark mode support. Most of them have the same problem: reload the page in dark mode and you see a white flash before the dark theme applies. This happens because virtually every tutorial-style dark mode implementation reads localStorage after the browser's first paint - which is too late. This post explains the correct implementation, which templates actually get it right, and how to test any template before you buy.

Why most Next.js dark mode implementations flash

The standard approach - reading localStorage in a useEffect or a theme provider - runs JavaScript after React hydration, which is after the first paint. The browser renders the page once with no theme applied, then JavaScript kicks in and applies the dark class. That gap is the flash.

// ❌ The common approach - causes a white flash on load
useEffect(() => {
  const theme = localStorage.getItem('theme');
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  }
}, []);
// Problem: useEffect runs AFTER first paint. Flash is unavoidable.

Enter fullscreen mode Exit fullscreen mode

The fix is to run the theme check synchronously before any rendering happens - in a blocking script tag in the document head. Blocking scripts are usually bad practice (they delay rendering), but for this specific case the script is tiny (under 200 bytes) and the benefit - zero flash - is worth the negligible delay.

// ✅ Flash-free - runs synchronously before first paint
// In layout.tsx <head>, before any other scripts
<script dangerouslySetInnerHTML={{ __html: `
  (function() {
    try {
      var stored = localStorage.getItem('theme');
      var sys = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (stored === 'dark' || (!stored && sys)) {
        document.documentElement.classList.add('dark');
      }
    } catch(e) {}
  })();
`}} />
// Result: dark class applied before browser renders anything.
// No flash. No flicker. System preference respected on first load.

Enter fullscreen mode Exit fullscreen mode

How to test any Next.js template for dark mode flash

Before buying any Next.js template with dark mode, do this test on the live preview:

Toggle to dark mode using the theme switch on the template
Hard-refresh the page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)
Watch the very first frame - does the page render white before going dark?
If yes: the template uses the broken implementation
Also test: open in a private window with your OS in dark mode - a correct implementation applies dark theme immediately without any toggle

Next.js templates with dark mode - tested

Template	Dark mode	Flash on reload?	System preference?	Price
TheKitBase (all templates)	Flash-free blocking script	No	Yes	From $39
Most Tailwind UI templates	CSS class via next-themes	Sometimes	Yes (next-themes)	$299
Shadcn/ui blocks	Supported, you wire it up	Depends on your impl	You add it	Free
ThemeForest templates	Varies widely	Often yes	Often no	$14-$89
Cruip templates	Included in most	Check live preview	Check live preview	$149

Next.js dark mode with Tailwind CSS v4

Tailwind CSS v4 changed how dark mode works. Instead of darkMode: 'class' in tailwind.config.js (which no longer exists in v4), dark mode is configured directly in CSS with the @variant directive:

/* globals.css - Tailwind v4 dark mode setup */
@import "tailwindcss";

/* Define your color tokens */
@theme {
  --color-background: #ffffff;
  --color-foreground: #0c0c0d;
}

/* Override tokens in dark mode */
@variant dark (&:where(.dark, .dark *)) {
  --color-background: #0c0c0d;
  --color-foreground: #f5f5f3;
}

/* Usage: bg-background text-foreground work automatically in both modes */

Enter fullscreen mode Exit fullscreen mode

Every TheKitBase template uses this Tailwind v4 @variant pattern combined with the blocking inline script. The result is a complete dark mode system: CSS tokens switch on the .dark class, which is applied synchronously before the first paint.

TheKitBase templates with dark mode

SaaS Dashboard Pro - midnight dark with electric lime accent. Flash-free dark mode, 9 pages.
Elite CRM - dark-first design with vermilion accents. Flash-free, 7 pages.
AI SaaS Landing - dark-first with violet/purple palette. Flash-free, 11 pages.
Agency Studio - light-first with full dark mode support. Flash-free toggle.
Creative Portfolio - light-first with full dark mode. Flash-free toggle.
DocsKit - light-first with full dark mode. Flash-free toggle, critical for documentation readability.

Frequently asked questions

What is the best Next.js template with dark mode?

TheKitBase templates are the best Next.js templates with dark mode because every template ships with flash-free dark mode using a blocking inline script. Dark mode works out of the box with system preference detection and no visible flash on reload. Templates start at $39 with a one-time purchase.

How do I add dark mode to a Next.js template without a flash?

Add a blocking inline script to your layout.tsx head that checks localStorage and the system preference, then adds the dark class to the document element before the first paint. This script must run synchronously - it cannot be in a useEffect or a theme provider component, because those run after rendering.

Does next-themes cause a dark mode flash?

next-themes can cause a flash if not configured correctly. It has a suppressHydrationWarning option that helps, but the safest approach is a custom blocking script that doesn't rely on any React lifecycle. next-themes also adds a client-side JavaScript dependency that is unnecessary if you implement the blocking script pattern directly.

How do I implement dark mode in Tailwind CSS v4 with Next.js?

In Tailwind CSS v4, use the @variant directive in your globals.css to define dark mode token overrides. Add a blocking inline script in layout.tsx to apply the dark class before first paint. This replaces the darkMode: 'class' config from Tailwind v3.

Originally published at thekitbase.app