How Do I Add Dark Mode to My App?

You built something with Claude, ChatGPT, Bolt, or Lovable and users are asking for dark mode. Or you just want it because most modern apps have it and it makes a significant difference to usability at night. Dark mode is one of those features that sounds like it might require rewriting everything but actually has a clean, widely supported solution in modern CSS. Here is exactly how to add it.

How Dark Mode Works

Modern browsers and operating systems have a setting that indicates whether the user prefers a light or dark colour scheme. You can read this preference in CSS and apply different styles based on it.

The CSS feature that handles this is called prefers-color-scheme. When a user has dark mode enabled on their device, prefers-color-scheme: dark matches and you can apply dark styles automatically.

There are two approaches to dark mode: automatic, which follows the user’s system setting without them doing anything in your app, and manual, which adds a toggle button that lets users switch regardless of their system setting. Most modern apps offer both.

The Simplest Implementation: CSS Variables

The cleanest way to implement dark mode uses CSS variables, also called custom properties. Instead of specifying exact colours throughout your CSS, you define colours as variables and then change those variables when dark mode is active.

css

/* Light mode defaults */
:root {
  --background: #ffffff;
  --text: #1a1a1a;
  --card-background: #f5f5f5;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1a1a;
    --text: #f5f5f5;
    --card-background: #2a2a2a;
  }
}

/* Use variables throughout */
body {
  background-color: var(--background);
  color: var(--text);
}

With this approach, changing three variable values changes the entire app’s colour scheme. Your AI can implement this pattern for your app.

Ask your AI: “Can you add dark mode to my app using CSS variables? I want it to automatically follow the user’s system preference and also add a manual toggle so users can switch regardless of their system setting.”

If You Use Tailwind CSS

If your app was built with Tailwind CSS, which many Bolt and Lovable apps use, dark mode is built into the framework. Tailwind has a dark: prefix for applying styles in dark mode.

Ask your AI: “My app uses Tailwind CSS. Can you add dark mode support using Tailwind’s dark: class variants? Add a toggle button that switches between light and dark mode.”

Saving the User’s Preference

If you add a manual toggle, save the user’s choice so it persists between visits. Browser localStorage is the right place for this, storing a simple value like “dark” or “light” and reading it when the page loads.

Ask your AI: “When a user toggles dark mode in my app, save their preference to localStorage and apply it automatically when they return to the app.”

Common Dark Mode Pitfalls

Images that only look good on white backgrounds. Dark mode can make images with white or transparent backgrounds look bad. Test your images in dark mode and consider adding a subtle card background around images that need one.

Colour contrast. Dark mode requires sufficient contrast between text and background for readability. Your AI’s implementation should handle this but test it yourself by viewing your app with your device in dark mode.

Flash of unstyled content. When the page loads, there can be a brief flash of the wrong theme before JavaScript applies the saved preference. Ask your AI to add an inline script in your HTML head that reads and applies the saved theme before the page renders.

The One Thing to Remember

Dark mode uses the prefers-color-scheme CSS media query to detect system preferences. CSS variables are the cleanest way to switch colour schemes. Tailwind has built-in dark mode support. Save the user’s manual toggle preference to localStorage. Ask your AI to implement the full pattern including the toggle and preference persistence.

---

Want your dark-mode-enabled app running reliably in production? → Snapdock

New here? These might help: Why does my app look different on my phone than on my laptop? → What is a frontend and a backend? Do I need to know the difference? →