search

felixhahnweilheim / humhub-dark-mode

Dark Mode for HumHub
https://marketplace.humhub.com/module/dark-mode/description
GNU Affero General Public License v3.0
7 stars 4 forks source link

Migration to Bootstrap 5 #56

Open marc-farre opened 3 months ago

marc-farre commented 3 months ago

@felixhahnweilheim We plan to migrate HumHub to Bootstrap 5 which supports dark mode natively: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode

What do you think about it?

felixhahnweilheim commented 3 months ago

I've currently not much time to look deeply into this.

Would that mean that the theme stylesheet contains rules for light and dark mode?

The dark mode module could then be reduced to the toggle and adding the required attribute to the <html> tag. Then it would be easy to switch mode by JS without reloading the page (see https://github.com/felixhahnweilheim/humhub-dark-mode/issues/33 )

So I would wait until there is a PR for HumHub and then adapt the dark mode module.

Or is the plan to introduce a dark mode option in HumHub core? Of course, I would also be fine with that.

marc-farre commented 3 months ago

@felixhahnweilheim thanks for offering to transfer the dark mode into HumHub core.

We could indeed have a simple JS color mode switcher which will change the value of the HTML data-bs-theme attribute from light to dark and reverse: https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript

This widget could then be added to the top bar or the user account settings (I would prefer this option to avoid overloading the top menu, but it should be possible in custom themes).

Dark colors should be housed in the _variables-dark.scss: https://getbootstrap.com/docs/5.3/customize/color-modes/#sass-variables

I hope we can find tools to help us creating dark colors such as https://colorffy.com/dark-theme-generator (ideally a PHP script for the modules such as the Theme Builder, Flex theme and Clean theme).

@luke- what do you think about having this dark mode into HumHub core?

luke- commented 3 months ago

@marc-farre Thank you for opening this topic, it is important to exchange thoughts in beforehand!

In principle, I would prefer this on the HumHub Core side especially when Bootstrap 5 supports it natively. But this development/migration will take some time...

Maybe the dark mode comes even with a version after the BS5 release. But we'll see...

We'll keep you updated!