Darken darker download9/18/2023 ![]() 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. 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. 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. 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.) There are a lot of places in Moodle where the Bootstrap bg-white class is used. With this approach, toggling between dark and light mode did not require switching themes. The dark mode CSS styles were put into a new SCSS file (darkmode.scss) such as: // Dark mode colour schemeīackground-color: $body-bg-dark !important īackground-color: darken($color: $body-bg-dark, $amount: 2) īorder: 1px solid darken($color: $body-bg-dark, $amount: 4) 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 theme also included CSS styles for dark mode which were compiled and cached together with the default light mode CSS. ![]() This would get saved as a user preference. Our custom theme had a switch to allow users to toggle between light and dark mode. 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). A few years back I added dark mode support to a custom theme for my previous institution.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |