부정확 한 색상 테마의 플래시 (Fart)

웹 사이트에서 다크 모드 테마를 구현할 때 고려해야 할 것이 많습니다. 우리는 그것에 대한 큰 가이드가 있습니다. 거기에는 매우 영리한 빠른 승리가 있지만, 뽑을 수있는 매우 까다로운 것들도 있습니다. 그 까다로운 것들 중 하나는 어두운 모드가 어둡고 빛 사이의 어두운 모드가 아닌 방법이지만 실제로는 어둡고 가벼우 며 시스템 선호도를 사용하는 세 가지 모드입니다. 이는 많은 앱에서 오디오 환경 설정이 작동하는 방식과 유사하므로 원하는 오디오 입력 또는 출력 또는 시스템 기본 설정의 기본값을 매우 구체적으로 선택할 수 있습니다.

CSS 및 JavaScript는 Prefers Color-Scheme API를 통해 시스템 환경 설정 각도를 처리 할 수 ​​있지만, 사용자 기본 설정이 변경되었고 현재 선호도가 사용자 기본 설정과 다르면 "부정확 한 색상 테마의 플래시"또는 방귀의 영역에 있습니다. 좋아, 그것은 뺨의 뺨에 대한 약어이지만 잠재적으로 시각적으로 불쾌한 문제이므로 그것을 유지하고 있습니다. Fout (Unstyled 텍스트의 플래시)가 글꼴 로딩을위한 것과 같은 맥락에 있습니다.

사용자 기본 설정을 저장한다는 것은 쿠키, 로컬 스토리지 또는 일부 종류의 데이터베이스와 같은 것을 의미합니다. 해당 데이터에 대한 액세스가 JavaScript (예 : localStorage.getItem)를 실행하는 것을 의미하는 경우, Page의 첫 번째 렌더링 후에 JavaScript가 실행될 가능성이 높기 때문에 방귀 영역에 있습니다.

Page-Render 전에 서버 측 언어로 쿠키에 액세스 할 수 있습니다. 즉, 및 그에 따라 스타일을 출력하는 데 사용하여 방귀를 방지하지는 않지만 서버 측 언어에 액세스 할 수있는 사이트 (예 : Jamstack 사이트는 그렇지 않습니다)를 의미합니다.

Allllll은이 중요한 문제에 대해 펀트하지 않았기 때문에 Dark Mode에 대한 Rob Morieson의 기사를 높이 평가한다고 말합니다. 다음은 다음 으로이 작업을 수행하고 LocalStorage를 사용하지만 Next.js는 JavaScript Render가 있기 때문에 사용자가 정한 선호도를 가장 먼저 확인할 수 있습니다. 즉, 처음으로 올바르게 렌더링됩니다 (플래시 없음). 이 작업이 작동하기 위해 서버 측 렌더링을 끄는 것이 좋습니다. 그러나 이것은 끔찍한 트레이드 오프입니다.

서버 측 언어 나 힘이없는 페이지 렌더링없이 방귀를 피할 수있는 좋은 방법이 있다고 확신하지 못합니다.

위 내용은 부정확 한 색상 테마의 플래시 (Fart)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!