While using dark mode in a Next.js web app with Tailwind, you may have noticed that when scrolling, if you go past the scroll container (almost as if you're bouncing off the bottom or top of the page), the dark mode doesn't extend all the way. Instead, the color isn't applying properly and it shows the previous color underneath (which is usually white). What could be causing this issue and is there a way to ensure that the dark mode extends fully?
Browsers where the issue occurs:
- Firefox
- Brave
- Chrome
Browsers where the dark mode works correctly:
- Safari
We can see that platforms like Stackoverflow and tailwindcss.com handle dark mode well, extending it fully across the entire 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>{" "}