个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 02:43:02 29 4
gpt4 key购买 nike

所以我的问题是 Next.js 无法访问 localStorage在客户端，因此将发送默认情况下有或没有 class="dark" 的 HTML .

这意味着当用户重新加载页面时，<html>简而言之没有class="dark" ，在执行某些 javascript 和 class="dark" 之前，导致背景颜色闪烁。被添加到 <html> .如果我用 class="dark" 发送 HTML ，同样的问题发生但相反:然后亮模式用户将在 class="dark" 之前体验到暗背景颜色的闪烁。从 <html> 中删除.

有没有办法在页面呈现之前执行一些javascript？然后我就可以添加或不添加 class="dark"至 <html>基于用户的localStorage .

最佳答案

当然，添加一个 noflash.js 文件到你的 public 目录，包含以下内容

(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 类中包装的返回内容

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 文件中更改以下脚本标记，如下所示

之前

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

之后

//
        <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 年秋季开始，在 tailwindcss 内置暗模式支持之前)

关于javascript - 如何修复 NextJS 中的暗模式背景颜色闪烁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67094919/

29 4 0
文章推荐： okhttp - 我可以使用 OkHttp 将本地 IP 地址绑定(bind)到我的 SSLSocketFactory 吗？
文章推荐： swiftui - 在 SwiftUI (tvOS) 中获取按钮的 onFocusChange 回调
文章推荐： python - XGBoostError : Check failed: typestr. size() == 3(2 对 3): `typestr' 的格式应为
文章推荐： Azure 服务总线主题请求与消息
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com