Intermediate5 min readShare
Was this chapter helpful?
Share
Give your users the option to switch between light and dark themes. It looks professional and is easier on the eyes.
Dark mode is not just a trend. There are real benefits for your users and your site.
Easier on the eyes in low-light environments. Many people browse at night and prefer dark backgrounds.
On phones and laptops with OLED screens, dark mode uses significantly less battery because dark pixels use less power.
Having a dark mode toggle shows attention to detail. Users expect it on modern websites and apps.
The same UI rendered in light and dark mode. Notice how colors, borders, and text adapt while the layout stays identical.
Here is a summary of your recent activity and upcoming tasks.
Project Update
3 new tasks assigned today
Here is a summary of your recent activity and upcoming tasks.
Project Update
3 new tasks assigned today
Pure black + white
Hard on the eyes
bg: #000 text: #FFFBadDark gray + off-white
Much easier to read
bg: #1A1A2E text: #E4E4E7GoodSign Up Form
Don't forget form inputs! These still use light styles.
Here are ready-to-use prompts for adding dark mode to your project. Copy the one that fits your situation.
Use this when you are building a site from scratch and want dark mode from the beginning.
"Build me a portfolio website with both light and dark mode. Use next-themes for theme switching. Add a toggle button in the header. The light theme should use a warm white background and the dark theme should use a dark gray (not pure black) background. Make sure all text, cards, and borders look good in both themes."
Use this when you already have a website and want to add dark mode support.
"Add dark mode to my existing website using next-themes. Add a sun/moon toggle button in the navigation bar. Create a dark color palette that matches my current design. Make sure every component, card, and section looks good in both light and dark mode. Do not use pure black, use dark gray shades instead."
Use this when your dark mode exists but some parts do not look right.
"My dark mode has issues. Some cards and sections still show white backgrounds in dark mode. Go through every component and make sure all backgrounds, text colors, borders, and shadows adapt properly to both light and dark themes. Also fix any flash of wrong theme on page load."
Getting the colors right is the most important part of dark mode. Here are the rules to follow.
Dark gray backgrounds
Use #1A1A2E or #121212 instead of pure black
Slightly muted white text
Use #E4E4E7 instead of pure white for body text
Elevated surface colors
Cards should be slightly lighter than the background
Subtle borders
Use dark gray borders, not invisible or too bright ones
Pure black backgrounds
#000000 is too harsh and creates too much contrast
Pure white text
#FFFFFF on dark backgrounds causes eye strain
Overly saturated colors
Bright neons on dark backgrounds are hard to read
Low contrast text
Text must still be readable. Check contrast ratios.
"Review my dark mode color palette. Make sure I am not using pure black or pure white. The background should be a dark gray, text should be slightly off-white, and cards should be a lighter shade than the background. Fix any contrast issues."
Watch out for these issues when adding dark mode to your site.
The site briefly shows the wrong theme before switching. This happens when the theme is not loaded before the page renders. Using next-themes prevents this.
Dark logos on dark backgrounds become invisible. Tell your AI tool to add different logos or add a subtle background behind images for dark mode.
If colors are hardcoded (like bg-white everywhere), dark mode will not work. Use CSS variables or Tailwind dark: classes instead.
Box shadows that look great on white backgrounds become invisible in dark mode. Use lighter or glowing shadows for dark themes.
It is easy to forget a page or component. Always toggle between themes and check every page of your site.
Your site should respect the user's operating system theme by default. next-themes handles this automatically.
Copy-paste these prompts into your AI tool to apply what you just learned.
ADD A DARK MODE TOGGLE
"Add dark mode to my app with a toggle button. Use CSS variables for colors so switching is instant. Default to the user's system preference."
GENERATE A DARK COLOR PALETTE
"Create a dark color palette for my app. The current light colors are [list colors]. Generate dark equivalents that maintain contrast and readability."
If you are building with Next.js, the next-themes library is the easiest way to add dark mode. Here is why and how to ask your AI to set it up.
Prevents the flash of wrong theme that happens with basic implementations.
Automatically detects if the user prefers light or dark mode from their device settings.
Remembers the user's preference so it stays the same when they come back.
Just one component to wrap your app and a simple hook to toggle themes.
"Install next-themes in my Next.js project and set it up properly. Wrap the app in the ThemeProvider, add a light/dark toggle button with sun and moon icons in the navigation bar, and make sure there is no flash of unstyled content on page load."
After setup: Once next-themes is installed, you can use Tailwind's dark: prefix in your styles. Tell your AI tool: "Go through all my components and add dark: variants for backgrounds, text, and borders using Tailwind."
