오늘 상단 메뉴 오른쪽에 테마 선택기가 있는 사용자 지정 어두운 모드가 추가되었음을 알려드립니다.
사용자가 브라우저에서 어두운 테마를 선택하면 어두운 테마가 표시되도록 하는 [data-theme="dark"] 선택기를 기반으로 하는 자동 구현(prefers-color-scheme)이 관리로 대체되었습니다. Opera와 같은 일부 브라우저에는 꽤 괜찮은 어두운 버전으로 표시되는'강제 어두운 모드' 옵션이 있지만 이미지가 반전되어 음수로 표시되고 아무것도 구성할 수 없는 등의 버그가 있습니다.
언젠가 개선하거나 변경하고 싶을 때를 대비해 조정된 항목의 전체 목록을 확보하고 스타일 로딩을 완벽하게 제어하고 웹사이트 전체에서 절대적인 시각적 일관성을 유지하기 위해 모든 주석이 포함된 긴 스니펫에 GeneratePress 요소 와 CSS를 삽입한 HTML 및 JS를 사용하기로 선택했습니다.
자동 버전과 비교한 주요 개선 사항은 다음과 같습니다:
- 렌더링 최적화: 어두운 테마의 즉각적인 로딩을 보장하는 통합된 CSS 스타일 계층 구조를 통해 깜박임과 충돌을 제거합니다.
- 시각적 일관성: 가독성 문제(흰색 배경에 회색 색상)를 방지하기 위해 동적 요소(블록 생성, 쿼리 루프, 탭 및 아코디언)의 색상과 필터를 정밀하게 조정합니다.
- 동적 요소 제어: 이미지와 메뉴의 혼합 필터
(믹스-블렌드 모드)및 불투명도를 수정하여 폴리랑 아이콘이나 다큐멘터리 페이지의 카드와 같은 요소가 어떤 조건에서도 올바른 대비를 유지할 수 있도록 합니다. - 기술적 정리: 중복 선택기를 디버깅하고 CSS 규칙을 통합하여 성능 및 CLS에 영향을 주지 않으면서 향후 유지보수를 용이하게 합니다.
이 작업은 플러그인으로도 할 수 있지만 논리적 한계가 있기 때문에 플러그인을 사용하지 않고도 세세한 부분까지 제어하고 미세 조정할 수 있을 뿐만 아니라 로딩 속도에 미칠 수 있는 영향에 대응하기 위해 코드로 하기로 결정했습니다.
이 코드에 관심이 있으신 분들께서도 호루라기를 불면 여기에 게시해 드리겠습니다. 다크 웹 서핑을 즐기시는 분들 중 개선할 수 있는 부분이 있다면 언제든지 댓글을 남기거나 게시물 하단의 노란색 '버그 신고' 버튼을 힘껏 클릭해 주세요.
또한 저는 워드프레스 최적화 작업과 가끔씩 GenerateBlocks 블록을 사용하여 GeneratePress 템플릿으로 마이그레이션 및 조정 작업을 수행한다는 점을 상기시켜 드리고 싶습니다.
