Frontend · How to use a skill

add-dark-mode-toggle

Adds a light/dark/system theme toggle that persists the choice in localStorage and avoids the white flash on page load, using CSS variables or Tailwind's dark class. Use when the user asks for dark mode, a night theme, a theme switcher, or follow-the-system colour scheme.

Version 1.0 · Updated 2026-10-30

View raw SKILL.md

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-dark-mode-toggle/raw' -o ~/'.claude/skills/add-dark-mode-toggle/SKILL.md'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-dark-mode-toggle/raw' -o '.cursor/skills/add-dark-mode-toggle/SKILL.md'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-dark-mode-toggle/raw' -o '.agents/skills/add-dark-mode-toggle/SKILL.md'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Add a dark mode toggle

When to use

  • The app has one colour scheme and the user wants dark mode or a theme switcher.

Steps

  1. Decide the mechanism: Tailwind v4 @custom-variant dark (&:where(.dark, .dark *)); (v3: darkMode: "class"), or plain CSS variables under :root and .dark.
  2. Add a tiny blocking script in <head> before any CSS paints, so there is no flash:
   <script>
     const t = localStorage.theme ?? "system";
     const dark = t === "dark" || (t === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
     document.documentElement.classList.toggle("dark", dark);
   </script>
  1. Build a toggle with three states (light, dark, system) that writes localStorage.theme and toggles the dark class.
  2. When on "system", listen to matchMedia(...).addEventListener("change", ...) and update live.
  3. Add color-scheme: light dark so native inputs and scrollbars match.
  4. Check contrast of text, borders and focus rings in both themes.

Gotchas

  • In Next.js, add suppressHydrationWarning on <html> because the class is set before React hydrates (or use next-themes).
  • Images and shadows that look fine on white may vanish on dark; review them.

Example prompt

"Add a dark mode switch to the navbar that remembers my choice."

Licence: CC BY 4.0. Attribution when you reuse it: From TheSkillVault, https://theskillvault.ai, CC BY 4.0