Backward compatible high-contrast/forced-colors mode

backward-compatible-high-contrast.css

@media (-ms-high-contrast: active), (forced-colors: active) {
  /* Your general contrast theme styles */
}

@media (-ms-high-contrast: black-on-white), (forced-colors: active) and (prefers-color-scheme: light) {
  /* Your specific light contrast theme styles */
}

@media (-ms-high-contrast: white-on-black), (forced-colors: active) and (prefers-color-scheme: dark) {
  /* Your specific dark contrast theme styles */
}

/* For elements that need to opt-out of contrast theme styles */
.opt-out-of-high-contrast {
  -ms-high-contrast-adjust: none;
  forced-color-adjust: none
}