如何在高对比度模式下自动调整颜色

介绍

我最近收到一份错误报告，其中 svg 图标在高对比度模式下无法正确显示。在这篇文章中，我将分享对我有用的解决方案。

解决方案

在高对比度模式下，我使用canvastext系统颜色来自动调整图标的颜色。

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

就我而言，我最初使用 currentcolor 从父元素继承颜色。但是，在高对比度模式下，我想在子元素中将背景颜色普遍设置为 canvastext，所以我应用了此更改。

什么是 canvastext？

canvastext 是指用于应用程序内容或文档的文本颜色。它会自动调整以提供与系统背景颜色的最佳对比度。

通过使用 canvastext，您可以确保即使用户启用高对比度模式，文本和图标仍然可见。此外，由于 canvastext 根据系统主题进行自适应，因此它在深色和浅色模式下都能很好地工作。

就我而言，图标的背景颜色最初设置为黑色。然而，当背景在高对比度模式下变黑时，该图标就变得不可见。将颜色更改为白色使其再次可见，但为了在所有场景中一致地处理此问题，我选择使用系统颜色 canvastext。

参考

https://developer.mozilla.org/en-us/docs/web/css/system-color