This page is now also available in dark. The so-called "dark mode" can be activated via the corresponding icon in the header menu.

In addition, almost all new operating systems offer the possibility to define the mode as standard. Application manufacturers and website operators can react to this and present a dark display accordingly when dark mode is activated.

Dark mode: why actually?

Anyone who has ever used a smartphone in the evening with dimmed lights will have noticed that it dazzles, especially with bright layouts. Dark colors are much easier on the eyes, especially in low light conditions: the solution to this is dark mode. The dark mode is an alternative, dark layout, which can be activated if necessary. A positive side effect is that using Dark Mode on mobile devices with OLED displays consumes less power. Admittedly, the dark mode seemed a bit unfamiliar to me at first, but in the direct comparison of two applications it is now reassuring: The display dazzles less, even in normal light conditions.

Activating in the operating system

Windows

On Windows, the "Dark Mode" can be activated under Settings/Colors "Turn on dark mode for apps"

Android

In Android, dark mode can be enabled in the settings under "Display".

In Google Chrome for Android, dark mode can be enabled independently of the global settings.

The setting "System Default" uses the setting previously defined in the Android settings

KDE- Ubuntu

In KDE-Ubuntu, "Dark-Mode" can be selected in System Preferences, Appearance, Colors and by selecting a dark scheme, e.g. "Breeze-Dark":

As an example, Firefox adopts this setting after restart, Google Chrome currently does not.

Test dark mode in Google Chrome

In Google Chrome, the dark mode can be tested in the development tools. To do so, right-click on the background, "Examine", or alternatively press the F12 key:

Web pages: prefers-color-scheme

To make a web page automatically use the setting of the operating system, the CSS media query "prefers-color-scheme" is used. CSS properties within this query can extend the existing CSS properties:

<style>
    @media (prefers-color-scheme: dark) {
            body {
                background-color: #000;
                color:#fff;
            }
    }
</style>

Chrome: on all web pages

To enable dark mode on all web pages, even if they don't support dark mode, you can enable a "flag" in Chrome by clicking on the URL: chrome://flags

With this setting, the browser will automatically try to invert all colors and not adjust images if possible. Google Chrome's behavior is somewhat curious at this point, since pages that actually support dark mode themselves are also provided with the inverted colors.