소개

최근 고대비 모드에서 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