如何修复NextJS中的暗模式背景色闪烁？

axzmvihb 于 2022-10-21 发布在其他

关注(0)|答案(2)|浏览(157)

所以我的问题是，Next.js不能在客户端访问localStorage，因此将提供默认情况下有或没有class="dark"的HTML。
这意味着，当用户重新加载页面时，<html>暂时不具有class="dark"，导致在执行某个Java脚本并将class="dark"添加到<html>之前，出现浅色背景色闪烁。如果我将class="dark"与HTML一起发布，同样的问题也会发生，但情况正好相反：在class="dark"从<html>中移除之前，浅色模式的用户将体验到深色背景的闪烁。
有没有办法在页面呈现之前*执行一些Java脚本？然后，我将能够根据用户的localStorage向<html>添加或不添加class="dark"。

next.js

来源：https://stackoverflow.com/questions/67094919/how-to-fix-dark-mode-background-color-flicker-in-nextjs

2条答案

按热度按时间

qnakjoqk1#

当然，使用以下内容将noflash.js文件添加到您的公共目录

(function () {
    // Change these if you use something different in your hook.
    var storageKey = 'darkMode';
    var classNameDark = 'dark-mode';
    var classNameLight = 'light-mode';

    function setClassOnDocumentBody(darkMode) {
        document.body.classList.add(darkMode ? classNameDark : classNameLight);
        document.body.classList.remove(darkMode ? classNameLight : classNameDark);
    }

    var preferDarkQuery = '(prefers-color-scheme: dark)';
    var mql = window.matchMedia(preferDarkQuery);
    var supportsColorSchemeQuery = mql.media === preferDarkQuery;
    var localStorageTheme = null;
    try {
        localStorageTheme = localStorage.getItem(storageKey);
    } catch (err) {}
    var localStorageExists = localStorageTheme !== null;
    if (localStorageExists) {
        localStorageTheme = JSON.parse(localStorageTheme);
    }

    // Determine the source of truth
    if (localStorageExists) {
        // source of truth from localStorage
        setClassOnDocumentBody(localStorageTheme);
    } else if (supportsColorSchemeQuery) {
        // source of truth from system
        setClassOnDocumentBody(mql.matches);
        localStorage.setItem(storageKey, mql.matches);
    } else {
        // source of truth from document.body
        var isDarkMode = document.body.classList.contains(classNameDark);
        localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
    }
})();

// https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt

然后，将以下script src标记添加到pages/_document文件的Head类中 Package 的返回内容中

import Document, {
    Head,
    Html,
    Main,
    NextScript,
    DocumentContext
} from 'next/document';

class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps };
    }
    render() {
        return (
            <Html lang='en-US'>
                <Head>
                    <meta charSet='utf-8' />
                    <script type="text/javascript" src='/noflash.js' />
                </Head>
                <body className='loading'>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

上面的方法有效，但下面的方法与Nextv10+完美配合。它只需要将以下配置添加到根next.config.js文件中。
next.config.js

module.exports = {
  env: {
    noflash: fs.readFileSync('/noflash.js').toString()
  }
}

然后，更改pages/_document文件中的以下脚本标记，如下所示
before

//
        <Head>
            <meta charSet='utf-8' />
            <script type="text/javascript" src='/noflash.js' />
        </Head>
//

after

//
        <Head>
            <meta charSet='utf-8' />
            <script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.noflash}} />
        </Head>
//

Link to a repo where I use the first approach(从2020年秋季开始，在TailWincss内置暗模式支持之前)

赞(0）回复(0）举报 2022-10-21

rhfm7lfc2#

我的解决方法是通过在第一次渲染中进行条件渲染，
请看我的回答。

赞(0）回复(0）举报 2022-10-21