„Dark mode“ für Moodle

Wenn man in Moodle auf einfache Art einen „dark mode“ implementieren möchte, kann man dazu den CSS-Filter invert()  verwenden. Damit die Einstellungen dann nicht nur für die aktuelle Seite gelten, hinterlegt man diese mittels localStorage im Speicher des Browsers.

Wie das im Detail funktioniert, zeigt diese Anleitung.

Einrichten des „dark modes“

Zur Einrichtung des „dark modes“ werden zwei Elemente gebraucht:

1. Ein Schalter, mit dem der „dark mode“ ein- und ausgeschaltet werden kann.
2. Ein Script, welches die Stellung des Schalters, respektive der gespeicherten Variable auf allen Seiten ausliest.

Script für den Schalter

Als Schalterelement wird eine Checkbox verwendet, die über eine id eindeutig angesprochen werden kann.

<p><input type="checkbox" 
    id="checkbox" value="darkmode" 
    onchange="switchDarkMode()"> 
    Dark Mode
</p>

Diese Schaltfläche und das nachfolgende Script können an beliebiger Stelle in Moodle eingebaut werden:

• im Dashboard, z.B. in einem Text-Block
• in einem Kurs, z.B. mittels einem Textblock
• …

Damit der Zustand der Checkbox ausgelesen werden kann, wird folgendes Script benötigt. Dieses wird am gleichen Ort eingefügt wie die Checkbox.

<script>

function switchDarkMode() {
    if (document.querySelector("#checkbox").checked) 
    {
        localStorage.setItem("darkmode", true);
        changeToDarkMode();
    } 
    else 
    {
        localStorage.setItem("darkmode", false);
        changeToDarkMode()
    }
}


function setDarkMode() {
    if (localStorage.getItem("darkmode") == "true")
        document.querySelector("#checkbox").checked = true
    else if (localStorage.getItem("darkmode") == "false") 
        document.querySelector("#checkbox").checked = false;
}

window.onload = (event) => {
    setDarkMode();
};


</script>

Die Funktion switchDarkMode() liest die Checkbox aus und speichert deren Zustand in einer lokalen Browservariablen ab. Diese Funktion wird aufgerufen, sobald die Checkbox angeklickt wird.

Die Funktion setDarkmode() überprüft, ob im Browserspeicher bereits eine Einstellung hinterlegt ist und passt die Einstellung der Checkbox (aktiviert oder nicht) entsprechend an.

Script für den „dark mode“

Damit durch die Aktivierung der Checkbox der „dark mode“ eingeschaltet werden kann, muss ein weiteres Script so eingebaut werden, dass es auf allen relevanten Seiten ausgeführt wird. Bei älteren Moodleversionen kann dazu ein Block verwendet werden, der auf allen Seiten angezeigt wird. Unter Moodle ab 4.0 bindet man das Script am besten über die Administration > Darstellung > Zusätzliches HTML ein. Dazu benötigt man Administrationsrechte.

<script>

function changeToDarkMode() {
    if (localStorage.getItem("darkmode") == "true") 
    {
        page = document.createElement('style')
        page.innerHTML = "html {filter: invert(100%) hue-rotate(180deg);}";
        document.body.appendChild(page); 
        page = document.createElement('style')
        page.innerHTML = "html :is(iframe,video,img,.dashboard-card,.tile) {filter: invert(100%); hue-rotate(180deg);}";
        document.body.appendChild(page); 
    } 
    else if (localStorage.getItem("darkmode") == "false") 
    {
        page = document.createElement('style')
        page.innerHTML = "html {filter: invert(0%) hue-rotate(0deg);}";
        document.body.appendChild(page); 
        page = document.createElement('style')
        page.innerHTML = "html :is(iframe,video,img,.dashboard-card,.tile) {filter: invert(0%) hue-rotate(0deg);}";
        document.body.appendChild(page); 
    }
}

</script>

Die Funktion changeToDarkMode liest den im Browserspeicher hinterlegten Wert aus und fügt dann auf jeder Seite den passenden CSS-Code ein. Dieser sorgt dafür, dass die entsprechenden Farbwerte aller HTML-Elemente invertiert werden. Die Webseite wird also als Negativ dargestellt.

Weil eine negative Anzeige bei Elementen wie Bildern oder Videos nicht erwünscht ist, werden diese Elemente in einem zweiten Schritt noch einmal invertiert. Und weil das Negativ von Negativ wieder dem Positiv entspricht, werden die so behandelten Elemente dann wieder wie gewohnt dargestellt.

Wird der „dark mode“ deaktiviert, dann wird der invert-Filter wieder auf die Normaleinstellung zurückgesetzt.

Einschränkungen

Der „dark mode“ funktioniert nur auf Seiten, auf welchem die beschriebenen CSS-Formatierungen auch tatsächlich zusätzlich eingefügt werden. Ist dies nicht der Fall, wird die entsprechende Seite ganz normal abgebildet.

Einige Farbkombinationen werden auf Geräten mit geringem Schwarzwert nur schlecht abgebildet. Dies ist beispielsweise bei hellen Grautönen der Fall.

Je nach Kursformat und verwendeten Plugins müssen allenfalls weitere CSS-Selektoren in die Ausnahmeliste eingefügt werden. Da diese sich im Pseudo-Selektor :is() befinden, ist eine Erweiterung aber einfach zu bewerkstelligen.

Verwendung im Unterricht

Abgesehen von der „Ästhetik“ einer „dark mode“-Darstellung hat der Einsatz des Scripts keinen weiteren Einfluss auf den Unterricht. Auf vielen Geräten kann dadurch auch kein Strom gespart werden, da die stromverbrauchende Hintergrundbeleuchtung bei vielen Bildschirmtypen immer an ist.

In Klassen, in welchen die Lernenden schon Grundkenntnisse in der Webprogrammierung haben, können hingegen sowohl die verwendeten Techniken wie CSS-Selektoren und Speichermöglichkeiten von Daten im Browser besprochen werden. Allenfalls kann die Gelegenheit auch genutzt werden, um darauf hinzuweisen, dass quelloffene Software von den Nutzenden einfach den eigenen Bedürfnissen angepasst werden kann, als dies bei proprietärer Software der Fall ist.