Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

GitHub에서 사용자 테마에 따라 다른 이미지 보여주기

요즘은 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를 붙이면 이에 따라 이미지를 테마에 맞게 보여주는 방식이다.

![Light-Image](http://DARK_IMAGE_URL.png#gh-dark-mode-only)
![Dark-Image](http://LIGHT_IMAGE_URL.png#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에서 시스템 테마에 따라 이미지가 잘 바뀐다.

사용자 삽입 이미지

2022/09/09 20:02 2022/09/09 20:02