Prefers Color Shceme and Other Site Changes

Simply put, prefers-color-scheme is the new hotness. Okay, well maybe it isn’t, but dark modes certainly are. A dark mode option has actually been added to the more recent releases of iOS, Android, and Windows 10. Hell, the Edge team is also bringing a high contrast media query to Chromium.

This site was originally designed as a dark themed site. I honestly don’t remember a time when I didn’t use a dark themed text editor, so I had chosen my colour scheme based on what I was familiar with. Luckily, prefers-color-scheme has an option for when a device prefers a light scheme, so I didn’t have to rejig too much of my existing CSS.

CSS Custom Properties are the real hotness

Custom properties have been around a bit longer when compared to the prefers-color-scheme query, and apparently it has very reasonable browser support. On the surface, custom properties seem pretty boring, but the real magic is when you bring them together with other CSS features like media queries. You can implement a very basic dark or light mode without much additional code, or add device specific padding without code duplication.

This is a trivial example, but it demonstrates my point:

$someVariable: rgba(0,0,0,1);

@mixin colourChangeExample ($primaryColour) {
  body {
    color: $primaryColour;
  }
}

@media (prefers-color-scheme: dark) {
  $someVariable: rgba(255,255,255,1);
  @include colourChangeExample($someVariable);
}

@include colourChangeExample($someVariable);

That SCSS generates outputs the following CSS:

@media (prefers-color-scheme: dark) {
  body {
    color: white;
  }
}
body {
  color: black;
}

Compare that to a version using custom properties:

:root {
  --someVariable: rgba(0,0,0,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --someVariable: rgba(255,255,255,1);
  }
}

body {
  color: var(--someVariable);
}

As your rules grow, there will be less duplicated code. This makes the payload you serve smaller, and honestly, the code is no more difficult to reason about.

Unfortunately, here be dragons if you are using Sass with custom properties. Sass is a compile time preprocessor, and because of this, Sass just isn’t able to get the most out of custom properties. For example using built-in functions with a custom property as a parameter simply will not work.

Backdrop filter is getting more support

Chrome finally shipped an unprefixed version of backdrop-filter. To celebrate that the div at the top now has a blur effect that applies a slight blur to anything behind it. Sometimes the design world seems totally cyclical to me. We have returned to a point where frosted glass effects are almost in style again, and that is excellent.

Slowly updating this Hugo template

As you may or may not know, this site currently uses Hugo as a static site generator. There isn’t much to the template I use, but I have been slowly making tweaks. One such tweak is the inclusion of the most common tags I use on the home page.

That isn’t all though as the site includes a proper canonical link tag on article pages now. I noticed that the search console seems to struggle with trailing slashes for my site, so I hope a proper canonical tags can help out poor GoogleBot.