尾风暗模式在页面上一直滚动时不完全延伸

发布于 2025-02-06 03:59:02 字数 839 浏览 1 评论 0原文

在NextJS Web应用程序中使用Tailwind的Dark Mode，在滚动时，如果您滚动经过滚动容器（滚动时几乎就像您的底部或顶部弹跳），则暗模式并非一路延伸，所以颜色不应用，它只是下面的先前颜色（在这种情况下为白色），这是什么原因，有没有办法完全扩展黑模式？

不起作用的浏览器

黑暗模式下
在
stackoverflow和tailwindcss.com的

处理

Safari

浏览器在黑暗模式下处理此井，而暗模式在整个页面上完全延伸到整个页面

_APP.TSX

 <Store state={state} dispatch={dispatch}>
        <Head>
          <meta charSet="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
        </Head>
        <div className="h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain">
          <Component {...pageProps} id="app" />
        </div>
      </Store>{" "}

原文

using dark mode in a nextjs web app with tailwind, when scrolling, if you scroll past the scroll container (almost like your bouncing off the bottom or top of the page when scrolling), the dark mode isn't extending all the way, so the color isn't applying and it's just the previous color underneath (white in this case), what is the reason for this and is there a way to extend the dark mode fully?

Browsers that don't work

Firefox
Brave
Chrome

Browsers that do work

Safari

stackoverflow and tailwindcss.com in dark mode handle this well and the dark mode extends fully on the whole page

_app.tsx

 <Store state={state} dispatch={dispatch}>
        <Head>
          <meta charSet="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
        </Head>
        <div className="h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain">
          <Component {...pageProps} id="app" />
        </div>
      </Store>{" "}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍白女子 2025-02-13 03:59:02

您必须将样式应用于body或：root（html）元素。对于示例，我将向它们显示应用于：root元素。

您在Next.js中有两个主要选项 - 全局样式表或内联。

全球样式表，带有 tailwind Directives

Global styles.css global styles.css

global.css

@tailwind base;

@layer base {
 :root {
  @apply dark:bg-black dark:text-white;
 }
}

intellline inthine类内线

以应用于内线，必须创建一个自定义 _文档页面。同样，您可以将样式应用于body或html标签。

_document.js

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

export default function Document() {
  return (
    <Html className="dark:bg-black dark:text-white">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

You must apply the styles to the body or :root (HTML) element. For the examples, I'll show them applied to the :root element.

You have two primary options in Next.js - global stylesheet or inline.

Global stylesheet with tailwind directives

Global styles

global.css

@tailwind base;

@layer base {
 :root {
  @apply dark:bg-black dark:text-white;
 }
}

inline class

To apply styles inline, you must create a custom _document page. Again, you can apply the styles to either the body or html tags.

_document.js

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

export default function Document() {
  return (
    <Html className="dark:bg-black dark:text-white">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

回复收藏 0 原文

新雨望断虹 2025-02-13 03:59:02

我遇到了同样的问题。事实证明，这是因为我的深色背景/前景颜色样式在一个反应组件（容器布局组件）上，而不是在身体元素上。

我通过将深色背景/前景直接设置在我的CSS文件中的身体元素上进行修复：

@layer base {
  body {
   @apply dark:bg-slate-800 dark:text-white;
  }
}

然后在您的页面/_app.jsx文件或任何地方都可以调用docuct.docorme> document.documentEllement.classlist.classlist.add（“ dark”） ;，即使在滚动时，也将正确设置暗模式。

https://tailwindcss.com/docs/docs/dark-mode

I was running into the same problem. Turns out it was because my dark background/foreground color styling was on a React component (a container layout component) rather than being on the body element.

I fixed it by setting the dark background/foreground directly on the body element in my css file:

@layer base {
  body {
   @apply dark:bg-slate-800 dark:text-white;
  }
}

Then in your pages/_app.jsx file or wherever, you can call document.documentElement.classList.add("dark"); and the dark mode will be set properly even on scroll.

https://tailwindcss.com/docs/dark-mode

回复收藏 0 原文

洋洋洒洒 2025-02-13 03:59:02

我尝试了所有以前的答案，但它们都不对我有用。唯一最终工作的是创建一个_document.js，然后在html部分中添加一个ID：

_document.js，

import React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
    return (
        <Html id="html" className="bg-white">
            <Head />
            <body className="bg-bg-light dark:bg-bg-dark">
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

然后在切换过程中添加并添加并删除深色背景（没有“ dark：'prefix）：

darkmode.jsx

useEffect(() => {

    if (darkMode !== undefined) {
        if (darkMode) {
            document.body.classList.add("dark");
            document.getElementById("html").classList.add("bg-black")
        } else if (!darkMode) {
            document.body.classList.remove("dark");
            document.getElementById("html").classList.remove("bg-black")
        }
    }
}, [darkMode])

I 。

sean w ）让我朝着正确的方向设置我

I tried all of previous answers and none of them worked for me. The only thing that finally worked was to create a _document.js, and add an id to the HTML section:

_document.js

import React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
    return (
        <Html id="html" className="bg-white">
            <Head />
            <body className="bg-bg-light dark:bg-bg-dark">
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

Then add and remove the dark background (without the 'dark:' prefix) during the toggle:

DarkMode.jsx

useEffect(() => {

    if (darkMode !== undefined) {
        if (darkMode) {
            document.body.classList.add("dark");
            document.getElementById("html").classList.add("bg-black")
        } else if (!darkMode) {
            document.body.classList.remove("dark");
            document.getElementById("html").classList.remove("bg-black")
        }
    }
}, [darkMode])

I did not add the tailwind directive to globals.css

Thanks to Sean W for setting me in the right direction.

回复收藏 0 原文

~没有更多了~