CSS contrast-color() 背景色一变 文字颜色跟着在黑白之间切换

CSS 的 contrast-color() 背景色一变 文字颜色跟着在黑白之间切换：

background: var(--bg-color);
color: contrast-color(var(--bg-color));

color-mix() 做微调

color: color-mix(
  in srgb,
  var(--brand-color),
  contrast-color(var(--bg-color)) 20%
);

浏览器只负责帮你判断"该偏亮还是偏暗"，比例没有绝对标准，但可以先这么试：

• 浅色背景：混 10% 到 25%
• 深色背景：混 30% 到 40%

用 style queries 切不同调色板

@property --contrast {
  syntax: '<color>';
  inherits: true;
  initial-value: #000;
}

:root {
  --bg-color: #f5f5f5;
  --contrast: contrast-color(var(--bg-color));
}

@container style(--contrast: #000) {
  .card { --text-color: #0066cc; }
}

@container style(--contrast: #fff) {
  .card { --text-color: #4da6ff; }
}