# 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](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](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 you own themes as described in the docs: [https://docs.humhub.org/docs/theme/overview](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](https://github.com/rsanchez/css-color-extractor "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](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](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/](https://github.com/felixhahnweilheim/humhub-dark-mode/issues/)