{"id":842,"date":"2022-10-29T09:26:00","date_gmt":"2022-10-29T09:26:00","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=842"},"modified":"2025-01-20T18:58:26","modified_gmt":"2025-01-20T18:58:26","slug":"dark-mode-fuer-moodle","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/dark-mode-fuer-moodle\/","title":{"rendered":"&#8222;Dark mode&#8220; f\u00fcr Moodle"},"content":{"rendered":"<p>Wenn man in Moodle auf einfache Art einen &#8222;dark mode&#8220; implementieren m\u00f6chte, kann man dazu den CSS-Filter <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter-function\/invert\" target=\"_blank\" rel=\"noopener\">invert()<\/a> \u00a0verwenden. Damit die Einstellungen dann nicht nur f\u00fcr die aktuelle Seite gelten, hinterlegt man diese mittels localStorage im Speicher des Browsers.<\/p>\n<figure id=\"attachment_843\" aria-describedby=\"caption-attachment-843\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-843\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418-1024x576.png\" alt=\"\" width=\"525\" height=\"295\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418-1024x576.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418-300x169.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418-768x432.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418-1536x864.png 1536w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/10\/Bild_2022-10-29_100347418.png 1920w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-843\" class=\"wp-caption-text\">Ein einfacher &#8222;dark mode&#8220; kann in Moodle mit wenig Aufwand zu Verf\u00fcgung gestellt werden.<\/figcaption><\/figure>\n<p>Wie das im Detail funktioniert, zeigt diese Anleitung.<\/p>\n<h2>Einrichten des &#8222;dark modes&#8220;<\/h2>\n<p>Zur Einrichtung des &#8222;dark modes&#8220; werden zwei Elemente gebraucht:<\/p>\n<ol>\n<li>Ein Schalter, mit dem der &#8222;dark mode&#8220; ein- und ausgeschaltet werden kann.<\/li>\n<li>Ein Script, welches die Stellung des Schalters, respektive der gespeicherten Variable auf allen Seiten ausliest.<\/li>\n<\/ol>\n<h3>Script f\u00fcr den Schalter<\/h3>\n<p>Als Schalterelement wird eine Checkbox verwendet, die \u00fcber eine id eindeutig angesprochen werden kann.<\/p>\n<pre>&lt;p&gt;&lt;input type=\"checkbox\" \r\n    id=\"checkbox\" value=\"darkmode\" \r\n    onchange=\"switchDarkMode()\"&gt; \r\n    Dark Mode\r\n&lt;\/p&gt;\r\n\r\n<\/pre>\n<p>Diese Schaltfl\u00e4che und das nachfolgende Script k\u00f6nnen an beliebiger Stelle in Moodle eingebaut werden:<\/p>\n<ul>\n<li>im Dashboard, z.B. in einem Text-Block<\/li>\n<li>in einem Kurs, z.B. mittels einem Textblock<\/li>\n<li>&#8230;<\/li>\n<\/ul>\n<p>Damit der Zustand der Checkbox ausgelesen werden kann, wird folgendes Script ben\u00f6tigt. Dieses wird am gleichen Ort eingef\u00fcgt wie die Checkbox.<\/p>\n<pre>&lt;script&gt;\r\n\r\nfunction switchDarkMode() {\r\n    if (document.querySelector(\"#checkbox\").checked) \r\n    {\r\n        localStorage.setItem(\"darkmode\", true);\r\n        changeToDarkMode();\r\n    } \r\n    else \r\n    {\r\n        localStorage.setItem(\"darkmode\", false);\r\n        changeToDarkMode()\r\n    }\r\n}\r\n\r\n\r\nfunction setDarkMode() {\r\n    if (localStorage.getItem(\"darkmode\") == \"true\")\r\n        document.querySelector(\"#checkbox\").checked = true\r\n    else if (localStorage.getItem(\"darkmode\") == \"false\") \r\n        document.querySelector(\"#checkbox\").checked = false;\r\n}\r\n\r\nwindow.onload = (event) =&gt; {\r\n    setDarkMode();\r\n};\r\n\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>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.<\/p>\n<p>Die Funktion setDarkmode() \u00fcberpr\u00fcft, ob im Browserspeicher bereits eine Einstellung hinterlegt ist und passt die Einstellung der Checkbox (aktiviert oder nicht) entsprechend an.<\/p>\n<h3>Script f\u00fcr den &#8222;dark mode&#8220;<\/h3>\n<p>Damit durch die Aktivierung der Checkbox der &#8222;dark mode&#8220; eingeschaltet werden kann, muss ein weiteres Script so eingebaut werden, dass es auf allen relevanten Seiten ausgef\u00fchrt wird. Bei \u00e4lteren Moodleversionen kann dazu ein Block verwendet werden, der auf allen Seiten angezeigt wird. Unter Moodle ab 4.0 bindet man das Script am besten \u00fcber die Administration &gt; Darstellung &gt; Zus\u00e4tzliches HTML ein. Dazu ben\u00f6tigt man Administrationsrechte.<\/p>\n<pre>&lt;script&gt;\r\n\r\nfunction changeToDarkMode() {\r\n    if (localStorage.getItem(\"darkmode\") == \"true\") \r\n    {\r\n        page = document.createElement('style')\r\n        page.innerHTML = \"html {filter: invert(100%) hue-rotate(180deg);}\";\r\n        document.body.appendChild(page); \r\n        page = document.createElement('style')\r\n        page.innerHTML = \"html :is(iframe,video,img,.dashboard-card,.tile) {filter: invert(100%); hue-rotate(180deg);}\";\r\n        document.body.appendChild(page); \r\n    } \r\n    else if (localStorage.getItem(\"darkmode\") == \"false\") \r\n    {\r\n        page = document.createElement('style')\r\n        page.innerHTML = \"html {filter: invert(0%) hue-rotate(0deg);}\";\r\n        document.body.appendChild(page); \r\n        page = document.createElement('style')\r\n        page.innerHTML = \"html :is(iframe,video,img,.dashboard-card,.tile) {filter: invert(0%) hue-rotate(0deg);}\";\r\n        document.body.appendChild(page); \r\n    }\r\n}\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>Die Funktion changeToDarkMode liest den im Browserspeicher hinterlegten Wert aus und f\u00fcgt dann auf jeder Seite den passenden CSS-Code ein. Dieser sorgt daf\u00fcr, dass die entsprechenden Farbwerte aller HTML-Elemente invertiert werden. Die Webseite wird also als Negativ dargestellt.<\/p>\n<p>Weil eine negative Anzeige bei Elementen wie Bildern oder Videos nicht erw\u00fcnscht 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.<\/p>\n<p>Wird der &#8222;dark mode&#8220; deaktiviert, dann wird der invert-Filter wieder auf die Normaleinstellung zur\u00fcckgesetzt.<\/p>\n<h3>Einschr\u00e4nkungen<\/h3>\n<p>Der &#8222;dark mode&#8220; funktioniert nur auf Seiten, auf welchem die beschriebenen CSS-Formatierungen auch tats\u00e4chlich zus\u00e4tzlich eingef\u00fcgt werden. Ist dies nicht der Fall, wird die entsprechende Seite ganz normal abgebildet.<\/p>\n<p>Einige Farbkombinationen werden auf Ger\u00e4ten mit geringem Schwarzwert nur schlecht abgebildet. Dies ist beispielsweise bei hellen Graut\u00f6nen der Fall.<\/p>\n<p>Je nach Kursformat und verwendeten Plugins m\u00fcssen allenfalls weitere CSS-Selektoren in die Ausnahmeliste eingef\u00fcgt werden. Da diese sich im Pseudo-Selektor :is() befinden, ist eine Erweiterung aber einfach zu bewerkstelligen.<\/p>\n<h2>Verwendung im Unterricht<\/h2>\n<p>Abgesehen von der &#8222;\u00c4sthetik&#8220; einer &#8222;dark mode&#8220;-Darstellung hat der Einsatz des Scripts keinen weiteren Einfluss auf den Unterricht. Auf vielen Ger\u00e4ten kann dadurch auch kein Strom gespart werden, da die stromverbrauchende Hintergrundbeleuchtung bei vielen Bildschirmtypen immer an ist.<\/p>\n<p>In Klassen, in welchen die Lernenden schon Grundkenntnisse in der Webprogrammierung haben, k\u00f6nnen hingegen sowohl die verwendeten Techniken wie CSS-Selektoren und Speicherm\u00f6glichkeiten von Daten im Browser besprochen werden. Allenfalls kann die Gelegenheit auch genutzt werden, um darauf hinzuweisen, dass quelloffene Software von den Nutzenden einfacher den eigenen Bed\u00fcrfnissen angepasst werden kann, als dies bei propriet\u00e4rer Software der Fall ist.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn man in Moodle auf einfache Art einen &#8222;dark mode&#8220; implementieren m\u00f6chte, kann man dazu den CSS-Filter invert() \u00a0verwenden. Damit die Einstellungen dann nicht nur f\u00fcr die aktuelle Seite gelten, hinterlegt man diese mittels localStorage im Speicher des Browsers. Wie das im Detail funktioniert, zeigt diese Anleitung. Einrichten des &#8222;dark modes&#8220; Zur Einrichtung des &#8222;dark &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/dark-mode-fuer-moodle\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e&#8222;Dark mode&#8220; f\u00fcr Moodle\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-842","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/comments?post=842"}],"version-history":[{"count":5,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/842\/revisions"}],"predecessor-version":[{"id":922,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/842\/revisions\/922"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}