요즘은 OS에서 라이트 테마와 다크 테마를 잘 지원해야 하므로 GitHub도 작년부터 다크 테마를 지원하기 시작했다. 그래서 GitHub의 테마는 이제 다양하게 잘 지원되고 있지만 README, 이슈, Pull Request, Wiki 등에서 이미지는 테마에 따라 잘 안 보이는 경우가 생긴다. 이슈나 Pull Request는 그 성격상 어쩔 수 없다고 하더라도 README나 Wiki는 문서의 역할이 더 중요하므로 테마에 따라 적절하게 이미지를 보여주고 싶을 수 있다.(특히 배경이 투명한 경우)
GitHub은 2021년 11월부터 Markdown에서 URL fragment를 이용해서 테마에 따른 이미지를 지원하고 있었다. Markdown에서 이미지를 사용할 때 이미지 URL 뒤에 #gh-dark-mode-only나 #gh-light-mode-only를 붙이면 이에 따라 이미지를 테마에 맞게 보여주는 방식이다.
GitHub의 CSS에서 다음과 같은 코드가 있어서 2개의 이미지를 시스템 테마에 맞게 보여줬다 안보여줬다 하게 된다.
@media (prefers-color-scheme: dark)
:root[data-color-mode=auto] .entry-content [href$="#gh-light-mode-only"],
:root[data-color-mode=auto] .comment-body [href$="#gh-light-mode-only"],
:root[data-color-mode=auto] .readme [href$="#gh-light-mode-only"] {
display: none;
}
여기서 [attr$=value]는 attr라는 속성에 value라는 접미사가 있으면 선택된다. 위 CSS 셀렉터에서 보듯이 정확히는 이미지 URL이라기 보다는 이미지의 링크인 href에 #gh-dark-mode-only나 #gh-light-mode-only가 있어야 제대로 처리된다.
하지만 지난 5월 HTML <picture> 요소와 prefers-color-scheme를 직접 이용하는 방식이 발표되었다. 문서에 따르면 기존 URL fragment 방식은 폐기 예정이 되고 앞으로 제거될 수 있다고 한다.
<picture>
<source media="(prefers-color-scheme: dark)" srcset="http://DARK_IMAGE_URL.png">
<source media="(prefers-color-scheme: light)" srcset="http://LIGHT_IMAGE_URL.png">
<img alt="IMAGE" src="http://LIGHT_IMAGE_URL.png">
</picture>
위처럼 HTML을 직접 사용한다. 작성하기에는 URL fragment가 더 편한수 있지만 GitHub에서만 지원되는 방식이고 다른 곳에서는 지원이 안 되기 때문에 표준을 따르는 방식으로 바꾼 게 아닐까 싶다.
HTML 표준이니까 당연히도 README 등의 GitHub에서 시스템 테마에 따라 이미지가 잘 바뀐다.
Comments