Everyone has dark mode but what about orange mode?

Orange is my favorite color. Yes I am in my late thirties but it’s still ok to have a favorite color in my book. Deal with it.

I remember exploring a theming system back in 2023 when I introduced dark mode, but everything pointed to a bunch of very complicated systems and libraries. It felt like cracking a walnut with an atomic bomb. So I put the idea on ice.

Even back in 2023 the eventual goal was having a theming system in place, but I couldn’t quite figure it out and decided that two modes were fine for now. Gradually though, every commit, pull request, and merge pushed me closer to the real goal.

In previous versions, managing styles was a nightmare. I flip flopped between handling styles at the component level, which was a big mistake, and eventually breaking things out into about 15 variables sitting at the top of my global.scss file. This worked, but it always felt like a hack and was still not easy to maintain.

This solution isn’t perfect by any means, but it’s a good place to plant the flag. The honest version of this is probably something like v15 or v16, but for clarity I’m calling this v1 of theming for the site.

Introducing theming v1

Right now this site supports dark, light, and my favorite orange theme. Everything is handled by that nifty icon in the top right. Click around and cycle through them a bit. Depending when you’re reading this, there might be more. METAL mode is coming soon, I promise.

With theming v1, the days of brittle scoped variables are gone. Those were a nightmare to debug. Also gone is the extra 600 lines living at the top of my global.scss file.

// Current themes available in their own neat files
{
  _dark-theme.scss,
  _light-theme.scss,
  _orange-theme.scss,
  // ... more to come
}

Each theme follows the same schema and lives neatly in its own file within the app. I finally have a clear path to explore and build more themes for this site, which was the goal all the way back in 2023.

// Theme schema
.dark-theme {
  // Colors
  --surface000: #0b0b0b;
  --surface100: #171717;
  --surface200: #221b28;
  --surface300: #29232f;
  --surface400: #4e3f58;
  --surface500: #929292;
  --text-primary: #ededed;
  --text-secondary: #b3b3b3;
  --text-tertiary: #747474;

  // Decorations
  --inverse: #ffffff;
  --divider: #444444;
  --link: #d1d1d1;
  --link-hover: #ffffff;

  // States
  --card-bg: #23272f;
  --card-bg-hover: #2c313a;
  --card-text: #f3f3f3;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
  --card-border-hover: var(--surface500);
}

So what’s next?

While this solution isn’t perfect, it’s a solid v1. It’s reliable, understandable, and not dependent on some external library or system that I have to constantly keep an eye on for updates. I predict a v2 will drop sometime in early 2026 as well.

There’s always a better way to do something in code. This is just the first version that actually works and feels reliable. Near term, and depending when you’re reading this, I want to add a few more citrus flavored themes like lime and cherry. I also want to finally ship METAL mode, which is in progress. I’m still figuring out how far I want to push dynamic fonts there.

Stay tuned.