Themes für Visual Studio Code an Systemvorgabe anpassen

Mittlerweile unterstützen viele Betriebssysteme einen Dark-Modus, in welchem das System ein dunkles Theme wählt, mit welchem der Nutzer in den dunklen Stunden nicht geblendet werden soll. Auch die automatische Umstellung, je nach Tageszeit, ist in den meisten Betriebssystemen, wie z.B. macOS einstellbar. Die entsprechenden Apps können dann auf diese Systemvorgabe reagieren. Der freie Codeeditor Visual Studio Code, ist standardmäßig mit einem dunklen Theme konfiguriert.

Die entsprechende Einstellung im Editor

Allerdings unterstützt Visual Studio Code auch die automatische Auswahl des Themes auf Basis der Systemvorgabe. Dazu muss in den Einstellungen nach dem Wert:

window.autoDetectColorScheme

gesucht werden und dieser gesetzt werden. Anschließend wählt Visual Studio Code das passende helle oder dunkle Theme anhand der Systemvorgabe. Wem die Standardthemes nicht zusagen, der kann über die Parameter workbench.preferredLightColorTheme und workbench.preferredDarkColorTheme in den Einstellungen die entsprechenden Themes setzen.

Dark Mode auf Webseiten

In vielen Betriebssystemen wie z.B. macOS oder iOS zog in den letzten Versionen ein sogenannter Dark Mode ein. Bei diesem Modus werden die Elemente des Betriebssystems auf dunklere Farben eingestellt. Damit wird der Nutzer am Abend bzw. in der Dunkelheit nicht mehr so stark geblendet. Wird allerdings bei aktiviertem Dark Mode eine Webseite aufgerufen, welche von Haus aus mit hellen Farben arbeitet, so wird der Nutzer wieder geblendet. Mittlerweile können Webseiten sich allerdings dem gewünschten Farbschema anpassen. Dazu muss im CSS eine entsprechende Media Query definiert werden:

@media (prefers-color-scheme: dark) {
body {
    background-color: rgb(24, 26, 27);
    color: rgb(214, 211, 205);
}
}

Ist nun der Dark Mode im Betriebssystem aktiviert, wird das präferierte Farbschema übermittelt und kann dann CSS entsprechend umgesetzt werden.

seeseekey.net im Dark Mode

Wer die eigene Webseite mit einem dunklen Farbschema sehen möchte, kann dazu die Firefox-Erweiterung Dark Reader nutzen.

Dark Reader
Dark Reader
Price: Free

Mit dieser Erweiterungen können Webseiten automatisch in ihre dunklen Versionen überführt werden. Für die Entwicklung einer eigenen dunklen Variante können die neuen Farbwerte nun mittels der Entwicklertools des Browsers aus der Ausgabe der Erweiterung extrahiert werden.