웹 사이트 Light 및 Dark 모드 스타일 적용 에러 해결 방법
Light/Dark 테마 호출 에러 해결 방법
- Tool :
🔔 1. 에러 발생
📌 토글 버튼 업데이트에 따른 이슈 발생
- 기존 깃허브 블로그에 Light/Dark 모드를 변경하는 토글 버튼을 추가하였습니다.
- 토글 버튼 클릭 시 버튼의 아이콘이 바뀌면서 테마에 따른 블로그 스타일도 변경하였습니다.
- 그런데 Light 모드에서 새로고침 시 잠시 Dark 모드로 전환되는 에러를 발견하였습니다.
- 그래서 새로고침을 하면 밝은색 위주의 색상이 깜빡 거리는듯한 점멸 현상이 발생되었습니다.
- 한편 Light/Dark 스타일 변경을 위한 토글 버튼 추가 방법은 이 문장과 링크된 글에 있습니다.
📌 FOUC : 스타일 적용 에러
- 새로고침 시 잠시 다른 스타일로 전환되는 에러인 FOUC는 웹 개발 시 종종 발생됩니다.
- FOUC는 Flash of Unstyled Content의 약자이며 스타일 적용 에러의 한 종류입니다.
- 이 에러의 특징은 스타일이 적용되기 전에 페이지의 일부가 먼저 로드되는 것입니다.
🔔 2. 에러 해결 방법
📌 localStorage.getItem() 메서드
- FOUC 에러를 해결하기 위해서는 페이지가 로드되기 전에 스타일이 적용되어야 됩니다.
- 이를 위해서는 HTML 문서가 파싱되기 전에 실행되는 인라인 스크립트를 추가해야 됩니다.
- 필자는 loalStorage.getItem() 메서드 관련 코드를 head.html 파일 내부에 추가하였습니다.
- root/_includes/head.html 파일에 추가한 내용은 아래와 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<script>
(function () {
var theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-mode', 'dark');
} else {
document.documentElement.setAttribute('data-mode', 'light');
}
})();
</script>
<!-- 다른 코드들 -->
</head>
📌 코드 적합성 테스트
- 한편 loalStorage.getItem() 메서드 관련 코드가 정답이 아닐 가능성이 있습니다.
- 따라서 addEventListener 관련 코드를 적용해보았습니다.
- 해당 코드는 HTML 문서의 로딩(파싱 포함)이 완료되었을 때 실행됩니다.
- 즉, HTML 파싱 전에 실행되는 loalStorage.getItem() 메서드보다 실행이 지연됩니다.
- 역시나 아래의 addEventListener 관련 코드를 추가해보았지만 에러가 해결되지는 않았습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-mode', 'dark');
} else {
document.documentElement.setAttribute('data-mode', 'light');
}
});
</script>
<!-- 다른 코드들 -->
</head>
🔔 3. 에러 해결
📌 localStorage.getItem() 메서드 실행 결과
- localStorage.getItem() 메서드 관련 코드를 head.html 파일에 추가하였습니다.
- 그 결과 아래와 같이 새로고침을 하여도 페이지가 전환되지 않는 것을 확인하였습니다.
- 그러므로 HTML 문서가 파싱되기 전에 스타일이 잘 적용된 것이라고 판단되었습니다.
🎁 4. 부록
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.