[css] 망할 놈의 다크 모드 대응하기 2부: 이미지

1. 이미지 전환

'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다

<picture>
  <source srcset="for_dark.webp" media="(prefers-color-scheme: dark)">
  <source srcset="for_light.webp" media="(prefers-color-scheme: light)">
  <img src="for_light.webp">
</picture>

부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다.

덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다.

body.dark img {
  filter: brightness(.8) contrast(1.2);
}

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

img {
   filter: var(--darkmode-image-filter);
}
@media (prefers-color-scheme: dark) {
   :root {
      --darkmode-image-filter: grayscale(50%);
   }
}

 

2. SVG 컬러 변경

<img>를 통해 불러온 경우라면, filter를 통해 블랙/화이트로 전환시킬 수 있다.

svg,
img[src*=".svg"] {
   filter: invert(1)
}

다만 세상 살기 어디 쉬운가. 어제의 디자인은 #fff이었지만, 오늘의 디자인은 #f1f1f1일 수 있다. 추후 관리를 위해 인라인 svg로 삽입하여 currentColor를 활용하는 것을 추천한다.

<svg xmlns="http://www.w3.org/2000/svg"
   stroke="currentColor"
>[…]</svg>

<style>
   svg {
      color: var(--color-svg)
   }
</style>

 

 

---

[css] 망할 놈의 다크 모드 대응하기 1부

[css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인