초단간 웹사이트 다크모드

Minimum viable dark mode

How to create a quick and dirty dark mode for simple apps and websites using pure CSS.

chasem.co

자동으로 다크모드에 어울리는 색 구성을 만들어주면 좋겠다는 생각을 했는데 css로 그것이 구현가능했다. 방법은 css의 filter function인 invert와 hue-rotate를 사용하는 것이다. invert(100%)를 사용하면 색이 반전되고 다시 invert(100%)를 하면 원래대로 돌아온다. hue-rotate는 정확히 맞는지는 모르겠지만 생상좌표를 회전하는 것같다. 그래서 hue-rotate(25deg)를 했다면 hue-rotate(-25deg)로 되돌릴 수 있다.

@media (prefers-color-scheme: dark) {
  filter: invert(90%) hue-rotate(25deg);
}

@media (prefers-color-scheme: dark) {
  img, video, iframe {
    filter: invert(100%) hue-rotate(-25deg);
  }
}

그러니까 여기서 하라고 하는 것은 전체를 반전한 후에 img, iframe, video만 다시 원래대로 되돌리는 것이다. 나는 여기에 소스코드를 위해 pre도 추가했다. 추가로 내가 수정해서 사용하고 있는 티스토리의 #1 스킨은 body에 background 설정이 되어 있는데 이걸로 반전이 제대로 안되서 전체를 감싸는 div에 추가로 background 지정을 했더니 원하는대로 동작했다. 그건 왜 그러는지 아직 파악하지 못했다.

문제가 한가지 있는데 background-image를 사용해서 디자인된 요소 중에서 원래 색을 사용해야할 것과 아닌 것이 있는데 이를 구분해서 처리할 수 없다는 점이다. 이런 건 각각 구분해서 지정이 필요하다. (하지만 난 귀찮아서 하지 않지)

어쨌든 쉽고 편리한 꼼수가 있어서 정말 다행이다. 고생할 뻔했다. 고생해도 이거보다 잘할 자신도 없고 ;;;