다크 모드와 시각적으로 호환되도록 도움말 문서에 SVG 아이콘 사용

일반
1

자동 다크 모드 전환을 활성화한 후, 개별 사용자 인터페이스 버튼을 설명하는 내 스크린샷들이 흰색 배경 때문에 보기 흉해 보이는 것을 발견했습니다. 실제 인터페이스에서 사용하는 svg 코드를 재사용해 보았지만 작동하지 않았습니다. 다음을 찾았지만:

Font Awesome에서 직접 다운로드한 SVG 파일을 사용해도 작동하지 않았고, 해당 대화의 아이콘에 대한 GitHub 링크도 현재 Discourse UI와 완벽하게 일치하지 않았습니다. 다행히도 다음을 우연히 발견했습니다:

이를 통해 Font Awesome 다운로드 파일에 width와 height가 빠져 있다는 사실을 깨달았습니다. Font Awesome의 v5 아이콘을 찾아 해당 svg 파일을 조정했습니다. 게시글 작업 버튼에는 높이 17px(에디터 버튼은 14px)이 잘 작동했고, viewBox 설정에 따라 적절한 폭을 적용했습니다. 때로는 비율 계산기가 유용했습니다.

width와 height를 추가해야 할 뿐만 아니라, path에 fill도 추가해야 했습니다. 주변 텍스트 색상을 훌륭한 기본값으로 고려하여 정적 색상 대신 fill="currentColor"를 선택했습니다. 그러나 여전히 아이콘이 주변 텍스트가 아닌 UI 버튼 색상과 일치하기를 원했고, 파일 업로드 ![alt](file) 구문을 유지하면서 html span으로 감싸는 것(일반 사용자가 쉽게 하지 않을 것)을 통해 이러한 특정 svg를 표적화할 수 있음을 발견했습니다. 그리고 다음을

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%); 
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

css에 추가했습니다. 이 특정 css는 라이트 컬러 스킴에서 기본 색상이 검은색으로 설정될 때 var(--primary-low-mid)를 모방하고, 다크 컬러 스킴에서는 #eee를 사용하며, 에디터 미리보기 패널에 이미 존재하는 래핑 span도 고려합니다. 이 방식으로 사용할 때 svg 색상을 변경하는 방법을 알아내려면 css 필터 생성기를 사용할 수 있습니다. (컬러 스킴에 따라, 사용자가 자동 다크 모드 전환 옵션을 설정에 저장하지 않았지만 기기가 다크 모드인 경우 어떻게 보이는지 다시 확인하는 것이 좋습니다. css에서 @media (prefers-color-scheme: dark)를 사용할 때 발생할 수 있는 중간 상태가 있기 때문입니다.)

이 발견 과정이 다른 누군가에게 도움이 되기를 바랍니다! 이 목적으로 만든 아이콘을 다운로드하여 재사용/조정하고 싶다면(이 과정은 다소 시간이 걸렸으므로), 지금까지 완료한 튜토리얼 페이지에서 가져갈 수 있습니다: 게시글 작업 및 반응, 기본 게시글 스타일링, 고급 게시글 스타일링, 그리고 투표 생성기. (개별 아이콘만 교체하고, 컨텍스트 이미지는 여기 meta의 도움말 문서에서 가져온 이미지와 우리 사이트의 스크린샷이 혼합된 라이트 컬러 스킴 스크린샷을 유지했습니다.)

7개의 좋아요