~/writing · post

two skins, one site

july 3, 2026 metadesign

Before building this site I collected a folder of screenshots from personal sites I admire — statement heroes, digital gardens, all-monospace icon libraries, 88×31 badge walls. They split into camps that didn’t obviously mix, and I couldn’t pick one. So I didn’t.

The whole design is CSS custom properties. One skeleton, two coats of paint:

  • lab notebook — layered near-blacks, warm orange, sharp corners, mono labels.
  • catppuccin garden — mocha base, mauve accents, gradient name, rounder everything.

The switcher in the corner sets a data-skin attribute on <html> and writes your choice to localStorage; an inline script applies it before first paint so there’s no flash. Everything downstream — the heatmap, the pixel widget, the filter pills, even the generative project thumbnails — reads the same variables, so the entire site re-tints from one attribute.

[data-skin='garden'] {
  --canvas: #181825;
  --accent: #cba6f7;
  /* ...and the rest is just CSS doing its job */
}

Total cost of the second theme: one block of variables and a 15-line script. Pick both. It’s allowed.