Dark mode 깜빡거림 해결하기

현재 이 블로그는 Dark mode가 적용되어있긴하나 어째 마음에 들지 않는다.

문제점

현재는 mode의 변환 시 localStorage에 dark-mode으로 저장된다. mode가 dark라면 dark-mode는 true, 아니면 false인 셈이다. 로컬에서 테스트 할 때는 큰 문제가 보이지 않았는데 vercel 배포를 진행하면 깜빡 거림(다크모드였다가 전환되는 느낌?)이 크게 느껴진다. 이를 해결 해보고자 한다.

해결하기

이는 localStorage의 값을 state 초기화할 때 가져올 수 없어 useEffect에서 처리해주기 때문에 깜빡거림이 생긴다고 판단했다.

해당 문제를 해결하기 위해서 _document.tsx 를 수정해줬다.

const setDarkMode = `
    const setDarkMode = `
    function setDarkMode() {
        const theme = localStorage['dark-mode']
        if(theme === "true" || (!('dark-mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) ){
            document.body.classList.add('dark');
            document.body.classList.remove('light');
        }
        else {
            document.body.classList.add('light');
            document.body.classList.remove('dark');
        }
    }
    setDarkMode();
    `;

    return (
        <Html>
            <body>
                <script dangerouslySetInnerHTML={{ __html: setDarkMode }} />
                <div id="portal" />
                <Main />
                <NextScript />
            </body>
        </Html>
    );

먼저 _document는 공통적으로 적용할 HTML 마크업을 대부분 다룬다고 보면된다.

localStorage의 값으로 state를 초기화 하기 어렵기 때문에 document에 body의 classList를 추가하는 초기화 작업을 추가한다. script를 추가하는 것이다. 이는 setDarkMode 함수를 실행하고 이때 localStorage에 dark-mode 값을 판단하고 없다면 시스템 데이터를 가져와서 dark 혹은 light을 판단하여 초기화 해준다.

Dark mode 깜빡거림 해결하기

문제점

해결하기

끝