I asked for a light mode and ended up redesigning my whole site

I asked for a light mode. That was the whole request. A while later I had a new home page, a rebuilt blog, new icons and a logo with a blinking cursor in it. None of it was planned, and each step only made sense because of the last.

#Adding a light mode

My old site had the dark class hard-coded on <html>, so it only really had a dark mode. The newer pages used classes like bg-black-color with no light equivalent, so flipping the theme gave white text on a white page.

I liked the dark look, so I left it alone and added a light version beside it. Claude Code found every colour class without a dark: partner and added one. Light is the default now, and dark is remembered in localStorage.

#Then it got out of hand

With light mode working, the home page suddenly looked dated. So I asked Claude Design for something polished that didn't look like every other website, and told it to keep the animations. It built live pages from my real content.

The first pass was good. After that it was notes. Keep the typing headline. Put real logos in the brand strip and let the mouse scrub it. Add the contact form it forgot. Add a faint field of characters in the hero that the pointer reveals, then make it faster and half as strong.

Claude Code ported each design into React, with the colours as CSS variables. Then the blog wanted the same treatment, and the favicon, and the share images. Four rounds of logo options was probably three too many. I ended up with a dark blob, a lime ring and a blinking cursor after the P.

#The bugs hid in the other theme

All three only showed up when I checked both themes.

In light mode my "Hire me" button had black text and went black on hover. A rule making links inherit their colour was beating my button class on specificity.

The services list rendered as one big blue block. The highlight depended on id === 1, but the ids had become strings, so it never matched. White text on blue had hidden it in dark mode.

And the GitHub mark is white on transparent, so on a white skills chip it just vanished. I inverted that one icon.

#And then phones

I asked what the hover effects do on a phone. Claude checked: plain :hover everywhere, so nothing useful. Rather than edit every rule, we added a small PostCSS plugin that wraps each :hover rule in a media query at build time, so a rule like this:

@media (hover: hover) {
  .btn:hover { background: var(--ink); }
}

only applies on devices that can really hover.

Then I opened the site on my iPhone and found another miss. The brand strip said "Move your mouse across to scrub", and a phone has no mouse. It only listened for pointer movement, so touching it did nothing. The fix was to react to press and hold on the left or right side, and to swap the hint text with a media query. A desktop test would never have caught that.

If you start with "add a light mode", budget for a redesign.