Bootstrap 5.3 colour modes on a custom palette

The May release adds a dark mode built on CSS variables and a data-bs-theme attribute, which works well until the palette is not theirs.

[data-bs-theme="dark"] {
  --bs-body-bg: #14181d;
  --bs-body-color: #e6e9ec;
  --bs-primary: #4c8ff0;      /* our brand, lightened */
}

/* the trap: --bs-primary-rgb is a SEPARATE variable, used
   by every rgba() in the framework, and it does not derive
   from --bs-primary */
[data-bs-theme="dark"] { --bs-primary-rgb: 76, 143, 240; }

The parallel -rgb variables exist because CSS cannot decompose a hex colour, and forgetting one produces components that are correctly coloured except for their translucent states. Setting the attribute on a subtree rather than the root is the feature worth knowing about — a dark card on a light page is one attribute, which used to be a stylesheet.