뉴스 정보 뉴스 컴퓨터 소프트웨어 및 개발 Min-jun (민준) 4월 21, 2025 0 Comments

Github의 Markdown에서 이미지를 어두운 모드 및 조명 모드에 맞게 조정하는 방법

GitHub는 Dark Mode 및 Light Mode를 지원하며 개발자로서 README 이미지를 두 가지 테마에서 모두 멋지게 보이게 할 수 있습니다. 다음은 사용에 대한 빠른 가이드입니다 GitHub Markdown 파일의 요소는 사용자의 색 구성표를 기반으로 이미지를 동적으로 전환합니다.

개발자가 GitHub의 Dark Mode (또는 그 반대로)로 전환하면 표준 이미지가 밝은 배경이나 충돌 색상으로 제자리를 벗어날 수 있습니다.

하나의 크기에 맞는 이미지를 강요하는 대신 비주얼을 조정하여 테마와 완벽하게 혼합 할 수 있습니다. 작은 변화이지만 프로젝트를 훨씬 더 세련되게 보이게 할 수 있습니다.

하나의 스 니펫, 두 가지 테마!

다음은 readme (또는 모든 Markdown 파일)에 복사 할 수있는 Magic 스 니펫입니다.

이제 우리는 그것이 마술이라고 말하지만 커튼 뒤에서 엿보기가 어떻게 작동하는지 보여 주겠습니다.

그만큼 태그를 사용하면 다른 시나리오에 대해 여러 이미지 소스를 정의 할 수 있습니다.
그만큼 속성은 사용자의 색 구성표와 일치합니다.
- 언제 media="(prefers-color-scheme: dark)"브라우저가로드됩니다 srcset Github가 어두운 모드에있을 때 이미지.
- 마찬가지로 언제 media="(prefers-color-scheme: light)"브라우저가로드됩니다 srcset Github가 조명 모드에있을 때 이미지.
브라우저가 지원하지 않는 경우 요소 또는 사용자 시스템이 정의 된 미디어 쿼리와 일치하지 않음, 폴백 태그가 사용됩니다.