A few years back I added dark mode support to a custom theme for my previous institution. My approach was similar to what Dan recommends, except that everything was bundled into our custom theme (since we only used one theme throughout the entire site).
Our custom theme had a switch to allow users to toggle between light and dark mode. This would get saved as a user preference. The theme also included CSS styles for dark mode which were compiled and cached together with the default light mode CSS.
In the layout files of the custom theme, fetch the user preference for the theme mode and apply the class "darkmode" to the body element if the user prefers dark mode.
The dark mode CSS styles were put into a new SCSS file (darkmode.scss) such as:
// Dark mode colour scheme
.darkmode {
background-color: $body-bg-dark !important;
color: $body-color-dark;
.card {
background-color: darken($color: $body-bg-dark, $amount: 2);
border: 1px solid darken($color: $body-bg-dark, $amount: 4);
}
#region-main {
background: $body-bg-dark;
...
}
...
...
}
With this approach, toggling between dark and light mode did not require switching themes.
There are a lot of places in Moodle where the Bootstrap bg-white class is used. So you will have to override background colour of those elements in the dark mode SCSS file (Or you could override the respective template files and remove the bg-white class.)
One word of caution if you are considering adding dark mode support to your Moodle site - think about your existing user-generated content such as pages, books, forum posts, quiz questions. If these contents contain inline CSS styles such as background or font colour, then you could potentially run into some poor colour contrast issues which may make the content difficult to read. For example, if some user generated content has font colour set as black, then switch to dark mode will result in black text on a dark background.
I'd suggest to keep sections where there is user-generated content to have a light grey background.
Hope this helps.
