A brief how-to automatic preferred theme detection for websites and how it is easily integrated.
Since a couple of years most operating systems offer light and dark themes.
Till today most Websites either don’t provide different themes, simply ignore the user’s settings in OS and Browser or require a manual change of the theme by the user. To show that it simply ain’t neccesary to spent this effort in theme switchers etc. within some „user settings pages“ by clever use of available web features, I wanna show you how the automatic theme switcher within my homecockpit blog website https://joachim.herwigs.info/projects/homecockpit is done.
It provides automatic detection of the user preferred theme (dark / light) and switching of the website theme without the need of spending lots of efforts into a seperate theme.
All the website has been designed for a light theme (white backgrounds etc.) and then afterwards assigned an additional _darkmode which is included into the styles.sass via the
The darkmode-sass just takes care about only a few things as in general I did not have to declare too much stuff to get to an quite ok looking dark theme that is applied automatically when the user has set his Theme preferance to „dark“.
And some filters to invert the colors with small adjustments for instance to headlines, which I kept with the original color tone but made it brighter. That brings the big benefit, that if I want to change the original colors for instance from a blue tone to a red tone, it is automatically applied to the dark theme as well without requiring any changes in there.
The change of only one single color for headlines and links would have the following effect:
The Page logo which is of course an SVG also received an theme switching block: