120-Byte Responsive CSS for Auto-Adapting Light/Dark Mode

March 26, 2023 • Front-end • CSS

Caption: A product photo of a brain, designed by Dieter Rams.

tl;dr

:root{color-scheme:light dark;font-family:system-ui,sans-serif;max-width:70ch;padding:2ch;margin:auto}img{max-width:100%}

There was this post I saw on HN a while ago. By Gaurav Koley: 339 bytes of responsive CSS. Even though the post has sparked good and inspiring discussion on HN, it was another post that made me actually act on my personal website’s CSS. By Jim Nielsen: CSS System Colors

After numerous comments, Gaurav Koley updates the snippet and mentions that they were able to decrease the CSS to 296 Bytes. This is really cool. But after reading Jim Nielsen post, I thought there were some low hanging fruits ripe for a pick up.

This is the 296 Bytes of CSS Gaurav Koley ended up with:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  background: #fafafa;
}
img {
  max-width: 100%;
}
a {
  color: #2ecc40;
}
h1,
h2,
strong {
  color: #111;
}

And this is my “cover” of that snippet that costs 152 Bytes (120 Bytes minified):

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
}
img {
  max-width: 100%;
}

This is ~half the size of the previous experiment, while adding light mode and dark mode support and colors for all elements. In fact, the minified version is only 120 Bytes!

:root

color-scheme: light dark; doesn’t have an effect if you put it under body so there you go. More, I didn’t put the rest of the attributes under body to save some Bytes.

color-scheme: light dark;

I think, if one wants to speedrun minimalist CSS they should not try and eat their cake too. Indicating specific colors is a luxury, especially when you throw dark/light mode into the mix. Defining colors can get overwhelming real quick. Also, colors are choice, therefore you can’t satisfy everyone. So color-scheme: light dark; creates a layer of trust. It’s similar to impartial democratic institutions.

font-family: system-ui, sans-serif;

system-ui seems to be pretty widely accepted according to CAN I USE (system-ui), especially considering your developer blog’s audience. No one. xd joking. I meant people who most likely use the latest versions of their browsers. So I’m not sure but maybe there are further optimization opportunities here.

max-width: 70ch;
padding: 2ch;

In terms of measurements, I’ve found a previous experiment by JRL.NINJA: 58 bytes of css to look great nearly everywhere super helpful. They already arrived at a conclusion in terms of sizing, based on discussions between HN users. So why reinvent the wheel, huh?

a tool to help with system colors

After working for a while with system colors, I noticed that there’s no good IDE support on them to make it easy for the developer to choose colors while developing. So I built this simple 15-minute page to see what’s going on. By me: System Colors Reference/Visualizer. Fun fact, these colors will look different on different OS and even on different browsers on the same OS. Which in my opinion makes using system colors super chaotic in a positive way. Obviously this would be only feasible for personal websites or small side projects. But yeah, works for me.