<div id="readability-page-1" class="page"><div>
					<p>요즘은 OS에서 라이트 테마와 다크 테마를 잘 지원해야 하므로 <a href="https://github.blog/changelog/2021-04-14-dark-and-dimmed-themes-are-now-generally-available/">GitHub도 작년부터 다크 테마를 지원</a>하기 시작했다. 그래서 GitHub의 테마는 이제 다양하게 잘 지원되고 있지만 README, 이슈, Pull Request, Wiki 등에서 이미지는 테마에 따라 잘 안 보이는 경우가 생긴다. 이슈나 Pull Request는 그 성격상 어쩔 수 없다고 하더라도 README나 Wiki는 문서의 역할이 더 중요하므로 테마에 따라 적절하게 이미지를 보여주고 싶을 수 있다.(특히 배경이 투명한 경우)</p>

<p>GitHub은 2021년 11월부터 Markdown에서 URL fragment를 이용해서 테마에 따른 이미지를 지원하고 있었다. Markdown에서 이미지를 사용할 때 이미지 URL 뒤에 <code>#gh-dark-mode-only</code>나 <code>#gh-light-mode-only</code>를 붙이면 이에 따라 이미지를 테마에 맞게 보여주는 방식이다.</p>

<pre><code>![Light-Image](http://DARK_IMAGE_URL.png#gh-dark-mode-only)
![Dark-Image](http://LIGHT_IMAGE_URL.png#gh-light-mode-only)
</code></pre>

<p>GitHub의 CSS에서 다음과 같은 코드가 있어서 2개의 이미지를 시스템 테마에 맞게 보여줬다 안보여줬다 하게 된다.</p>

<pre><code>@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;
}
</code></pre>

<p>여기서 <code>[attr$=value]</code>는 <code>attr</code>라는 속성에 <code>value</code>라는 접미사가 있으면 선택된다. 위 CSS 셀렉터에서 보듯이 정확히는 이미지 URL이라기 보다는 이미지의 링크인 <code>href</code>에 <code>#gh-dark-mode-only</code>나 <code>#gh-light-mode-only</code>가 있어야 제대로 처리된다.</p>

<p>하지만 지난 5월 HTML <code>&lt;picture&gt;</code> 요소와 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a>를 직접 이용하는 방식이 <a href="https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/">발표</a>되었다. <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to">문서에 따르면</a> 기존 URL fragment 방식은 폐기 예정이 되고 앞으로 제거될 수 있다고 한다.</p>

<pre><code>&lt;picture&gt;
  &lt;source media="(prefers-color-scheme: dark)" srcset="http://DARK_IMAGE_URL.png"&gt;
  &lt;source media="(prefers-color-scheme: light)" srcset="http://LIGHT_IMAGE_URL.png"&gt;
  &lt;img alt="IMAGE" src="http://LIGHT_IMAGE_URL.png"&gt;
&lt;/picture&gt;
</code></pre>

<p>위처럼 HTML을 직접 사용한다. 작성하기에는 URL fragment가 더 편한수 있지만 GitHub에서만 지원되는 방식이고 다른 곳에서는 지원이 안 되기 때문에 표준을 따르는 방식으로 바꾼 게 아닐까 싶다.</p>

<p>HTML 표준이니까 당연히도 README 등의 GitHub에서 시스템 테마에 따라 이미지가 잘 바뀐다.</p>

<p><img src="https://blog.outsider.ne.kr/attach/1/5597227059.gif.pagespeed.ce.SWXiD1mAqP.gif" width="750" height="189" alt="사용자 삽입 이미지" title="" data-pagespeed-url-hash="2008425136" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)"></p>

          </div></div>

Outsider's Dev Story

Outsider

요즘은 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에서 시스템 테마에 따라 이미지가 잘 바뀐다.
댓글 쓰기

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

댓글