GitHub readme 페이지에 다크/라이트 모드 관련 이미지 추가
2482 단어 githubhtmlopensourcetutorial
#gh-dark-mode-only
를 사용하여 밝은 모드와 어두운 모드에 대한 이미지를 개별적으로 지정할 수 있음을 발견했습니다.다음은 예입니다.
![Logo Dark](https://image-link.png#gh-dark-mode-only)
![Logo Light](https://image-link.png#gh-light-mode-only)
사용자 테마 기본 설정에 따라 단일 이미지만 표시됩니다. 실제로 작동하는 것을 봅시다:
라이트 모드
다크 모드
이미지 중앙에 맞추기
작은 이미지를 화면 중앙에 맞추는 것이 일반적입니다. 다행스럽게도 지원되는
align="center"
태그에서 div
속성을 사용할 수 있습니다.
<div align="center">
![Logo Dark](https://user-images.githubusercontent.com/8872447/165779319-34962ccc-3149-466c-b1da-97fd93254520.png#gh-dark-mode-only)
</div>
<div align="center">
![Logo Light](https://user-images.githubusercontent.com/8872447/165779274-22a190da-3284-487e-bd1e-14983df12cbb.png#gh-light-mode-only)
</div>
The new lines after the starting and before closing of the div are important, otherwise the image won't be rendered.
새로운 테마 일치 로고가 멋지고 GitHub 개인 또는 오픈 소스 프로젝트 추가 정보를 돋보이게 만드는 또 다른 세부 사항이라고 생각합니다.
댓글에 결과를 게시하세요!
Reference
이 문제에 관하여(GitHub readme 페이지에 다크/라이트 모드 관련 이미지 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/scopsy/adding-darklight-mode-specific-images-to-your-github-readme-page-3cdj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)