Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
maheshmnj opened this issue Jun 3, 2024 · 0 comments
Open

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

maheshmnj opened this issue Jun 3, 2024 · 0 comments
Labels
bug Something isn't working triage

Comments

@maheshmnj
Copy link

maheshmnj commented Jun 3, 2024 •
edited
Loading

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)

Screen.Recording.2024-06-03.at.00.13.33.mov

Version

Next.js v14.2.3

What browsers are you seeing the problem on?

Chrome
@maheshmnj maheshmnj added bug Something isn't working triage labels Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@maheshmnj