介绍

我最近收到一份错误报告，其中 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