Intermediate5 min read
Was this chapter helpful?
Share
This chapter powers a skill
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. Add a sun and moon toggle button in the header so people can switch between them. The light version should use a warm white background and the dark version should use a soft dark gray (not pure black) background. Make sure all the text, cards, and borders still look good when switching."
Use this when you already have a website and want to add dark mode support.
"Add dark mode to my existing website. Put a sun and moon toggle button in the navigation bar so people can switch between them. Pick dark colors that match my current design. Make sure every card and section still looks good in both versions. Do not use pure black — use soft 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 when I switch to dark mode. Please go through every part of the site and make sure all backgrounds, text colors, borders, and shadows look right in both light and dark mode. Also fix the flash of the wrong colors when the page first loads."
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 colors for a split second before switching. Just ask your AI tool to fix the flash on page load.
Dark logos on dark backgrounds become invisible. Ask your AI tool to swap in a lighter logo when dark mode is on.
Sometimes parts of the site stay white even after switching. Tell your AI tool to find every place that still uses light colors and fix them.
Shadows that look great on white backgrounds become invisible in dark mode. Ask for lighter or glowing shadows when dark mode is on.
It is easy to forget a page or section. Always flip between light and dark and check every page of your site.
Your site should match the light or dark setting on the visitor's phone or computer by default. Just ask your AI tool to make it match the device setting.
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 sun and moon toggle button in the navigation bar. Switching should be instant. Start in whichever mode the visitor's device is already set to."
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."
When you ask your AI tool to add dark mode, make sure it covers these four things. If anything is missing, just ask for it.
The page should never flash the wrong colors for a split second when it first opens.
If the visitor already has their phone or computer set to dark mode, your site should start in dark mode too.
Once someone picks light or dark, the site should remember it next time they come back.
A clear sun and moon button in the navigation bar so anyone can switch with one click.
"Add dark mode to my website. Put a sun and moon toggle button in the navigation bar so people can switch with one click. Make the site start in dark mode if the visitor's device is already set to dark mode, and remember their choice next time they visit. Make sure the page never flashes the wrong colors when it first loads."
After it is set up: Walk through every page and look for spots that still look wrong. Then tell your AI tool: "On this page, the card / button / section still has light colors in dark mode. Please fix it."
