초기 렌더링시 다크 모드 깜빡임 에러 (dark mode flash error) 해결

[kimyouknow]

About

1. 초기 렌더링시 다크 모드 깜빡임 에러 (dark mode flash error) 해결

Description

1. 초기 렌더링시 다크 모드 깜빡임 에러 (dark mode flash error) 해결

-.mov

원인

현재 적용 과정

• local storage에 저장된 값이 없으면 os에 지정된 prefers-color-scheme에 따라 테마를 선택하기
• 초기 테마를 정하면 body태그에 class를 추가해서 css-variable 적용

문제

• body태그에 theme관련 태그(.dark)를 추가하기전 html이 렌더링되어 light모드로 렌더링됨
• html이 렌더링 된 후 js로직이 동작해 dark모드로 바꿈

해결방법

이론

• 컴파일 시 HTML을 생성할 때 모든 콘텐츠(페이지 자체) 앞에 <script> 태그를 삽입 (blocking HTML)
• 해당 스크립트 태그에서 사용자의 색상 기본 설정이 무엇인지 알아보기
• JavaScript를 사용하여 CSS 변수 업데이트

실제 적용

• gatsby-srr.js에서 onRenderBody와 setPreBodyComponents를 활용해서 body태그 전에 테마를 설정하는 script로직 삽입
• codesandbox예제

// gatsby-srr.js

const setInitThemeMode = () => {
  // 초기 테마 설정 로직 : src/utils/themeMode.ts와 같은 로직
}

const setInitThemeModeScript = functionToScript(setInitThemeMode)
const codeRunOnClient = `(${setInitThemeModeScript})()`

const MagicScriptTag = () => {
  return <script dangerouslySetInnerHTML={{ __html: codeRunOnClient }} />
}

export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents(<MagicScriptTag key="setInitThemeMode-script" />)
}

Result

-.mov

Ref

• https://www.joshwcomeau.com/react/dark-mode/#updating-html-in-gatsby-8
• https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
• https://victorzhou.com/blog/dark-mode-gatsby/