Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration to Bootstrap 5 #56

Open
marc-farre opened this issue Jul 24, 2024 · 3 comments
Open

Migration to Bootstrap 5 #56

marc-farre opened this issue Jul 24, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@marc-farre
Copy link
Contributor

@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
Copy link
Owner

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 #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
Copy link
Contributor Author

@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-
Copy link
Collaborator

luke- commented Jul 25, 2024

@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!

@felixhahnweilheim felixhahnweilheim added the enhancement New feature or request label Jan 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants