Don't underestimate the power of the Dark Site

You may run into dark mode in more and more places nowadays, like in operating systems or even in browsers. This inspired me to create the dark variant of the site too.

The two color schemes next to each other

The development part was surprisingly easy. I only needed to add a media query and fill it with rules.

@media (prefers-color-scheme: dark) {
}

For the sake of simplicity, I just copied the original CSS into this block, removed everything not color-related, and adjusted the values in the rest. After that, the only remaining thing to fix was the images. So I made a dark variant of the header image, and for the SVG images, I used the following trick:

image.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css"><![CDATA[
    .shape { display: none; }
    .shape:target { display: inline; }
  ]]></style>
  <g class="shape" id="light">
    <!-- source of the original image -->
  </g>
  <g class="shape" id="dark">
    <!-- source of the modified dark image -->
  </g>
</svg>

This can be referenced in CSS in the following way:

#something {
  background-image: url('image.svg#light');
}
@media (prefers-color-scheme: dark) {
  #something {
    background-image: url('image.svg#dark');
  }
}

It was pretty fun, so I highly recommend it to anyone as a light evening pastime activity.

Ez a bejegyzés magyar nyelven is elérhető: Ne becsüld alá a sötét oldal hatalmát

Have a comment?

Send an email to the blog at deadlime dot hu address, or visit the tweet related to this post.

Want to subscribe?

We have a good old fashioned RSS feed if you're into that, and you can also follow the blog on Twitter.