add-dark-mode

Configure dark mode in Next.js and Tailwind v4 projects with next-themes.

34|6|Updated Jun 30, 2026

Search Tags:#automation #frontend #nextjs #tailwind #ux #darkmode

Ready to run

npx skills add https://github.com/flavien-ia/hypervibe-harness --skill add-dark-mode-flavien-ia

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-dark-mode
Source: https://github.com/flavien-ia/hypervibe-harness/tree/main/skills/add-dark-mode
Command: npx skills add https://github.com/flavien-ia/hypervibe-harness --skill add-dark-mode-flavien-ia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next-themes, lucide-react.

What problem does it solve?

This skill eliminates the manual, error-prone process of configuring dark mode, auditing color palettes, and wiring up theme providers in Next.js applications.

Core Features & Use Cases

Automated Configuration: Installs next-themes, configures Tailwind v4 dark variants, and sets up the ThemeProvider.
Color Auditing: Automatically identifies existing color tokens and proposes dark-mode variants to ensure visual consistency.
Use Case: You have a finished Next.js website and want to offer a professional dark mode experience without spending hours manually updating CSS variables and component classes.

Quick Start

Run the add-dark-mode skill to automatically configure dark mode support and add a theme toggle button to your project.

Frequently Asked Questions about add-dark-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add dark mode to a Next.js and Tailwind site without flash of unstyled content?▼

To add flash-free dark mode, configure Tailwind v4 dark variants and wrap your application in a next-themes ThemeProvider. This enables system-aware theme switching and persists user preferences without visual flickering on load.

What is the best way to configure dark mode color tokens for Tailwind v4?▼

Configuring dark mode color tokens requires auditing existing palettes and defining CSS variables for semantic tokens. The process proposes dark-mode variants automatically to maintain visual consistency across your Next.js UI components.

Can I use next-themes to automatically toggle dark mode in Next.js?▼

Yes, next-themes supports automated dark mode toggling in Next.js. It manages system-aware theme switching, handles state persistence, and integrates with Tailwind v4 variants to apply semantic color tokens dynamically.

Does adding dark mode require manually updating all my Next.js component classes?▼

No, adding dark mode does not require manually updating individual component classes. By configuring CSS variables and semantic color tokens, the theme provider automatically applies dark variants across your Next.js application.

Why does my Next.js dark mode implementation flash white before loading?▼

Dark mode flashes white when the theme provider is not configured to prevent the flash of unstyled content. Implementing next-themes correctly blocks the initial render until the theme is determined and applied.

Do I need lucide-react to add a theme toggle button to Next.js?▼

Yes, lucide-react is used to provide the UI icons for the theme toggle button. Combined with next-themes for state management, it renders the visual switch for users to toggle between light and dark modes.