Skip to Content Skip to Menu

Frontend Dark Mode

  • micheleq
  • micheleq
  • OFFLINE
  • Posts: 145
  • Thanks: 22
  • Karma: 6
2 days 11 hours ago #341775 by micheleq
Frontend Dark Mode was created by micheleq
Hello,
I'm working on a new site and the request is to have a button that toggles light and dark mode for the user. 
I'm still in the building/testing phase, with Joomla 5.3.3 and CB 2.10.0
I have a button that's working for the template switching between light and dark modes. It does this by adding a "dark-mode" class to the body and an attribute data-bs-theme="dark" to the html tag as instructed for Bootstrap v5.3.
Even with the Bootstrap 5 compatibility enabled in the CB > Configuration > Integrations, the colors don't change for CB. 
Is there a way to display dark mode in CB frontend? 
Before writing CSS to achieve this, I was wondering if I'm missing something? 
I also noticed that when loading Bootstrap 5 CSS, it's version 5.0 and as far as I understand the switch becomes possible after v5.3. 
If v5.3 will be implemented in future CB versions, I might hold off until then as I still have a long way to go with the site. 

If I add to the page header a CDN foro Bootstrap v5.3, I do get several items within CB to change, e.g. dropdown menus, but many items have classes "-light" I'm wondering there may be somewhere to change that? 

Thank you,
Tomás
 

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 49471
  • Thanks: 8469
  • Karma: 1465
23 hours 48 minutes ago #341783 by krileon
Replied by krileon on topic Frontend Dark Mode
We don't have dark mode support on frontend. You'd have to write the CSS for that. We only support backend dark mode at this time. As far as I'm aware Joomla doesn't have a frontend dark mode implementation either.

However give this a try. Within CB > Configuration > Integrations set "Bootstrap (Frontend)" to "Bootstrap 5 Compatibility" and it'll just entirely use your template except for some backwards compatibility CSS instead of loading our own Bootstrap. See if that looks better for you. Should require a lot less CSS to be compatible with your dark mode.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Moderators: beatnantkrileon
Powered by Kunena Forum