April 27, 2020 | 17:01

Using Systemwide Darkmode settings on your Website

Systemwide dark/lightmode settings are becoming an standard in most Operating Systems like Android, iOS, MacOS, Manjaro and many many more. So why not use it on your Website or in your Webapp?

CSS-Media Queries

To check whether the user prefers the dark mode, a CSS3 feature called Media Queries is used. Media Queries are quite powerful, not only you can check for the preferred color-scheme. They are also used for responsive design based on the screen-size or specific styles for the printed versions.


For easy changes to the color theme you can utilize CSS Variables. You can define them like that.

html {
    --variable-1: #dfdfdf;
    --variable-2: url(https://example.com/example.png)

To use them just use var(<varname>) where you want the value to be inserted.

React to the setting

To activate the different themes we will put following code in our CSS file

html {
    --color: #42464c;
    --background: #f8f8f8;

@media (prefers-color-scheme: dark) {
    html {
        --color: #dfdfdf;
        --background: #333435;
        --color-subtitle: #ddd;

If the user activated darkmode the second definition will overrule the first one and the variables change, and so does your page.

© marschall.systems 2024

This Site is affected by your System Dark/Lightmode

Powered by Hugo & Kiss'Em.