deadlime

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.