Unter Theme > Heller und dunkler Modus: | Option | Was sie bewirkt | |--------|-----------------| | Modus des Kurses | Welchen Modus die Lernenden sehen: Hell (der übliche, mit dem jedes Theme startet), Dunkel oder Systemeinstellung, die der Hell-/Dunkel-Einstellung ihres Geräts folgt und sich live ändert, wenn sich diese Einstellung ändert | | Modusschalter im Player | Fügt dem Player eine Schaltfläche mit Sonnen- oder Mondsymbol hinzu, mit der man zwischen hell und dunkel wechselt. Die Wahl wird im Browser der Lernenden gespeichert, Kurs für Kurs, und hat Vorrang vor dem Systemmodus | Solange der Modus Hell ist und der Schalter aus, ändert sich am Player nichts. Mit dem Modus Dunkel und ohne Schalter ist der Kurs „nur dunkel“.

Heller und dunkler Modus — Creator

Q: Die dunkle Variante erzeugen

Dunkle Variante erzeugen legt einen Ausgangspunkt an. Es kehrt Hintergrund und Text um, setzt jede Farbe der Palette, die das Theme verwendet, auf ihr Gegenstück mit umgekehrter Helligkeit (außer Bildschleier und alles, was auf einer Farbfläche liegt, etwa Schaltflächen) und prüft den Kontrast. Danach wechselt der Editor zu Dunkel, damit du nachbessern kannst, und ein Hinweis, Kontrast im dunklen Modus, sagt, ob alles den Mindestkontrast erreicht (4,5:1 für Text und 3:1 für alles andere) oder welche Felder ihn verfehlen und mit welchem Kontrast. Hat das Theme bereits eine dunkle Variante, wirst du vorher um Bestätigung gebeten: Die neue Variante ersetzt die vorige, und was du im Dunklen nachgebessert hast, geht verloren.

Q: Den dunklen Modus bearbeiten

Die Auswahl Angezeigter Modus (Hell / Dunkel) in der Kopfzeile des Theme-Editors zeigt, welchen Modus du bearbeitest und welchen die Vorschau zeigt. Unter Dunkel weist der Editor dich darauf hin, dass du den dunklen Modus bearbeitest, und was du änderst, gilt nur im Dunklen. Jedes Feld in jedem Tab sagt Wie im hellen Modus oder Eigener dunkler Wert. Hat es einen eigenen Wert, kannst du es mit Zurück zu wie im hellen Modus wieder auf hell setzen. Jeder Abschnitt bietet Ganzer Abschnitt wie im hellen Modus und zählt, wie viele seiner Felder einen eigenen dunklen Wert haben. Farben der Palette lassen sich im Dunklen nachbessern, aber die Variante fügt der Palette nie Farben hinzu und entfernt keine. Im Content-Editor erscheint dieselbe Auswahl (Hell / Dunkel), wenn das Theme Modi hat oder schon eine dunkle Variante besitzt. Sie ändert nur, wie du die Lektion beim Bearbeiten siehst; das Theme ändert sie nicht.

Q: Eigenes CSS und dunkler Modus

Eigenes CSS hat keine dunkle Variante: Was du schreibst, gilt in beiden Modi. Für alles, was nur im Dunklen zu sehen sein soll, nimm den Selektor [data-color-scheme="dark"]: Der Player setzt data-color-scheme („light“ oder „dark“, der gerade angezeigte Modus) auf sein Wurzelelement, wenn das Theme Modi hat: wenn der Modus nicht Hell ist oder der Schalter an ist. Ohne Modi fehlt das Attribut.

Q: Barrierefreiheit

Das Panel Prüfungen misst den Kontrast in beiden Modi; was nur im Dunklen scheitert, trägt das Label Im Dunkelmodus. Bei einem „nur dunklen“ Theme (Modus Dunkel ohne Schalter) wird nur das Dunkle gemessen, und seine Probleme sind die Hauptprobleme. Siehe Barrierefreiheits-Prüfung.

Ein Theme, zwei Modi

Ein Content verwendet weiterhin nur ein Theme. Was du wie gewohnt einstellst, ist der helle Modus; der dunkle Modus ist eine Variante desselben Themes, die nur speichert, was sich im Dunkeln ändert – in jedem beliebigen Feld: Farben, Bilder des Themes (etwa das Logo der Titelseite oder das Bild des Lektionskopfs), Schatten, Rahmen … Was die Variante nicht sagt, übernimmt sie vom hellen Modus. Eine Änderung im Hellen kommt also auch im Dunklen an, solange dieses Feld im Dunklen keinen eigenen Wert hat.

Hat das Theme keine dunkle Variante, sieht der dunkle Modus aus wie der helle.

Den Modus wählen

Unter Theme > Heller und dunkler Modus:

Option	Was sie bewirkt
Modus des Kurses	Welchen Modus die Lernenden sehen: Hell (der übliche, mit dem jedes Theme startet), Dunkel oder Systemeinstellung, die der Hell-/Dunkel-Einstellung ihres Geräts folgt und sich live ändert, wenn sich diese Einstellung ändert
Modusschalter im Player	Fügt dem Player eine Schaltfläche mit Sonnen- oder Mondsymbol hinzu, mit der man zwischen hell und dunkel wechselt. Die Wahl wird im Browser der Lernenden gespeichert, Kurs für Kurs, und hat Vorrang vor dem Systemmodus

Solange der Modus Hell ist und der Schalter aus, ändert sich am Player nichts. Mit dem Modus Dunkel und ohne Schalter ist der Kurs „nur dunkel“.

Die dunkle Variante erzeugen

Dunkle Variante erzeugen legt einen Ausgangspunkt an. Es kehrt Hintergrund und Text um, setzt jede Farbe der Palette, die das Theme verwendet, auf ihr Gegenstück mit umgekehrter Helligkeit (außer Bildschleier und alles, was auf einer Farbfläche liegt, etwa Schaltflächen) und prüft den Kontrast.

Danach wechselt der Editor zu Dunkel, damit du nachbessern kannst, und ein Hinweis, Kontrast im dunklen Modus, sagt, ob alles den Mindestkontrast erreicht (4,5:1 für Text und 3:1 für alles andere) oder welche Felder ihn verfehlen und mit welchem Kontrast.

Hat das Theme bereits eine dunkle Variante, wirst du vorher um Bestätigung gebeten: Die neue Variante ersetzt die vorige, und was du im Dunklen nachgebessert hast, geht verloren.

Den dunklen Modus bearbeiten

Die Auswahl Angezeigter Modus (Hell / Dunkel) in der Kopfzeile des Theme-Editors zeigt, welchen Modus du bearbeitest und welchen die Vorschau zeigt. Unter Dunkel weist der Editor dich darauf hin, dass du den dunklen Modus bearbeitest, und was du änderst, gilt nur im Dunklen.

Jedes Feld in jedem Tab sagt Wie im hellen Modus oder Eigener dunkler Wert. Hat es einen eigenen Wert, kannst du es mit Zurück zu wie im hellen Modus wieder auf hell setzen.
Jeder Abschnitt bietet Ganzer Abschnitt wie im hellen Modus und zählt, wie viele seiner Felder einen eigenen dunklen Wert haben.
Farben der Palette lassen sich im Dunklen nachbessern, aber die Variante fügt der Palette nie Farben hinzu und entfernt keine.
Im Content-Editor erscheint dieselbe Auswahl (Hell / Dunkel), wenn das Theme Modi hat oder schon eine dunkle Variante besitzt. Sie ändert nur, wie du die Lektion beim Bearbeiten siehst; das Theme ändert sie nicht.

Eigenes CSS und dunkler Modus

Eigenes CSS hat keine dunkle Variante: Was du schreibst, gilt in beiden Modi. Für alles, was nur im Dunklen zu sehen sein soll, nimm den Selektor [data-color-scheme="dark"]:

[data-color-scheme="dark"] .meine-klasse {
  box-shadow: none;
}

Der Player setzt data-color-scheme („light“ oder „dark“, der gerade angezeigte Modus) auf sein Wurzelelement, wenn das Theme Modi hat: wenn der Modus nicht Hell ist oder der Schalter an ist. Ohne Modi fehlt das Attribut.

Wo man es sieht

Der Modus gilt gleichermaßen in der Vorschau, im Freigabelink und in den Web- und SCORM-Exporten. Auch die nativen Video- und Audio-Steuerelemente folgen dem angezeigten Modus.

Das PDF ist immer hell.

Barrierefreiheit

Das Panel Prüfungen misst den Kontrast in beiden Modi; was nur im Dunklen scheitert, trägt das Label Im Dunkelmodus. Bei einem „nur dunklen“ Theme (Modus Dunkel ohne Schalter) wird nur das Dunkle gemessen, und seine Probleme sind die Hauptprobleme. Siehe Barrierefreiheits-Prüfung.

Exportieren und importieren

„Heller und dunkler Modus“ ist einer der Abschnitte beim Exportieren und Importieren eines Themes: Er enthält den Modus des Kurses und den Schalter. Die dunkle Variante hat kein eigenes Kästchen: Sie reist mit jedem Abschnitt, den du ankreuzt.