There's nothing we can do about this. That's just how CSS variables work. They're attached to :root. You're welcome to modify CBs bootstrap CSS file below, but your changes will be lost when you update CB.

components/com_comprofiler/plugin/templates/default/bootstrap.css

With CB 3.x we'll be moving away from Bootstrap to TailwindCSS which should resolve root CSS variable conflicts, but I don't have a solution beyond modifying the file.

CB is using Bootstrap for backend and frontend so yes it's normal to load in backend.

There is however an easy way to fix this. Upgrade to Bootstrap 5. I mean BS5 has been in joomla since beta stages. and it was anounced two years ago. The changes are minimal but still you prefer to load bs4 in the backend where this is completely unnecessary and it is breaking joomla backend UI.

CB and all our products combined codebase is basically as large as Joomla itself. It's a complete rewrite thanks to BS5 destroying backwards compatibility. It's not a simple upgrade. We are also planning to move to TailwindCSS so we don't see a huge point in doing all this UI rewriting to have to do it again soon after.

The changes are minimal but still you prefer to load bs4 in the backend where this is completely unnecessary and it is breaking joomla backend UI.

They do not break backend. It impacts 5 CSS variables that adjust colors and nothing more.

That means CB is not J4 compatible. else it would not touch default Joomla Backend UI.

I do not agree.

I will review trying to rescope our Bootstrap 4 CSS variables, but it will depend highly on what that will break within CB itself.

forge.joomlapolis.com/issues/9123

This is now fixed in latest CB build release. Have rescoped our Bootstrap variables to .cb_template instead of :root.