search

pacocoursey / next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
https://next-themes-example.vercel.app/
MIT License
4.68k stars 169 forks source link

[Bug]: NextJs dark mode background is black on overscroll #297

Open maheshmnj opened 1 month ago

maheshmnj commented 1 month ago

What happened?

I applied next-themes dark mode in the following way 

// page.tsx
import PSNavbar from "./PSNavbar";
export default function Pastelog() {
    return (
        <>
            <PSNavbar />
            <div className="flex flex-col space-y-4 min-h-screen">
                <p>hello world</p>
            </div>
        </>
    );
}
// layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className='light'>
      <body className={`${inter.className}`}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

// providers.tx

// app/providers.tsx
'use client'

import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <NextUIProvider>
            <NextThemesProvider attribute="class" defaultTheme="dark">
                {children}
            </NextThemesProvider>
        </NextUIProvider>
    )
}
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --color-primary: #4f46e5;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;
  --color-background: #f3f4f6;
  --color-surface: #ffffff;
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Merriweather', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 80, 80, 80;
    --background-end-rgb: 80, 75, 75;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 255, 255, 255;
    --background-end-rgb: 243, 244, 246;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom,
      transparent,
      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

Notice that when we toggle theme to dark mode and scroll the page the background is black (the body of the web page not visible in the viewport). Also refers-color-scheme: light and dark seem to have different values but it still uses values of dark mode (gray color)

https://github.com/pacocoursey/next-themes/assets/31410839/362877c6-9f57-4c63-964a-db5d5e3ac0b3

Version

Next.js v14.2.3

What browsers are you seeing the problem on?

Chrome