I am in a continuous search on how to add dark mode to everything. Looking back, I've been adopting it for half of my life. You see I have been a user of Ableton Live for over 10 years and it has had "dark mode" for around the same time. We just didn't know it was called dark mode yet. The same can be said for Photoshop although I was never a frequent user of it.

It was during the long hours of music production that I noticed, when switching to a light interface from Ableton, my eyes would literally get this slight sting. I initially assumed this was them adjusting and was therefore a natural part of vision in the human anatomy (It is to some degree). Later I started becoming concerned about the impact light themes had on my eyes. There is no solid evidence that dark UI is better for your eyes because there is still a considerable degree of the blue light spectrum present but in essence many users now wonder how we ever managed without dark variants of our user interfaces. Placebo or hype - they aren't going anywhere and are essential for any modern digital product.

Due to my permanent use of dark mode I missed a simple UX problem that was uncovered when testing if my site would switch themes in tandem with system preferences - My favicon was white and therefore was barely visible on browsers in light mode.

The solution is simple however it is only possible with an SVG favicon at this stage. I thought of a hacky way to do it with a plain .ico file that involved incrementing the URL parameter (mentioned further on) but it was more trouble than it was worth. Additionally it entails maintaining two separate files. Besides, I try and use vector as much as possible because it never pixelates. Here is the code of the favicon on this very site:

1  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
2    <style>
3      path {
4        fill: black;
5        stroke: black;
6      }
7      @media (prefers-color-scheme: dark) {
8        path {
9          fill: white;
10          stroke: white;
11        }
12      }
13    </style>
14    <path d="M279.513 171.369c26.118 3.831 46.228 14.02 60.332 30.564C353.948 218.478 361 240.508 361 268.025c0 34.135-10.534 61.041-31.602 80.721-21.069 19.68-49.537 29.52-85.405 29.52-22.984 0-40.744-2.961-53.28-8.883v25.079c0 27.865 2.438 49.982 7.313 66.353-8.01 4.18-16.541 9.927-25.595 17.241-9.055 7.315-16.716 14.63-22.984 21.944-4.875-2.09-8.358-5.921-10.447-11.494.348-3.135 1.219-10.537 2.612-22.205 1.393-11.669 2.09-27.778 2.09-48.328V118.6c0-25.775 5.57-47.632 16.714-65.57 11.144-17.938 25.683-31.26 43.617-39.968C221.967 4.354 240.685 0 260.186 0c26.814 0 47.97 7.837 63.466 23.511 15.496 15.674 23.244 37.27 23.244 64.786 0 23.337-5.832 42.058-17.498 56.165s-28.294 23.075-49.885 26.907zM234.578 355c24.124 0 42.392-6.792 54.804-20.375C301.794 321.042 308 301.885 308 277.157c0-28.908-8.216-50.85-24.649-65.827-16.433-14.976-39.158-22.465-68.178-22.465-.699-4.18-1.049-7.14-1.049-8.881 0-5.224.875-9.056 2.623-11.494 24.823-2.786 43.966-10.535 57.426-23.248 13.461-12.713 20.191-30.04 20.191-51.982 0-19.156-5.07-34.655-15.208-46.497C269.016 34.92 254.682 29 236.15 29c-15.733 0-27.358 5.486-34.875 16.457C193.758 56.427 190 75.497 190 102.663v234.052C200.489 348.905 215.348 355 234.578 355z" />
15  </svg>

The <style> tag can be embedded directly within the SVG and used to apply any fills or strokes to your favicon based on the prefers-color-scheme media query which will detect the users OS theme settings and indirectly the browser color. Don't forget to update your meta tag with a version parameter appended at the end to flush it out of existing visitors browsers.

1<link rel="shortcut icon" href="https://b-bot.dev/seo/favicon.svg?v=2"/>

You can test it on this page by changing your own preferences and refreshing.

Godspeed my fellow Sith.