Add Dark Mode to an AI-Generated Page (The Right Way)

TLDR: Real dark mode is not a dark background. It is two coordinated color sets, light and dark, driven by the same CSS variables, plus a toggle and respect for the visitor’s system setting. When you ask AI to “make it dark,” it usually darkens one thing and breaks the rest. Ask instead for every color as a variable, a light theme on the root, a dark theme under a data-theme attribute, prefers-color-scheme support, and a toggle that remembers the choice. Copy-paste prompts are below.

You built a clean page with AI, you look at it at night, and you think: this should have a dark mode. So you type “make it dark mode,” hit enter, and get back something that looks broken. The background went dark, sure. But now the body text is a smear of gray on gray, a couple of buttons vanished entirely, and one card is still glowing bright white in the corner like it did not get the memo.

That is the normal result, and it is not the model being dumb. It is you asking for a paint color when what you actually want is a system. Good dark mode is the second thing, and once you ask for it correctly, the same AI builds it cleanly. This guide covers what dark mode really is under the hood, the specific mistakes AI makes when you are vague, and the copy-paste prompts that produce a proper light and dark theme with a toggle.

What dark mode actually is

Here is the mental model that fixes everything. A page has a lot more colors than you think: the background, the text, muted secondary text, link color, borders, card surfaces, button fills, shadows. In a page with no theming, every one of those colors is hardcoded in a hundred places. When you say “make it dark,” the model finds the background and darkens it, and the other ninety-nine colors stay exactly where they were. That is why things disappear.

Real dark mode flips the whole relationship. Instead of hardcoding colors, you name each one once as a variable, --bg, --text, --muted, --accent, --border, --card, and every element refers to the variable instead of a literal color. Now you have a single control panel. To make a dark theme, you redefine that short list of variables, and the entire page updates at once because everything was pointing at the names, not the values.

So the real request to the AI is not “make it dark.” It is “put every color behind a variable, then give me two sets of those variables.” Say that, and dark mode stops being a hack and becomes a switch.

Why AI dark mode usually breaks

When you are vague, models fail in a handful of predictable ways. Knowing them tells you exactly what to specify.

• Only the background changed. The page is dark but the text is still dark too, so paragraphs turn into unreadable mud. The model updated one color and left the rest.
• A few elements got left behind. One card, one banner, or the footer keeps a hardcoded light background and glares against everything else. These are the colors the model wrote as literals instead of variables.
• Buttons and links vanish. A button with a fixed light fill and light text is invisible in light mode too, but you only notice in dark mode. Anything that relied on the old background for contrast breaks.
• Charts and logos clash. Photos usually survive, but inline SVG, charts, and icon colors are frequently hardcoded and end up as dark shapes on a dark field, or blinding bright ones.
• No memory. The toggle works, but reload the page and it snaps back to light, because the choice was never saved.

Every one of these is a “you did not ask for it” problem, not a limitation. The next two sections give you the language that closes each gap.

The right way, in one prompt

You do not need to write CSS yourself. You need to describe the system precisely enough that the AI builds it correctly. Here is the pattern, and it is worth reading once so you understand what you are asking for even though you are pasting it.

The setup has three moving parts. First, prefers-color-scheme, a browser signal that tells the page whether the visitor’s device is set to light or dark, so the page can open in the theme they already prefer. Second, a data-theme attribute on the page that a toggle can flip to override that default. Third, localStorage, a small bit of browser memory that remembers their choice for next time. Ask for all three and you get dark mode that feels native.

Here is the copy-paste prompt. Give it to Claude, ChatGPT, or Gemini alongside your existing page, or use it when you first ask for the page.

Add a proper dark mode to this page. Requirements:

1. Define every color as a CSS custom property on :root: background,
   surface/card, primary text, muted text, border, accent, and shadow.
   Rewrite the existing styles to use these variables, not hardcoded colors.
2. Provide a light theme as the default on :root, and a dark theme under
   a [data-theme="dark"] selector that redefines the same variables.
3. On first load, respect the visitor's system setting using the
   prefers-color-scheme media query, so it opens in their preferred theme.
4. Add a small toggle button (sun/moon) fixed in a corner that switches
   between light and dark by setting the data-theme attribute.
5. Save the choice to localStorage and apply it on the next visit before
   the page renders, so there is no flash of the wrong theme.
6. Keep all of this in the single self-contained HTML file, with the
   CSS and JavaScript inlined. No external libraries.

That last line matters. Asking for one self-contained file keeps the result easy to preview and publish. If you want the deeper version of that idea, see how to get self-contained HTML from AI.

Getting the dark palette right

A dark theme is not the light theme with the colors inverted. Pure white text on pure black is harsh and buzzes on the eyes, and a flat black background makes cards impossible to see. A few rules keep it comfortable, and you can hand them straight to the AI.

• Do not use pure black or pure white. Reach for a very dark gray like #15151c for the background and a soft off-white like #e8e8ef for text. The slight step down from maximum contrast reads as calmer and more designed.
• Lift surfaces with lightness, not borders. In light mode, cards often sit on the page with a shadow. In dark mode, shadows barely show, so make cards a touch lighter than the background (#1e1e28 on #15151c) to separate them.
• Desaturate the accent slightly. A vivid accent that pops on white can vibrate on dark. Nudging it a little lighter and less saturated keeps it readable.
• Mind the images and charts. Tell the AI to drive chart, icon, and SVG colors from the same variables, and to dim very bright full-width images a little in dark mode so they do not glare.

This is the same discipline that separates a designed page from a default one in either theme. If color choices are where you tend to get stuck, the piece on color palettes that make AI pages look designed pairs well with this one, and typography tips for AI pages covers the text side.

Here is a short follow-up prompt for tuning the dark palette after the structure is in place:

The dark theme works but feels harsh. Adjust it: use a dark gray
background instead of pure black, off-white text instead of pure white,
make cards one shade lighter than the background so they separate,
and desaturate the accent color slightly so it does not vibrate.
Keep the light theme exactly as it is.

Light vs dark: what each mode is for

You do not have to pick a side. Supporting both, and defaulting to the visitor’s system setting, is the modern standard. But it helps to know why people prefer each.

The takeaway is not “dark mode is better.” It is that offering both, and letting the visitor’s own preference decide the default, respects how and where they are actually reading.

How do I add dark mode without touching code?

You do not have to. The whole point of the prompt above is that the AI writes the CSS and the small bit of JavaScript for you. Your job is to describe the system clearly, preview the result, and give specific feedback when something looks off, the same iterative loop that works for any AI page. If a theme switch reveals an element that got left behind, tell the AI exactly which one: “the pricing card still has a white background in dark mode, make it use the surface variable.” Precise feedback fixes it in one pass. For the general version of that skill, see how to iterate on AI-generated pages.

Frequently asked questions

How do I add dark mode to an AI-generated page? Do not ask the AI to just make the background dark. Ask it to define every color as a CSS variable, set a light theme on the root element and a dark theme under a data-theme attribute or the prefers-color-scheme media query, then add a small toggle button that flips between them. One set of variables drives both themes, so nothing gets left behind in the wrong color.

Should dark mode follow the system setting or a toggle? Both. Use prefers-color-scheme so the page opens in whatever the visitor already prefers, then add a toggle so they can override it, and save the choice to localStorage so it sticks next time. Ask the AI for all three and it wires them together.

Why does my AI dark mode have unreadable text or invisible buttons? Because only the background changed and the other colors stayed put. Dark text on a dark background disappears, and a button with a hardcoded light color vanishes. Make every color a variable, including text, borders, cards, and shadows, so switching themes updates all of them at once.

Does dark mode change my charts and images? It can, so plan for it. Photos usually look fine, but charts, logos, and inline SVG often use fixed colors that clash on dark. Tell the AI to drive those colors from the same variables and to slightly dim large bright images in dark mode.

Get the finished page in front of people

Once the toggle works and both themes look right, the last step is getting the page somewhere people can actually open it, with the theme switch and everything else still live. This is where a lot of good work stalls, because a raw HTML file on your laptop is not something you can send, and the moment you screenshot it you have thrown away the very interactivity you just built.

That is what VisiblePage is for. Paste your HTML or drop a ZIP and you get a live link in seconds, no build step or hosting setup. The dark mode toggle works, the system-preference detection works, the charts respond, because you are sharing the real page, not a picture of it. Pages serve fast from the edge, you can make them public, private, or password-protected, and every page has one canonical link, so when you tweak the dark palette later and republish, everyone who has the link sees the update. You can even point your own custom domain at it.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.