Theme switching for specific pages
Unanswered
FaseehFS posted this in #help-forum
FaseehFSOP
In my CSS file, I have dark and light themes defined this way using the Tailwind color palette:
This is my layout:
Can someone tell how to change
.light {
--color-bg: var(--color-white);
--color-fg: var(--color-black);
...
}
.dark {
--color-bg: var(--color-gray-900);
--color-fg: var(--color-white);
...
}This is my layout:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="light">
<body
className={`bg-bg text-fg ${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Navbar />
{children}
</body>
</html>
);
}Can someone tell how to change
className="light" in the html tag to className="dark" when the OS theme is dark? I don't want to apply dark mode for the landing page (mysite.com/).3 Replies
@FaseehFS In my CSS file, I have dark and light themes defined this way using the Tailwind color palette:
css
.light {
--color-bg: var(--color-white);
--color-fg: var(--color-black);
...
}
.dark {
--color-bg: var(--color-gray-900);
--color-fg: var(--color-white);
...
}
This is my layout:
tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="light">
<body
className={`bg-bg text-fg ${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Navbar />
{children}
</body>
</html>
);
}
Can someone tell how to change `className="light"` in the html tag to `className="dark"` when the OS theme is dark? **I don't want to apply dark mode for the landing page (`mysite.com/`).**
did you tried to add this?
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--color-bg: var(--color-gray-900);
--color-fg: var(--color-white);
}
}FaseehFSOP
I did that. But can you say how to not apply .light for all other pages? This layout is directly placed in the app directory.
@FaseehFS I did that. But can you say how to not apply .light for all other pages? This layout is directly placed in the app directory.
sorry didnt notice you should turn layout into client or use LayoutEffect and inject the class.