Most components don't support theme/dark mode theme color changes

Created by: yugabe

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Even though the current release is only in alpha, the dark mode/theming support is quite suboptimal and it hurts much more than how much it solves.

Defining default theme colors by default should flow through to dark mode.

Components don't respect theme colors correctly when switching to dark mode. Cards, for example, don't use the theme's CSS variables, they use the color's SCSS variables directly, thus the colors defined in _variables-dark don't even matter. This prevents users from defining a dark mode alternative theme, and further, it prevents users from defining additional themes altogether.

The above, for example, can be attributed to the following compiled CSS:

.text-bg-primary {
    color: #fff!important;
    background-color: RGBA(13,110,253,var(--bs-bg-opacity,1))!important;
}

This comes from _color-bg.scss. These rules should always refer to CSS variables instead of the raw SCSS values so they can be overridden at runtime.

The problem is non-fully systematic and inconsistent. bg-#{$color} and text-#{$color} work correctly. text-bg-#{$color} works incorrectly. link-#{$color} is correct, although link-#{$color}:hover and link-#{$color}:active are incorrect.

Reduced test cases

The issue is visible on the Bootstrap docs page.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.3.0-alpha1