Lovablefeaturebeginner
Add Dark Mode to Lovable App
Add a dark mode toggle with localStorage persistence, system preference detection, and anti-flash script.
What you'll get
Dark mode with toggle, system preference detection, localStorage persistence, and no white flash on load.
The Prompt
Add dark mode support to my Lovable app. REQUIREMENTS: 1. Add a theme toggle button (sun/moon icon) in the navbar that switches between light and dark mode. 2. On first visit, detect the user's system preference using prefers-color-scheme media query. Default to system preference. 3. Store the user's choice in localStorage under key "theme" with values: "light", "dark", or "system". 4. Apply a "dark" class to the <html> element when dark mode is active. Use Tailwind's dark: variant for styling. 5. Add an anti-flash script in the <head> that reads localStorage before the page renders to prevent a white flash on dark-mode pages. 6. Create a consistent dark color palette: background #0F172A, surface #1E293B, text #E2E8F0, muted text #94A3B8, border #334155. 7. Ensure all existing components look good in both modes. Update cards, buttons, inputs, modals, and navigation. 8. Add a three-way toggle: Light, Dark, System (follows OS preference). DATABASE: - No database changes needed. Theme stored in localStorage. SECURITY: - Sanitize localStorage value to prevent XSS via theme key.
Replace these variables
| Variable | Replace with |
|---|---|
| [DEFAULT_THEME] | Default theme if no preference is set (light, dark, or system) |
Tips for best results
Use Tailwind's dark: prefix consistently — it's the easiest way to maintain both themes.
Test every page in both modes before shipping — buttons and inputs are commonly missed.
Follow-up prompts
Add theme customization
Add a settings page where users can choose from multiple color themes (blue, green, purple, orange) in addition to light/dark mode.
Add auto-scheduling
Add an option to automatically switch to dark mode during evening hours (after 7 PM) based on the user's timezone.