일부 새로운 기능 제안과 관련하여 웹 앱 매니페스트 사용을 분석하는 툴링 작업을 하는 동안 다크/라이트 모드 지원을 위해 제안된 구문이 포함된 테스트 매니페스트가 필요하게 되었습니다. 나는 내 사이트를 실험 대상으로 만들기로 결심했고 그것을 실현시키기 위해 한 시간 정도 여러 가지를 수정했다. 여기 제가 한 일의 개요가 있습니다.
CSS 수정
첫 번째 단계는 선호 색상의 미디어 쿼리에 추가하는 것이었다. 생소한 분들은 이렇게 보입니다.
/* Your regular rules go here */
@media (prefers-color-scheme: dark) {
/* Overrides for the "dark" theme go here */
}
@media (prefers-color-scheme: light) {
/* Overrides for the "light" theme go here */
}
어쨌든 제 기본 테마는 "빛" 테마이기 때문에 저는 "어두운" 테마를 추가하고 싶었습니다. 대부분의 경우 색 값을 교환하는 것이 매우 간단했습니다. 즉, 단축 대신 제가 변경하고자 하는 특정 특성(예: 배경색, 테두리색)을 사용하는 것입니다. 유일하게 까다롭고 복잡한 비트는 텍스트 장식을 사용하지 않는 링크 밑줄을 업데이트하는 것이었습니다.
SVG 조정
잘 몰랐을 수도 있지만 SVG는 선호 색상의 미디어 쿼리도 지원합니다. 내 SVG는 대부분 검은색이었어
svg { background-color: white; }
path { fill: black; }
@media (prefers-color-scheme: dark) {
svg { background-color: #454545; }
path { fill: #fffcf4; }
}
이러한 SVG의 대부분은 내 HTML에 있지만 일부는 내 웹 앱 매니페스트에서 참조됩니다. 제가 이 글을 쓰고 있는 시점에 매니페스트에 SVG 아이콘을 지원하는 브라우저는 없지만, 저희(Edge 팀)는 크롬에 추가 작업을 진행하고 있습니다. 그리고 착륙할 때, 저의 바람은 이러한 각 컨텍스트에서 벡터 파일을 보강하여 어두운/밝은 아이콘 지원을 포함시키는 것입니다.
매니페스트 조정
추측의 영역에서는 매니페스트에서도 사용자가 선호하는 색 구성표를 지원하는 제안이 있습니다. 이 제안에는 특정 키를 다시 정의할 수 있는 user_preferences 블록이 필요합니다. 우리가 논의한 내용을 토대로 한 일은 다음과 같습니다.
"user_preferences": {
"color_scheme_dark": {
"background_color": "#5b5b5b",
"icons": [
{
"src": "/i/icon.svg",
"type": "image/svg+xml",
"sizes": "512x512",
"purpose": "any monochrome maskable"
},
{
"src": "/i/icon-reverse.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any monochrome maskable"
},
{
"src": "/i/notification-icon-reverse.png",
"type": "image/png",
"sizes": "256x256",
"purpose": "any monochrome maskable"
}
]
}
},
PNG 버전으로 대체되지 않기 위해 제 컬러 어답팅 SVG 아이콘을 여기에 포함시켜야 하는지 아직 확신이 없어서 그냥 포함시켰습니다.
그게 다야. 아주 조금의 시간만 있으면 모든 걸 준비할 수 있어요. 혹시 새로운 테마를 사용하시다가 뭔가 이상해 보이시면 말씀해주세요.
이 게시물은 원래 제 블로그에 올라왔어요.
'css' 카테고리의 다른 글
전자상거래 개발 (0) | 2022.01.19 |
---|---|
애니메이션 햄버거 메뉴 (0) | 2022.01.19 |
테일윈드 CSS가 당신의 리뷰 과정을 개선할 수 있을까요? (0) | 2022.01.19 |
⚡HTML CSS를 사용하여 응답형 랜딩 페이지 작성 (0) | 2022.01.13 |
마이크로소프트 메이크코드 아케이드를 사용하여 짧은 게임을 만들었다. (0) | 2022.01.13 |
댓글