Supported themes

If you are using one of the themes listed below, the Dark Mode Module by default selects the respective dark theme:

• HumHub => HumHub (dark)
• Enterprise => Enterprise (dark)
• clean-base => clean-base (dark)
• clean-bordered => clean-bordered (dark)
• clean-contrasted => clean-contrasted (dark)

Custom themes

For custom themes it is the best way to also create a dark version of your theme:

Method 1: Theme Builder

If you are using the Theme Builder module, you can follow these steps:

1. Create a new theme in the Theme Builder based on your light theme. If your theme is called „MyTheme“, then call it „DarkMyTheme“. (Note: The name has to contain “dark” to be recognized.)
2. Add the content of this file in the field „Custom LESS“: https://github.com/felixhahnweilheim/humhub-dark-mode/blob/main/resources/DarkHumHub/less/variables.less
3. Also add the content of this second file: https://github.com/felixhahnweilheim/humhub-dark-mode/blob/main/resources/DarkHumHub/less/theme.less
4. Save the theme
5. Keep your light theme actived, not the dark theme.
6. Then go to the configuration page of the Dark Mode module and select your new dark theme. Save.
7. Evtl. you have to empty the cache to make it work.

To keep your theme up to date with new developments in the dark mode module you should redo this procedure from time to time.

Method 2: Manually (for developers)

You can also create your own themes as described in the docs: https://docs.humhub.org/docs/theme/overview

This way you can directly import the LESS files from the dark mode module. And also use css-color-extractor to reduce the file size of the dark stylesheet which improves the performance.

Note: The theme name has to contain “dark” to be recognized.

You can take the Clean Theme as an example: https://github.com/cuzy-app/humhub-modules-clean-theme/tree/master/themes/clean-base/less/dark

The CSS is then compiled with the following commands (defined in https://github.com/cuzy-app/humhub-modules-clean-theme/blob/master/build-less-to-css.sh)

lessc less/dark/build.less css/dark.css
css-color-extractor css/dark.css css/dark.css --format=css
cp css/dark.css css/temporary.less
lessc less/dark/build2.less css/dark.css --clean-css="--s1 --advanced"
rm css/temporary.less

Report issues

If you find bugs in the dark mode module, feel free to report them on Github: https://github.com/felixhahnweilheim/humhub-dark-mode/issues/