In some cases, components had dark text over dark background (or light
text over light background) by mistake.

Example:
- Enter edit mode.
- In the theme tab, choose "boxed" as page layout.
- A color picker appears below to control the color behind the box.
- Set it to a dark color (if your box main color is light)
- Go to a course page (install website_slides)
- Check the mobile version
=> The bootstrap tab and its section uses the dark color you set up as
   body color instead of the expected boxed layout color (this can also
   be seen with standard "tabs" snippets, although their body is not
   buggy in that case).

This is because of bootstrap which uses `$body-bg` as default value for
other variables, such as `$nav-tabs-link-active-bg` in the case
described above. It also uses the variable in the creation of CSS rules
not controlled by explicit variables.

In 16.0, bootstrap was updated to 5.1.3 with [1] and this actually
increased the problem: input backgrounds now default to `$body-bg`,
amongst other things. Since [2], `$body-bg` is also used as the default
color for range thumbs. Those are for example visible on the shop main
page with the price filter enabled. With a white boxed layout and dark
background, those were broken as well.

This commit focused on fixing the only critical component: nav-tabs, for
which the fix in straightforward. CSS rules that depends on `$body-bg`
in bootstrap are less easy to fix (without duplicating their rule), are
mainly less important ones and would actually not really be possible to
fix in a fully stable way. Those will be fixed only starting from 16.0
with an entirely different fix.

[1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968
[2]: https://github.com/odoo/odoo/commit/46e53879749be7ba3d30338d0f25c0a68a88eb3c



opw-3151962

closes odoo/odoo#111780

Signed-off-by: Romain Derie (rde) <rde@odoo.com>