The Redesign That Became a Button
I kept wanting to redesign this site without wanting to lose it. So instead of picking a new look, I built a theme picker into the header.
Every couple of months I get the urge to redesign this site. I open the homepage, squint at it, and start collecting screenshots of other people’s blogs like I’m building a case against my own.
The case never holds up. I like this design. It’s minimal, it loads fast, and the teal has settled into how I think the site should feel.
But I kept falling for other colors anyway. One week I wanted the warm paper tones of a coffee shop menu. Another week I wanted everything washed in pink because the cherry blossoms outside were showing off.
A redesign would mean betting the whole site on one of those moods. So I did nothing for a long time, which is the cheapest redesign there is.
Then the obvious idea finally landed. I don’t have to commit. I can pick a theme the way I pick music: whatever fits the visit.
The widget
There’s now a palette icon in the header, next to the dark mode toggle. Click it and you get a little panel I call “Style me”: nine looks counting the default.
Each theme swaps the accent color, the backgrounds, and the borders, in both light and dark mode. The default stays the default, so if you never touch the picker, the site looks exactly the way I designed it. Whatever you choose is saved in your browser, and the site greets you the same way next visit.
Four seasons of Japan
The four themes I reach for most are the seasons. Living in Japan recalibrates how you notice them: the year here moves in distinct colors, and I wanted the site to be able to move with it.
Haru
Spring
Sakura pink, soft and washed out, like the week the petals fall.
Natsu
Summer
Deep forest green, the cicada-loud shade of a shrine path in July.
Aki
Autumn
Burnt maple orange with warm paper backgrounds, momiji season.
Fuyu
Winter
Snow white with a cold steel blue, the quiet kind of cold.
They sit in their own group near the top of the picker: 春 (haru, spring), 夏 (natsu, summer), 秋 (aki, autumn), and 冬 (fuyu, winter). The rest of the grid keeps the moods that don’t map to a calendar: Matcha, Mocha, Crimson, and Indigo.
Surprise me
While building themes I kept making ones too loud for the grid, so they got their own button. “Surprise me!” rolls one of five 90s throwbacks: Netscape ‘95, Hot Dog Stand, Retro, Comic Zone, and MS-DOS.
The Comic Sans one is exactly as bad as you hope. The Retro one turns the headings into arcade pixels and lays faint scanlines over the page. I have no excuse for Hot Dog Stand.
How it works
The whole feature is one attribute. Every color on this site already resolves through CSS custom properties for dark mode, so a theme is a block of variable overrides scoped to a data-style attribute on the html element. Picking “Aki” sets data-style="aki", the variables cascade, and every component recolors itself without knowing themes exist.
Your choice persists in localStorage, and a tiny inline script applies it before the first paint, so there’s no flash of the default colors on reload. Astro ships everything as static HTML. The only JavaScript on the page is the picker itself and that one-line restore.
The details I fussed over
Switching themes crossfades over 600 milliseconds. Material Design’s motion guidance puts large, full-screen transitions in the 300 to 500 millisecond range and warns that longer starts to feel slow. I run slightly past that on purpose: the fade trails the 500 millisecond sun-and-moon animation on the dark mode toggle, so the page seems to dim because the sun went down.
That toggle is my favorite detail. Tap it and the sun sets below the button while the moon rises into place, and the colors follow a beat behind. If your system asks for reduced motion, all of it switches instantly instead.
So that’s the redesign. I didn’t move a single pixel of layout, and the site now has fourteen looks, twenty-eight if you count dark mode. The palette icon is right up there in the header. Go mess with my website.