How to Add a Dark Mode Toggle to Lovable Projects

Dark mode is no longer a nice-to-have. It is the default expectation.

Nearly 82% of smartphone users now use dark mode, and over 80% of users globally say they prefer having the option to switch. If your Lovable project does not offer it, a significant chunk of visitors are already quietly frustrated the moment they open your app.

The good news? Adding a dark mode toggle to a Lovable project is genuinely straightforward. Whether you want to drop it in through a simple chat prompt or wire it up with a custom React hook and persistent preferences, this guide walks through every method — from the fastest one-liner approach to a fully polished system that respects user settings and saves their choice.

By the end, your project will handle dark mode the right way.

Why Dark Mode Actually Matters for Your Project

Before the how-to, it’s worth understanding what you are actually solving.

82% of smartphone users currently use dark mode on their devices. 92% of software engineers prefer dark mode for extended work. On OLED and AMOLED screens, dark mode can save up to 63% on battery life. When a screen is at 100% brightness, dark mode reduces power consumption by an average of 67% according to Nielsen Norman Group research.

Beyond battery life, dark mode reduces eye strain during extended sessions — which is why 70% of software professionals globally say it makes longer work periods more comfortable.

The business case is equally clear. One company that implemented dark mode saw their desktop bounce rate drop from 27% to 11%, and pages per session jumped from 3.7 to 10. That is not a design preference. That is a retention mechanism.

Users notice. Users stay longer. Users come back.

Lovable projects built on React and Tailwind CSS are particularly well-suited for dark mode because the tech stack already handles it natively. You are not fighting the tools — you are using them exactly as designed.

What Lovable Uses Under the Hood

Understanding the stack helps you implement dark mode correctly rather than patching it together.

Lovable generates production-ready applications using React, TypeScript, Tailwind CSS, and shadcn/ui components. This matters because Tailwind has first-class dark mode support built in, and shadcn/ui components are already designed to work with Tailwind’s dark mode system out of the box.

The core mechanism is Tailwind’s darkMode: ‘class’ configuration. When a dark class is present on the root HTML element, all dark: utility classes activate. Toggle the class, and the entire UI shifts. That is the entire dark mode system in one sentence.

Your job is to wire up a toggle that adds and removes that class, and optionally persists the preference in localStorage so users do not have to flip it every time they return.

Method 1: The Chat Prompt Approach (Fastest)

If you want dark mode added without touching any code manually, Lovable’s AI builder can handle the full implementation through a single well-structured prompt.

Open your Lovable project, navigate to the chat box, and send a prompt like this:

“Add a dark mode toggle to this project. Use Tailwind’s class-based dark mode strategy. Store the user’s preference in localStorage so it persists across sessions. Detect the system preference on first visit. Place the toggle button in the navbar.”

Lovable will interpret the request, generate the relevant hook, update tailwind.config.ts if needed, and wire up the toggle component. The more specific your prompt, the cleaner the output.

Tips for a better result from the prompt:

• Specify where the toggle should appear (navbar, sidebar, footer)
• Mention localStorage persistence explicitly if you want it
• State whether you want a sun/moon icon, a switch, or a simple button
• Ask for system preference detection if you want the first visit to respect the user’s OS setting

This method is ideal if you want results quickly and plan to refine the output iteratively.

Method 2: Manual Implementation with React + Tailwind

For those who want full control over the implementation, here is the clean, production-ready approach.

Step 1 — Configure Tailwind for Class-Based Dark Mode

In your tailwind.config.ts, ensure dark mode is set to use the class strategy:

import type { Config } from “tailwindcss”;

const config: Config = {

  darkMode: “class”,

  content: [“./src/**/*.{ts,tsx}”],

  theme: {

    extend: {},

  },

  plugins: [],

};

export default config;

This tells Tailwind to activate all dark: variants when the dark class is on the <html> element.

Step 2 — Create a useDarkMode Hook

Create a reusable hook at src/hooks/useDarkMode.ts:

import { useEffect, useState } from “react”;

export function useDarkMode() {

  const [isDark, setIsDark] = useState<boolean>(() => {

    if (typeof window !== “undefined”) {

      const stored = localStorage.getItem(“theme”);

      if (stored) return stored === “dark”;

      return window.matchMedia(“(prefers-color-scheme: dark)”).matches;

    }

    return false;

  });

  useEffect(() => {

    const root = document.documentElement;

    if (isDark) {

      root.classList.add(“dark”);

      localStorage.setItem(“theme”, “dark”);

    } else {

      root.classList.remove(“dark”);

      localStorage.setItem(“theme”, “light”);

    }

  }, [isDark]);

  return { isDark, setIsDark };

}

This hook does three things. It checks localStorage for a saved preference first. If none exists, it reads the operating system preference using prefers-color-scheme. It then syncs the dark class on <html> whenever the state changes, and saves the preference back to localStorage.

Step 3 — Build the Toggle Component

Create src/components/DarkModeToggle.tsx:

import { Moon, Sun } from “lucide-react”;

import { useDarkMode } from “@/hooks/useDarkMode”;

import { Button } from “@/components/ui/button”;

export function DarkModeToggle() {

  const { isDark, setIsDark } = useDarkMode();

  return (

    <Button

      variant=”ghost”

      size=”icon”

      onClick={() => setIsDark(!isDark)}

      aria-label={isDark ? “Switch to light mode” : “Switch to dark mode”}

    >

      {isDark ? (

        <Sun className=”h-5 w-5″ />

      ) : (

        <Moon className=”h-5 w-5″ />

      )}

    </Button>

  );

}

The lucide-react icon library ships with Lovable projects by default, so Sun and Moon icons are already available. The Button component comes from shadcn/ui and responds correctly to both light and dark themes automatically.

Step 4 — Add the Toggle to Your Layout

Drop the component wherever makes sense for your project. In a typical Lovable navbar:

import { DarkModeToggle } from “@/components/DarkModeToggle”;

export function Navbar() {

  return (

    <nav className=”flex items-center justify-between px-6 py-4 border-b border-border”>

      <span className=”font-semibold text-lg”>Your App</span>

      <DarkModeToggle />

    </nav>

  );

}

Step 5 — Style Your Components for Dark Mode

With the class strategy active, you can now use dark mode variants anywhere in your project:

// Background that switches between white and dark gray

<div className=”bg-white dark:bg-gray-900″>

// Text that shifts from dark to light

<p className=”text-gray-900 dark:text-gray-100″>

// Card with border that adapts

<div className=”bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6″>

If you are using shadcn/ui components throughout your project, most of them already handle the dark: variants correctly out of the box using CSS custom properties. You often do not need to add anything.

Method 3: System Preference Only (No Toggle)

Some projects prefer to respect the user’s OS setting automatically without offering a manual toggle. This is the zero-JavaScript approach, and it works purely through CSS.

In your index.css or global stylesheet:

@media (prefers-color-scheme: dark) {

  :root {

    –background: 222.2 84% 4.9%;

    –foreground: 210 40% 98%;

    /* … other shadcn/ui CSS variables */

  }

}

The downside is that users cannot override their system preference inside your app. For most consumer-facing apps, offering the toggle is the better choice — 81.9% of Android users actively use dark mode on their devices, but many switch between modes depending on context.

Handling Images and Assets in Dark Mode

One area that trips up many projects is images and logos. A dark logo on a white background becomes invisible in dark mode.

Tailwind makes this simple:

{/* Show different logo versions based on mode */}

<img

  src=”/logo-light.png”

  className=”block dark:hidden h-8″

  alt=”Logo”

/>

<img

  src=”/logo-dark.png”

  className=”hidden dark:block h-8″

  alt=”Logo”

/>

For backgrounds and illustrations, use CSS filters sparingly:

/* Invert illustrations only in dark mode */

.dark .illustration {

  filter: invert(1) hue-rotate(180deg);

}

This works well for simple line art but not for photographs or brand imagery. For those, provide separate dark mode assets.

Fixing the Flash of Incorrect Theme (FOIT)

If your project uses React with client-side rendering — which Lovable projects do by default — users may briefly see the wrong theme on first load before JavaScript initializes. This is the flash of incorrect theme problem.

The fix is to add an inline script in your index.html before any other JavaScript loads:

<head>

  <script>

    (function() {

      const stored = localStorage.getItem(‘theme’);

      const prefersDark = window.matchMedia(‘(prefers-color-scheme: dark)’).matches;

      if (stored === ‘dark’ || (!stored && prefersDark)) {

        document.documentElement.classList.add(‘dark’);

      }

    })();

  </script>

</head>

Because this runs synchronously before the page renders, there is no flash. The correct class is already on <html> before React takes over.

In a Lovable project, you can ask the AI to add this inline script through a prompt, or add it manually by syncing your project to GitHub and editing index.html directly in your preferred editor.

Using the Prompt Method for Specific Fixes

Once you have the core toggle in place, you can use Lovable’s chat to handle refinements quickly. Some useful follow-up prompts:

To fix a specific component that looks wrong in dark mode:

“The card component on the dashboard looks broken in dark mode — the background isn’t switching. Fix it using Tailwind dark: variants.”

To add an animated transition between modes:

“Add a smooth transition when switching between light and dark mode — 200ms ease for background-color and color properties.”

To add a system preference option alongside manual toggle:

“Update the dark mode toggle to offer three options: light, dark, and system. Store the choice in localStorage and apply the correct class accordingly.”

Lovable’s AI understands the React and Tailwind context of your project, so these targeted prompts produce clean, integrated results rather than generic code snippets.

Best Practices Worth Following

A few principles that separate a well-implemented dark mode from one that is technically present but feels rough.

Never use pure black as your dark background. Pure #000000 creates harsh contrast against white text that causes eye fatigue. Use #111111, #1a1a1a, or Tailwind’s gray-900 and gray-950 instead.

Test your contrast ratios. WCAG AA accessibility requires a minimum 4.5:1 contrast ratio for body text. Dark mode can fail this just as easily as light mode if you are not checking.

Respect image context. Not every image should invert. Photographs and product images almost never should. Isolate your inversion rules carefully.

Give the toggle a clear label. Use aria-label on the toggle button so screen readers announce the current state and what will happen when clicked.

Do not animate on first load. The transition CSS should only apply after the initial theme is set, otherwise users see an animation every time they visit. Use a small JavaScript flag or a data-loaded attribute to control this.

<!– RIGHT SIDE STICKY BANNER –> <!– ============================================== RIGHT SIDE STICKY BANNER ============================================== PLACEMENT: Sticky on right side of article page H1: 🎯 Book More Meetings Faster H2: We build complete outbound systems — targeting, campaigns, and scaling — that deliver results. CTA: Book Strategy Meeting ============================================== BEFORE (content just before natural banner placement): –>

[BEFORE the banner section — at the end of “Best Practices Worth Following”] At this point in the article, the reader has learned the technical how-to and is thinking about what else can be optimized in their project. They are in an improvement mindset — the perfect moment to introduce a high-leverage offer.

[AFTER — the sticky banner appears anchored on the right side of the page from this point forward]

Common Dark Mode Issues and How to Fix Them

The toggle works but refreshing the page resets to light mode. You are not saving to localStorage. Make sure localStorage.setItem(“theme”, “dark”) or “light” is called inside your useEffect whenever the state changes.

Certain shadcn/ui components are not responding to dark mode. Check that darkMode: “class” is set in tailwind.config.ts and that your shadcn/ui CSS variables are defined correctly in index.css. The variables need both a :root block and a .dark block.

The toggle icon does not update visually. This usually means the state is updating but the component is not re-rendering. Confirm your hook is returning the isDark value and that the component is consuming it directly rather than reading from the DOM.

Dark mode works on desktop but not mobile. Some mobile browsers handle the prefers-color-scheme media query differently when a user has auto-brightness enabled. Always test on real devices, not just browser devtools mobile simulation.

There is a brief white flash before dark mode loads. This is the FOIT issue described earlier. Add the inline script to index.html to apply the dark class before React initializes.

Conclusion

Dark mode is something users expect, not something they request. With over 80% of device users actively using it, skipping the feature is a quiet way to push visitors away.

Lovable makes the implementation unusually clean. The React and Tailwind CSS stack handles the heavy lifting. Your job is to wire up a useDarkMode hook, apply the dark: utility classes consistently, handle the localStorage persistence, and drop a toggle into your navbar. Do it well, and you get a professional, accessible experience that your users will appreciate from the first visit.

Start with the prompt method if you want something working in five minutes. Layer in the manual hook approach when you need precise control. Test the contrast ratios, handle the first-load flash, and use separate image assets where needed.

Dark mode done right is invisible. Users just feel comfortable.