Theme switching for specific pages
Answered
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/).Answered by RxvxntxN
Or i am not sure though , I assume you are asking for only Landing page be light color and rest of page be based on OS color , so for Landing page , i think you can do it with
useState hook and usePathname from next/navigation where it will location on landing page. ( I hope i gave you some ideas )21 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.
@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/`).**
Hello , Are you asking that background color automatically change based on OS theme color ?
Or i am not sure though , I assume you are asking for only Landing page be light color and rest of page be based on OS color , so for Landing page , i think you can do it with
useState hook and usePathname from next/navigation where it will location on landing page. ( I hope i gave you some ideas )Answer
FaseehFSOP
Thanks, it helped a lot! I'll try that 🙂
Original message was deleted
@FaseehFS description already written , bro
FaseehFSOP
What?
it is already written there with screen shot 😭
FaseehFSOP
I can't see it 🤔
@FaseehFS How do I mark this post as "answered" as this person did?
right click a message > app > mark solution
select the message thats most helpful / solves your issue
or i could do that for you
@FaseehFS Where?
Apps >
FaseehFSOP
Oh, found it
nice, thank you!
FaseehFSOP
Thanks!
Thank you , i am very happy that i could help