모든 요청에서 다크 모드 감지 🌓

5144 단어 csswebdevnewsjavascript
나는 어두운 색 구성표의 열렬한 지지자입니다! 어두운 픽셀은 청색광 방출이 적어 눈의 피로를 줄이는 것 외에도 배터리 수명을 덜 소모하고(OLED 화면이 있는 장치의 경우) 야간 사용을 훨씬 더 즐겁게 만듭니다. 나는 새 앱을 열 때 즉시 옵션을 찾고 그것이 잘 구현되면 사랑합니다.

최근에 나는 웹에서 다크 모드 채택을 단순화하는 데 도움이 되는 실험적 접근 방식을 발견했고 관련 프런트엔드 문제를 해결하면서 다른 사람들과 공유하고 싶었습니다.

그 성가신 깜박임 💡



프런트엔드 애플리케이션에서 다크 모드를 구현한 적이 있다면 페이지를 로드할 때 "깜박임"문제가 발생했을 가능성이 있습니다. 이는 클라이언트가 처음에 UI의 밝은 버전을 렌더링할지 어두운 버전을 렌더링할지 모르기 때문에 사용자가 해당 색 구성표를 선호하는 경우 밝은 버전에서 어두운 버전으로 깜박이게 됩니다.

SSR을 사용하면 사용자의 테마 기본 설정을 document.cookie에 저장하여 이 문제를 해결할 수 있습니다. 서버가 HTML로 응답하기 전에 요청에 대한 이 기본 설정을 확인할 수 있습니다. 그러나 이 접근 방식을 사용하더라도 쿠키는 사용자가 처음 페이지를 로드한 후에만 설정할 수 있으며( prefers-color-scheme 을 통해 감지하고 이 쿠키를 설정) 여전히 어두운 것을 선호하는 경우 페이지가 깜박입니다.

응용 프로그램이 여러 하위 도메인에 걸쳐 있는 경우 각각에 대해 쿠키를 설정해야 할 수 있으므로 이 작업은 지루할 수도 있습니다.

모든 요청 감지 🪄



다행히 여기에 해결책이 있습니다! (적어도 Chrome의 경우 나중에 자세히 설명합니다.)

Chromium 93부터 Sec-CH-Prefers-Color-Scheme 클라이언트 힌트 헤더를 사용하면 이 기본 설정을 HTTP 요청에 연결할 수 있습니다. 서버에서 이 헤더를 허용하도록 지정하여:

response.headers["Accept-CH"] = "Sec-CH-Prefers-Color-Scheme";
response.headers["Vary"] = "Sec-CH-Prefers-Color-Scheme";
response.headers["Critical-CH"] = "Sec-CH-Prefers-Color-Scheme";


그런 다음 요청에서 사용자의 기본 설정을 가져올 수 있습니다.

const theme = request.headers["Sec-CH-Prefers-Color-Scheme"];
// "dark" | "light"


그리고 적절한 마크업을 클라이언트에게 보냅니다! 아마도 body 태그의 클래스를 통해:

return (
  <body class={theme}>
    ...
  </body>
);


또는 인라인된 CSS 변수:

return (
  <body style={{ `--color-scheme: ${theme}` }}>
    ...
  </body>
);


또는 서버측에서 스타일을 생성한다고 가정하여 사용 중인 스타일 라이브러리와 통합할 수 있습니다.

그래도 이것은 훌륭합니다! 클라이언트나 데이터베이스에서 색 구성표 기본 설정을 추적할 필요가 없습니다. 사용자 장치에서 한 번 설정하고 간섭 없이 포함할 수 있습니다.

일부 제한 사항 💭



불행히도 이것은 현재 Chromium 기반 브라우저의 최신(93+) 버전에서만 지원됩니다. 우리가 알다시피 Chrome은 브라우저 공유를 지배하므로 웹의 roughly 70%으로 변환됩니다.

WebKit 및 Mozilla에 구현 대기 중인 요청이 있습니다. 지원이 100%에 도달할 때까지는 프로덕션에서 사용할 수 없으며 사용해서는 안 되지만, 이것이 사용자 경험에 진정한 가치를 제공하므로 곧 주목을 받게 될 것입니다.

다른 클라이언트 힌트에 대한 자세한 내용은 예제 링크와 함께 찾을 수 있습니다here. 관심이 있으시면 널리 알려주시면 곧 모든 브라우저에서 구현되는 것을 볼 수 있기를 바랍니다!
[Swift] 동일한 도메인에서 유니버설 링크 (Universal Links)가 작동하지 않으므로주의하십시오
어떤 JS 루프가 빠릅니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage