Die Dunkle Seite

Der Dunkelmodus (Dark Mode) des Online-Übungssystems

Autor: Immo Schulz-Gerlach, ZMI, FeU-Softwaretechnik
Version: 1.1 — 5. November 2019
[PDF-Version] [ePub-Version]

Was ist der Dark Mode?

Die Rückkehr der Dunkelheit

Come to the Dark Side
Come to the Dark Side

Nutzer früher PCs erinnern sich vielleicht noch an die Zeit, in der Computerbildschirme in der Regel grün oder bernsteinfarben leuchtende Buchstaben auf dunkler Mattscheibe anzeigten. Das hatte auch den Vorteil, dass das Flimmern der Röhrenmonitore weniger auffiel, da so die Anzahl leuchtender Pixel geringer war als bei invertiertem Bild. Auch nach Aufkommen von Farbmonitoren blieb es zunächst in der Regel dabei, dass der Hintergrund eher dunkel (oft dunkelblau) und die Schrift im Vordergrund eher hell (oft weiß oder gelb) gehalten wurde.

Mit den grafischen Oberflächen kamen dagegen meist weiß leuchtende Hintergründe mit schwarzer Schrift auf. Dieses Farbschema kommt insbesondere näher an schwarz gedruckten Text auf weißem Papier und wird insofern oft als „natürlicher“ empfunden. Mit neueren, flimmerfreien Bildschirmen wurde der helle Hintergrund auch weniger problematisch als früher.

Doch in letzter Zeit erlebt die helle Schrift auf dunklem Grund eine Renaissance, indem grafische Benutzeroberflächen einen Dunkelmodus anbieten, mit dunklen Hintergründen meist in Grautönen oder Schwarz, und mäßig hell leuchtender Schrift und Symbolen. Dabei wird dem Endbenutzer heute meist die Wahl gelassen, ob er den Dunkelmodus oder den herkömmlichen hellen Modus bevorzugt. Auch eine Zeitsteuerung (Dunkelmodus zwischen Sonnenuntergang und Sonnenaufgang, tagsüber heller Modus) ist inzwischen auf vielen Systemen möglich.

Der Dunkelmodus wird bevorzugt bei dunklerem Umgebungslicht aktiviert und soll z.B. durch geringere Lichtemission die Augen weniger belasten. Auch die Abstrahlung blauen Lichts dürfte dadurch reduziert werden, das möglicherweise zu Schlafproblemen führen oder die Netzhaut schädigen könnte. Auf OLED-Bildschirmen, wie sie insbesondere von teureren Smartphones verwendet werden, kann der Dunkelmodus auch helfen, Strom zu sparen, da bei diesen Displays jeder leuchtende Pixel Strom verbraucht, dunkle Pixel dagegen nicht.

Gerade in helleren Umgebungen ist dagegen oft der helle Modus vorzuziehen. Insbesondere spiegelnde »Glossy-Bildschirme« überstrahlen Spiegelungen von hellem Umgebungslicht nur im hellen Modus, während sich die Spiegelungen im Dunkelmodus verstärken.

Im Netz finden sich viele ausführlichere Vergleiche von Vor- und Nachteilen des Dark Modes, z.B. der Blog-Artikel »Why you should switch on Dark Mode«.

Dark Mode im OS und im Web

In diesem Zuge bieten mehr und mehr Betriebssysteme (OS) ihren Benutzern die Wahl an, ob sie einen hellen oder dunklen Modus zur Darstellung der Fensteroberfläche bevorzugen, ggf. auch zeitgesteuert. In macOS seit Mojave und in Windows 10 sowie in iOS und iPadOS ab Version 13 findet sich jeweils eine entsprechende Option in den Systemeinstellungen.

Systemeinstellungen macOS
Systemeinstellungen macOS
Systemeinstellungen Windows
Systemeinstellungen Windows

Betriebssystemweite Einstellungen führen zunächst zu einer Abdunklung der Betriebssystem-eigenen Bildschirmelemente wie Fensterrahmen, Symbolleisten etc. Wirklich sinnvoll wird ein Dunkelmodus aber erst, wenn sich auch die Fensterinhalte nach dieser Einstellung richten. Immer mehr Apps (Kurzform für Applikationen, also Anwendungssoftware) unterstützen inzwischen den betriebssystemweiten Dunkelmodus, indem sie ihre eigene Darstellung der jeweils in den Systemeinstellungen gewählten Präferenz anpassen.

Einen besonderen Fall stellen Webbrowser dar: Diese können zwar eigenständig ihre Fenster samt Symbol- und Tableisten abdunkeln, haben aber keinen direkten Einfluss auf die Darstellung beliebiger Webseiten, und hell leuchtende Webseiten mit strahlend weißem Hintergrund stellen für Dunkelmodus-Nutzer einen Störfaktor dar:

Blendend: Helle Webseite in ansonsten dunkler Umgebung
Blendend: Helle Webseite in ansonsten dunkler Umgebung

Inzwischen gibt es jedoch einen von immer mehr Browsern unterstützten Webstandard, über den Webseiten ihr Aussehen von der Benutzerpräferenz (bevorzugt der Benutzer den hellen oder dunklen Modus oder hat er keine Präferenz?) unterschiedlich festlegen können. Wenn der Browser diesen Standard unterstützt und die Benutzerpräferenz kennt (über eine Browser-interne Einstellmöglichkeit oder durch Abfrage der globalen Einstellungen des Betriebssystems), kann sich die Website damit effektiv automatisch an diese Präferenz anpassen. Die eigentliche „Arbeit“, nämlich das Festlegen einer alternativen Darstellung für den Dunkelmodus, muss aber die jeweilige Website leisten.

Browserunterstützung

Stand November 2019 sieht der mir bekannte Browser-Support wie folgt aus:

Dark Mode-Auswahl in Opera 63
Dark Mode-Auswahl in Opera 63

Dark Mode im Online-Übungssystem

Übungssystem-Startseite im hellen oder dunklen Modus
Übungssystem-Startseite im hellen oder dunklen Modus

Das Online-Übungssystem besitzt mittlerweile (ab Ende Oktober 2019) ein alternatives Dark-Mode-Design, das ein kompatibler Browser immer dann anwendet, wenn eine Dunkelmodus-Präferenz des Benutzers vorliegt.

Die Darstellung der Übungssystem-eigenen Seiten wurde speziell auf den Dunkelmodus optimiert. (Falls doch noch etwas übersehen wurde und Ihnen Seiten mit im Dunkelmodus nicht optimaler Darstellung auffallen sollten, melden Sie diese bitte an den Helpdesk.)

Etwas komplizierter sieht die Situation aber mit Inhalten aus, die nicht von Entwicklern des Online-Übungssystems beeinflusst werden können, sondern von Nutzern erstellt werden – insbesondere die Aufgabenstellungen, Korrekturen, Musterlösungen etc.
Bei solchen benutzererzeugten Inhalten könnte es im Dunkelmodus zu Darstellungsproblemen kommen. Stellt ein Aufgabenautor beispielsweise ein Diagramm ein, das aus schwarzen Linien besteht, jedoch selbst keine Hintergrundfarbe festlegt, sondern schlicht voraussetzt, auf weißem oder zumindest hellem Hintergrund angezeigt zu werden, und würde dieses im Dunkelmodus auf schwarzem Hintergrund abgebildet, wäre es praktisch nicht mehr zu erkennen. Oder legt ein Aufgabenautor fest, dass ein Teil seines Textes in dunkelblauer Farbe dargestellt werden soll, so wäre auch dieser Text auf schwarzem Hintergrund kaum noch lesbar.

Das Online-Übungssystem begegnet diesen potentiellen Problemen auf mehrere Weisen:

Die nachfolgenden Abschnitte gehen auf alle diese Punkte ausführlicher ein.


Hinweise für Studenten und andere Endnutzer

Die Standardansicht des Online-Übungssystems ist die helle Darstellung.

Wenn Sie jedoch in Ihrem Betriebssystem bzw. Browser (vgl. Opera) eine Präferenz für dunkle Darstellung eingeschaltet haben und der Browser den Dunkelmodus auch unterstützt (siehe Browserunterstützung), wechselt das Online-Übungssystem standardmäßig in die Dunkeldarstellung. In diesem Fall finden Sie unten rechts im „Footer“ jeder Seite eine Möglichkeit, den Dunkelmodus fürs Online-Übungssystem zu unterdrücken:

Checkbox zum Unterdrücken des Dark Mode
Checkbox zum Unterdrücken des Dark Mode

Diese Checkbox ist nur sichtbar, wenn eine Dunkelmodus-Präferenz eingestellt ist. Damit können Sie speziell das Online-Übungssystem anweisen, die globale Dunkelmodus-Präferenz zu ignorieren und die Inhalte wieder im hellen Design darzustellen.

Diese Option ist vor allem für den Fall eingeführt worden, dass Sie auf Inhalte stoßen, die im Dunkelmodus nicht fehlerfrei oder gut lesbar dargestellt werden (vgl. vorigen Abschnitt). Wenn Sie also gewisse Elemente (z.B. dunkelblaue Schrift auf schwarzem Grund) nicht lesen können oder z.B. den Verdacht haben, dass gewisse schwarze Flächen in einer Aufgabenseite eigentlich Inhalte enthalten sollten (z.B. schwarze Schrift oder schwarze Diagramme auf schwarzem Grund), dann deaktivieren Sie – ggf. auch nur kurzzeitig zur Probe – den Dunkelmodus einfach über diese Checkbox. Sie müssen dazu nicht extra die globale Farbschema-Einstellung Ihres Systems wechseln.

Wenn Sie diese Option markieren, wird das helle Design so lange aktiviert, bis Sie durch erneutes Betätigen der Checkbox die Unterdrückung wieder abschalten. Die Einstellung gilt insbesondere nicht nur für die gerade angezeigte Seite, sondern bleibt auch aktiv, wenn Sie im System navigieren.

Dazu wird diese Einstellung auf Ihrem Computer in einem Cookie gespeichert (vgl. Datenschutzbestimmungen). Beim Abschalten der Unterdrückung wird das Cookie sofort wieder gelöscht. Auch wenn Sie auf dem betroffenen Computer das Online-Übungssystem für mindestens einen Monat nicht benutzen, wird das Cookie wieder gelöscht.


Hinweise für Kursbetreuer und Aufgabenautoren

Als Kursbetreuer oder Aufgabenautor erstellen Sie ggf. selbst Webinhalte, insbesondere Aufgabenstellungen (Aufgabenformulare, Quittungs- und Korrekturvorlagen, Musterlösungsseiten, Korrekturhinweise), ggf. auch Hinweistexte zum Einblenden auf der Kursstartseite oder die »Message of the Day«, die auf verschiedenen Seiten als „Aktuelles“-Box eingeblendet wird.

Zunächst ist festzuhalten, dass der Dark Mode nur im aktuellen »Webdesign 2018« zur Verfügung steht. Falls Sie noch Inhalte wie Kursstartseite, Aufgabenübersichtsseite in einem älteren Design anbieten, erscheinen diese immer in der gewohnten hellen Darstellung.

Wenn Sie aber Inhalte im aktuellen Design anbieten, beschreibt dieser Abschnitt, was dabei für Dark-Mode-Probleme auftreten könnten und was man für bestmögliche Kompatibilität beachten sollte.

Kompatibilität von selbsterstellten Kursinhalten

Wie oben in Dark Mode im Online-Übungssystem schon festgehalten wurde, können nicht alle benutzererstellten Inhalte automatisch optimal im Dunkelmodus angezeigt werden. Das kann Sie in erster Linie betreffen, wenn Sie mit Textfarben arbeiten oder Bilder mit Transparenz verwenden, bei denen also der Seitenhintergrund (weiß im Light Mode, schwarz im Dark Mode) durchscheint.

Schriftfarben

Falls Sie einem Text Schriftfarben als sog. Inline-Styles zuweisen (z.B. durch Verwendung der Schriftfarbauswahl des eingebauten HTML-Editors, oder – falls Sie HTML-Quelltexte selbst erstellen – durch ein style-Attribut mit color-Property), dann sind diese ausgewählten Farben fixiert, werden also identisch sowohl im Light Mode als auch im Dark Mode verwendet. (Das Übungssystem-Stylesheet hat dann keine Handhabe, im Dark Mode die Farbe zu beeinflussen.)

Die folgende Abbildung zeigt beispielhaft die feste Zuordnung einer Schriftfarbe (Dunkelgrün) in einem WYSIWYG-Texteditor des Online-Übungssystems:

Feste Zuweisung einer Schriftfarbe
Feste Zuweisung einer Schriftfarbe

Das ist noch relativ unproblematisch, wenn Sie sowohl eine Vordergrundfarbe als auch eine Hintergrundfarbe festlegen. Legen Sie aber nur eine Schriftfarbe ohne Hintergrundfarbe fest, so geht das Online-Übungssystem davon aus, dass Sie diese Farbauswahl passend zu weißem Hintergrund getroffen haben. Und da eine Schriftfarbe, die auf weißem Grund guten Kontrast bietet, auf schwarzem Grund meist kaum noch lesbar ist (mit zu geringem Kontrast), wird das Übungssystem solche Textstellen im Dunkelmodus automatisch mit hellgrauem Hintergrund hinterlegen (siehe übernächste Abbildung).

Ähnlich verhält es sich, wenn Sie lediglich eine Hintergrundfarbe (z.B. Gelb) festlegen, aber keine Schriftfarbe. In dem Fall geht das Online-Übungssystem davon aus, dass diese Hintergrundfarbe auf schwarzen Text optimiert ist und versucht, den Vordergrundtext auch im Dark Mode in Schwarz einzufärben.

Eine mit Blick auf Dark-Mode-Kompatibilität meist bessere Alternative ist die Verwendung der Formatvorlagen, die das Online-Übungssystem im »Formate«-Menü anbietet:

Formatvorlagen-Auswahl
Formatvorlagen-Auswahl

Zumindest für typische Aufgaben wie gelbe Textmarkierung oder roten oder grünen Text gibt es dort Vorlagen zur Auswahl, die jeweils eine separate Ausprägung für den hellen und den dunklen Modus haben. Die Vorlage »Grüner Text« z.B, die in obiger Abbildung ausgewählt wird, legt für den hellen Modus ein Dunkelgrün, im Dunkelmodus dagegen ein deutlich helleres Grün als Schriftfarbe fest. Als Alternative zu fester Gelb-Hinterlegung gibt es auch Textmarker-Vorlagen, die beide im Dunkelmodus den schwarzen Hintergrund nur ein klein wenig „dunkelgelb“ einfärben, so dass die Markierung ohne Anpassung der Textfarbe verwendet werden kann.

Die folgende Abbildung zeigt die Auswirkungen sowohl der Formatvorlagen für grünen Text und Textmarker als auch der zuvor vorgenommenen »Inline-Styles« im Dunkelmodus:

Vergleich im Dunkelmodus
Vergleich im Dunkelmodus

Während es beim Textmarker-Beispiel noch Geschmacksache sein mag, ob Sie im Dunkelmodus die Textmarker-Formatvorlage mit der dunkelgelben Hinterlegung bei gleicher Textfarbe vorziehen oder doch die Kombination aus hellgelbem Hintergrund mit schwarzer Schrift (die aber im Dunkelmodus schon etwas „knallig“ wirkt), so ist die hellgraue Hinterlegung der dunkelgrünen Schrift schon eher eine Notlösung, die Formatvorlagen-Variante ist hier eindeutig vorzuziehen.

Hinweise für Nutzer der fortgeschrittenen Aufgabenerstellung

Wenn Sie selbst HTML-Dokumente erstellen und im Online-Übungssystem hinterlegen, haben Sie deutlich mehr Gestaltungsspielraum. Zum Beispiel könnten Sie Textfarben nicht nur als Inline-Style (also per style-Attribut in HTML-Elementen) hinterlegen, sondern auch eigene CSS-Dateien als Kursressourcen speichern und in ihrem HTML verwenden oder <style>-Elemente direkt in der HTML-Datei anlegen, in denen Sie Formatvorlagen definieren.

Für eigene CSS-Formatierungen greift die oben beschriebene Automatik nicht: Das automatische Hinterlegen von Text mit grauem Hintergrund passiert nur für Elemente mit einem style-Attribut, das eine color festlegt, und das automatische Schwarz-Färben der Schrift nur für Elemente mit style-Attribut, das einen background festlegt.

Falls Sie z.B. mit eigenen CSS-Styles für irgendwelche Inhalte eine schwarze Textfarbe ohne Hintergrundfarbe festlegen, so wird dieser Text im Dark Mode effektiv unsichtbar sein. In solchen Fällen sollten Sie Ihre Stylesheets so auslegen, dass Sie entweder immer Vordergrund- und Hintergrundfarbe zusammen passend festlegen, oder Sie erweitern das Stylesheet gleich um separate Farben für den Dark Mode per Media Query. Analog zu den Übungssystem-Styles sollten dann die Default-Styles für den Light Mode definiert werden und die abweichenden Farbschemata für den Dark Mode nur bei entsprechender Präferenz die Standardregeln überstimmen.

Die oben bereits beschriebenen Formatvorlagen, die im WYSIWYG-Editor im »Formate«-Menü zur Auswahl stehen, können Sie natürlich auch direkt in Ihrem HTML-Code verwenden, indem Sie Text (typsicherweise per span-Element) eine der folgenden Klassen zuordnen:

Als Beispiel dafür, wie man selbst in einer CSS-Datei verschiedene Schriftfarben für hellen und dunklen Modus definiert, sei anbei die Definition der (bereits zentral vorgegebenen) Klasse greenText zitiert:

.greenText {
    color: #8f0000;
}
@media (prefers-color-scheme: dark) {
    body:not(.disableDarkMode) .greenText {
        color: #00c300;
    }
}

Die Einschränkung der Dark-Mode-Regel auf den Selektor body:not(.disableDarkMode) bewirkt, dass die dort definierte hellere Schriftfarbe nicht generell angewendet wird, wenn vom Benutzer eine Dark-Mode-Präferenz vorliegt, sondern nur dann, wenn der Benutzer nicht die »Dunkelmodus unterdrücken«-Checkbox am Seitenfuß markiert hat.

Bilder

Bilder ohne Transparenz (wie insb. JPEG-Bilder) werden im Dark Mode und im Light Mode identisch dargestellt.

Problemfälle können dagegen Bilder sein, die Transparenz aufweisen, durch die also der Seitenhintergrund (i.d.R. weiß im Light Mode und schwarz im Dark Mode) durchscheint und von dem sich der Bildvordergrund jeweils abheben muss.

Solche Bilder könnten für schwarzen Hintergrund inkompatibel sein. Ein typisches Beispiel wäre ein Diagramm, in dem schwarze Pfeile und Formen auf transparenten Hintergrund gezeichnet wurden. Im Light-Mode bei weißem Seitenhintergrund ist das gut lesbar, aber wäre dieser Hintergrund im Dark Mode nun ebenfalls schwarz, wären diese Pfeile und Formen also schwarz auf schwarz und somit effektiv unsichtbar! Um das zu vermeiden, hinterlegt das Online-Übungssystem im Regelfall (siehe Standardmodus für Aufgaben) Bilder in Aufgabenressourcen automatisch mit hellgrauem Hintergrund (analog zur oben beschriebenen Hinterlegung von Text mit festgelegter Vordergrundfarbe).

Es gibt jedoch auch Bilder mit Transparenz, die kein Problem mit dem Dark Mode haben, bei denen eine graue Hinterlegung vielleicht sogar unschön aussieht. So sind Bilder insbesondere immer rechteckig, scheinbar andersförmige (z.B. runde) Abbildungen sind aber dadurch erzielbar, dass genau die Teile des rechteckigen Bereichs, die nicht zur Abbildung gehören sollen (außerhalb der gewünschten Form) transparent gelassen werden. In solchen Fällen sieht die hellgraue Hinterlegung nicht schön aus – auch wenn sie unschädlich ist.

Beispiel:
Die folgenden vier Beispielabbildungen zeigen jeweils denselben Seitenausschnitt mit zwei Bildern, die jeweils einen transparenten Hintergrund haben: Das erste ist ein kleines Diagramm mit schwarzem Pfeil auf transparentem Hintergrund, das zweite eine Deutschland-Form.

Im Light Mode sieht das wie folgt aus:

Beispiel-Bilder im Light Mode: OK
Beispiel-Bilder im Light Mode: OK

Im Dark Mode werden die Bilder (in Aufgabenseiten) im Standardmodus grau hinterlegt:

Beispiel-Bilder im Dark Mode, Standardmodus für Aufgabenseiten
Beispiel-Bilder im Dark Mode, Standardmodus für Aufgabenseiten

Man sieht, dass das Diagramm durch die graue Hinterlegung noch gut erkennbar ist. Bei der Deutschland-Form hingegen ist die graue Hinterlegung zwar nicht schädlich, aber auch nicht besonders schön.

Eine Einbindung ohne die graue Hinterlegung sähe dagegen wie folgt aus:

Beispiel-Bilder im Dark Mode ohne Hinterlegung
Beispiel-Bilder im Dark Mode ohne Hinterlegung

Die Deutschland-Form sieht ohne Hinterlegung besser aus. Das Diagramm hingegen wäre ohne die Hinterlegung nicht mehr vollständig lesbar.

Daher ist die graue Hinterlegung der Standardfall für alle Aufgabenressourcen: Die Wahrscheinlichkeit, dass Inhalte unleserlich werden, wird so minimiert (wenn auch nicht gleich Null), und eine suboptimale Darstellung von tatsächlich Dark-Mode-kompatiblen Grafiken (wie die Deutschland-Form) wird in Kauf genommen. Für Aufgaben, die schon vor der Einführung des Dunkelmodus bestanden oder allgemein solche, deren Autoren sich nicht mit dem Dark Mode beschäftigen, sondern die Aufgaben einfach im hellen Modus erstellen und die dunkle Ansicht nie testen, sollte das der beste Kompromiss sein.

Sie als Leser dieser Anleitung jedoch können Ihre Aufgaben gezielt für den Dark Mode optimieren und dann auch die graue Hinterlegung abschalten. Ein Optimieren besteht im Wesentlichen darin, sich um die Grafiken zu kümmern, die ohne Eingriffe auf schwarzem Grund unleserlich würden – wie das Diagramm in obigem Beispiel. Eine mögliche Lösung für eine Darstellung ohne graue Hinterlegung wäre hier die Konfiguration, dass das Diagramm im Dark Mode invertiert werden soll. Im hellen Modus bliebe es unverändert, im Dunkelmodus sähe es dagegen wie folgt aus:

Beispiel-Bilder im Dark Mode ohne Hinterlegung, Diagramm invertiert
Beispiel-Bilder im Dark Mode ohne Hinterlegung, Diagramm invertiert

Diese Invertierung ist (einzeln für betroffene Bilder) über einen vordefinierten Bildfilter aktivierbar. Nachdem für jedes betroffene Bild eine Optimierung erfolgt ist, deklarieren Sie Ihre Aufgabenseite abschließend als »vollständig Dunkelmodus-kompatibel«, um die graue Hinterlegung auszuschalten.

Eher als Notlösung für Fälle, in denen eine Optimierung zu viel Arbeit machen würde und der Standardmodus auch nicht optimal ist, gibt es als dritte Alternative noch die Möglichkeit, den Dunkelmodus für eine Aufgabe komplett zu deaktivieren.

Auf alle diese Möglichkeiten geht der folgende Abschnitt näher ein.

Kompatibilitätsmodi für Aufgaben

Für selbst erstellte Aufgabenressourcen (Aufgabenseite selbst, Quittungs- und Korrekturvorlagen, ggf. Korrekturhinweise und Musterlösung) bietet das Online-Übungssystem drei Darstellungsmodi an. Per Default ist der im letzten Abschnitt bereits mehrfach erwähnte Standardmodus aktiv. Alternativ können Sie explizit deklarieren, dass Ihre Seiten Dark-Mode-kompatibel sind (dann sollten Sie das natürlich auch getestet haben), oder Sie können den Dark Mode komplett unterdrücken.

Hinweis: Diese Modusauswahl steht nur in der Aufgabenerstellung zur Verfügung, nicht jedoch, wenn Sie die Funktion nutzen, einen eigenen Text für die Kursstartseite oder eine Message of the Day zu definieren. Falls Sie dort Grafiken verwenden, werden diese – anders als in Aufgaben – immer ohne Hinterlegung angezeigt!

Standardmodus

Der Standardmodus ist immer aktiv, so lange der Aufgabenautor nicht explizit einen anderen Modus wählt.

Derzeit (Oktober 2019) bewirkt der Standardmodus lediglich, dass alle eingebundenen Bilder im Dark Mode hellgrau hinterlegt werden2. Für Bilder ohne Transparenz fällt das nicht auf, da sie die Hintergrundfarbe komplett überdecken. Für Bilder mit Transparenz hat das die oben im Abschnitt Bilder beschriebenen und illustrierten Auswirkungen.

Deklarierte Dunkelmodus-Kompatibilität

Wenn Sie sichergestellt haben, dass alle Ihre Bilder auch ohne graue Hinterlegung im Dark Mode darstellbar sind, können Sie die Dunkelmodus-Kompatibilität Ihrer Aufgabe „erklären“.

Es ist allgemein sinnvoll, diesen Modus anzustreben, erfordert aber ggf. Anpassungsmaßnahmen der Bilder mit transparentem Hintergrund. In obigen Beispielen aus Abschnitt Bilder ist es zum Beispiel vorher nötig, eine Maßnahme zu treffen, durch die die Diagrammgrafik auch ohne graue Hinterlegung lesbar ist. Dazu könnte man z.B. die Bilddatei selbst bearbeiten und den transparenten Hintergrund durch einen festen Hintergrund (z.B. weiß) austauschen. Sinnvoller für den Dark Mode wäre aber in diesem konkreten Fall die Invertierung, wie sie oben ebenfalls bereits demonstriert wurde. Für letzteren Zweck steht ein vordefinierter Bildfilter bereit, den Sie der Grafik nur zuordnen müssen, wie im Folgenden beschrieben.

Vordefinierte Bildfilter für den Dark Mode

In den WYSIWYG-Editoren, wie sie insb. in der assistentengestützten Aufgabenerstellung oder beim Bearbeiten des Kursstartseite-Inhalts zum Einsatz kommen, können Sie zu eingefügten Bildern aus einer Liste vordefinierter „Klassen“ wählen und damit (neben automatischer Größenanpassung der Grafik) derzeit optional einen der folgenden beiden Dark-Mode-Filter aktivieren:

Dark-Mode-Bildfilter-Auswahl im WYSIWYG-Editor
Dark-Mode-Bildfilter-Auswahl im WYSIWYG-Editor

(Diese Dunkelmodus-Filter sind jeweils mit einer Bildgrößen-Option kombinierbar: »Maximal Seitenbreite« bedeutet, dass die Grafik verkleinert werden soll, falls es sie sonst zu breit für das Seitenlayout ist, insbesondere also in schmalen Fenstern oder auf Smartphones. »Feste Größe« deaktiviert diese Autoverkleinerung, übergroße Bilder müssen dann ggf. horizontal gescrollt werden.)

Wenn Sie eigenen HTML-Quellcode schreiben, z.B. in der fortgeschrittenen Aufgabenerstellung, können Sie diese beiden Filter ebenfalls verwenden, indem Sie dem img-Tag jeweils im class-Attribut die Klasse darkModeInvert bzw. darkModeLighten zuordnen. (Für die automatische Verkleinerung für sonst zu breite Bilder fügen Sie noch die Klasse fit hinzu.) Daneben haben Sie als HTML-Autor natürlich auch die Freiheit, eigene CSS-Stile zu definieren.

Dunkelmodus-Unterdrückung

Für Aufgabenseiten, die im Dark Mode nicht sinnvoll verwendbar sind und die Sie nicht mit vertretbarem Aufwand anpassen können oder wollen, können Sie den Dunkelmodus komplett unterdrücken. Das Online-Übungssystem wird sie dann trotz der allgemeinen Dark-Mode-Präferenz des Nutzers immer in der hellen Darstellung laden – genau so, als habe der Nutzer selbst die »Dunkelmodus unterdrücken«-Checkbox unten am Seitenfuß aktiviert.

Modusauswahl in Aufgabenerstellungsassistenten

In den Aufgabenerstellungsassistenten finden Sie jeweils unten unter Rubrik »Webdesign« am Seitenende eine Modusauswahl (sofern die Einbettung ins aktuelle 2018er Webdesign eingeschaltet ist):

Modusauswahl in Aufgabenerstellungsassistenten
Modusauswahl in Aufgabenerstellungsassistenten

Modusauswahl in fortgeschrittener Aufgabenerstellung

Wenn Sie Ihre HTML-Dateien selbst bearbeiten, statt sie von einem Aufgabenerstellungs-Assistenten generieren zu lassen, und Ihre Inhalte in ein Seitenlayout des Online-Übungssystems im aktuellen Webdesign eingebunden werden sollen, so zeichnen Sie ja den ins Seitenlayout zu übernehmenden Inhalt ihrer HTML-Datei durch Einfassung mit den Marken $EMBED- und $/EMBED aus. (Details dazu im Webdesign-Handbuch.)

Wenn Ihre öffnende Marke nur $EMBED lautet, wird automatisch der Standardmodus verwendet. Die beiden anderen Modi können Sie durch Ergänzung dieser Marke aktivieren:

Die Endmarkierung lautet in jedem Fall nur $/EMBED ohne weiteres Suffix.


  1. Aus technischen Gründen (diese Anpassung erfolgt allein durch eine CSS-Regel) beschränkt sich das auf so genannte Inline-Styles, also direkt im HTML-Code über ein style-Attribut festgelegte Textfarben. Sollten Seiten eigene „Formatvorlagen“ in Form von CSS-Stylesheets festlegen (nur in der fortgeschrittenen Aufgabenerstellung möglich), wird das nicht automatisch erkannt.  ↩

  2. Sollten sich im praktischen Einsatz noch weitere Problembereiche bei der Anwendung des Dark Mode auf bestehende Aufgaben ergeben, behalten wir uns vor, im Standardmodus weitere Maßnahmen zu ergreifen.  ↩