어두워짐(모드)

반응형

일부 새로운 기능 제안과 관련하여 웹 앱 매니페스트 사용을 분석하는 툴링 작업을 하는 동안 다크/라이트 모드 지원을 위해 제안된 구문이 포함된 테스트 매니페스트가 필요하게 되었습니다. 나는 내 사이트를 실험 대상으로 만들기로 결심했고 그것을 실현시키기 위해 한 시간 정도 여러 가지를 수정했다. 여기 제가 한 일의 개요가 있습니다.

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 아이콘을 여기에 포함시켜야 하는지 아직 확신이 없어서 그냥 포함시켰습니다.

그게 다야. 아주 조금의 시간만 있으면 모든 걸 준비할 수 있어요. 혹시 새로운 테마를 사용하시다가 뭔가 이상해 보이시면 말씀해주세요.

이 게시물은 원래 제 블로그에 올라왔어요.