Dark mode

Some moodlers have asked about having a dark mode for working in a Moodle site at night.
MDL-68037 has been in the tracker since Moodle 3.8
The new versions of both, the FREE Boost Magnific and the FREE Degrade theme have an easy to use 'dark mode'.

Dark and light modes

A new 'Boost dark mode' additional (third party) plugin:
- 🎯 is easy to install.
- 🎯 works with any Boost-based child theme.
- 🎯 and it transforms your Moodle into a modern and eye-comfortable experience, especially for those who study or work at night.

Matthias Giger wrote:

You can implement a simple version of a dark mode yourself, by adding a bit of CSS and JavaScript to Moodle.
See: https://gigers.com/blog/dark-mode-fuer-moodle/ (use Google translate to get an English version).

An English (Google) translation follows:

If you want to implement a "dark mode" in Moodle in a simple way, you can use the CSS filter invert() . To ensure that the settings do not only apply to the current page, you store them in the browser's memory using localStorage.

A simple “dark mode” can be provided in Moodle with little effort. This guide shows how this works in detail.

Setting up the "dark mode"

To set up the “dark mode” two elements are needed:

A switch that can be used to turn dark mode on and off.
A script that reads the position of the switch or the stored variable on all pages.

script for the switch

A checkbox is used as a switch element, which can be uniquely addressed via an ID.

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

This button and the following script can be integrated anywhere in Moodle:

in the dashboard, e.g. in a text block
in a course, e.g. using a text block
...

The following script is required to read the status of the checkbox. This is inserted in the same place as the 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>

The function switchDarkMode() reads the checkbox and saves its state in a local browser variable. This function is called as soon as the checkbox is clicked.

The setDarkmode() function checks whether a setting is already stored in the browser memory and adjusts the setting of the checkbox (activated or not) accordingly.

script for the "dark mode"

In order to enable dark mode by activating the checkbox, another script must be integrated so that it is executed on all relevant pages. In older versions of Moodle, a block can be used for this, which is displayed on all pages. In Moodle 4.0 and later, the best way to integrate the script is via Administration > Display > Additional HTML. You need administration rights for this.

<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>

The changeToDarkMode function reads the value stored in the browser memory and then inserts the appropriate CSS code on each page. This ensures that the corresponding color values of all HTML elements are inverted. The web page is therefore displayed in negative.

Because a negative display of elements such as images or videos is not desired, these elements are inverted again in a second step. And because the negative of negative corresponds to the positive, the elements treated in this way are then displayed as usual.

If the “dark mode” is deactivated, the invert filter is reset to the normal setting.

restrictions

The "dark mode" only works on pages on which the CSS formatting described is actually inserted. If this is not the case, the corresponding page is displayed normally.

Some color combinations are poorly displayed on devices with low black levels. This is the case with light gray tones, for example.

Depending on the course format and the plugins used, additional CSS selectors may need to be added to the exception list. However, since these are located in the pseudo selector :is(), an extension is easy to accomplish.

Use in Classrooms

Apart from the "aesthetics" of a "dark mode" display, the use of the script has no other impact on the lesson. On many devices, it also does not save power, as the power-consuming backlight is always on on many types of screens.

In classes where the learners already have basic knowledge of web programming, however, the techniques used, such as CSS selectors and ways of storing data in the browser, can be discussed. At best, the opportunity can also be used to point out that open source software can be more easily adapted to users' own needs than is the case with proprietary software.

Documentation