介紹

我最近收到一份錯誤報告，其中 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