이미지용 다크 모드
Github Markdown의 미디어 자산을 색 구성표로 구분하려면 구문 업데이트를 통해 지금 가능합니다.
지금까지는 img-tag를 사용하여 마크다운 인터프리터가 저장소나 원격 대상에서 이미지를 렌더링하도록 지시할 수 있었습니다. 이미지로 다크 모드에 적응하기 위해 이제 더 현대적인 HTML 사진 태그를 사용할 수도 있습니다.
Github Markdown을 다크 모드에 적용하는 방법
다음 코드 예제는 사용자가 선호하는 색 구성표(예: 어둡거나 밝은 모드)에 따라 이미지에 두 가지 변형을 포함하는 방법을 보여줍니다. 구문은 HTML5 및 CSS와 동일합니다.
<!--
Note we're using the same HTML-sytnax for
constraint-based assets as you would do on
the web.
-->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://path-to-your-dark-mode-image.webp">
<img alt="A single image caption for both variants" src="https://path-to-default-light-mode-image.webp">
</picture>
보시다시피, 몇 가지 변경 사항으로 이제 이미지가 어두운 모드에도 적용될 수 있습니다. 일반적인 Markdown 요소는 사용자가 아무것도 할 필요 없이 이미 다크 모드를 완벽하게 지원하기 때문에 Github Markdown의 기능에 추가된 것을 환영합니다.
