I'm using next-themes in my Next.js app. I want to force the theme to dark regardless of user preference.
I've set forcedTheme='dark', but:
The theme still changes based on the user's system settings.
I can manually switch themes using the DevTools theme emulator.
How can I enforce dark mode completely?
My layout.js:
import { ThemeProvider } from 'next-themes'
import './globals.css'
export default function RootLayout({ children }) {
return (
<html suppressHydrationWarning>
<body>
<ThemeProvider
forcedTheme='dark'
defaultTheme='dark'
attribute='class'
enableSystem={false}
>
{children}
</ThemeProvider>
</body>
</html>
)
}
GitHub Repo:
Hosted URL: /
(Intent: I want users to use dark mode for now as the light mode is not fully ready yet.)