CB activity dark mode

Hello

Is there a way to quickly shift to a dark template for cb activity ?

We would like to use it on a dark page in a module position and have a dark display with white text. I was wondering whether there would be a way to quickly display it in dark mode, something like bg-dark with bootstrap 5 ?

Thanks for the hint

I'm not aware of such a feature, but CB Activity will follow your page template, if bootstrap 4.

Not sure if that could be of any help:
Maybe CB Template changer could help you for this:
www.joomlapolis.com/addons/cb-template-changer

It has a built-in bootstrap template builder:
www.joomlapolis.com/news/18798-cb-template-changer-4-0-with-built-in-bootstrap-template-builder

And support for bootstrap 4 variables:
www.joomlapolis.com/news/18844-cb-template-changer-5-0-with-themes-improvements

Would combining such a variable with your custom dark styling make sense ?

Hi Beat

The issue is that all of our website is white while some pages are black.
CB Activity is nicely set to fit in the white pages with bootstrap 5 and our own template adaptations. On the black pages we would only need a way to tell CB Activity that it's dark.

I think that what you're suggesting is building a dark CB template, then use auto action to set this template to our dark pages ?

I was thinking at a bootstrap way to only add a bg-dark or something like this to cb_template. Do you know if that's feasible ?

Thanks anyway

Actually your idea (building a dark CB template, then use auto action to set this template to our dark pages) could probably work too.

My suggestion was to use CB Template changer to build the CB template CSS using one or few variables (like myblacktheme, or myforegroundcolor and mybackgroundcolor). Then just integrate the result in your site template (or use the generated CB template).

Not sure what's the easiest here. As far as I know, unfortunately, browsers don't have yet a common standard for dark mode.

Best way to do that is to write the necessary CSS to override the colors where needed. There is no dark mode out of the box and no way to easily switch to dark mode. I recommend just using purely CSS for this. So for example you'd have a parent CSS class on the page like "page-dark" and check for that in your CSS. Example as follows.


I'm guessing it'll be around 30ish lines of CSS to get things overridden to your needs.

Excellent suggestion 👍
And as we use css variables that’s great!
Thanks a lot