you could write logic inside client-side component and then import inside the server-side. for example write change theme component and import it inside the navbar instead of making entire navbar client-side

But the whole navbar has styles that need to be changed. That's the problem

How do you usually implement dark mode?

I create hook which handles updating and getting info from thee localstorage and then use them whenever I want, but for the most of the libraries, just adding "dark" in the body classname is enough

That would make your components client side right?

only the theme updaters

Like wrapping the root component with a client component where i would use zustand to get the state. Then pass the state as a prop. Will this be feasible. Also this would mean that a server component is within a client component is that possible?

thats possible, its well explained in the docs

final question is this a good way to implement dark mode?

I would personally implement it with a class on your HTML like tailwind does

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

ohhh so i only need to add the class dark in one place that is the root?

if you dont need toggleable themes, thent tw is enough.

but if you need toggleable themes, next-themes handles that for you

ahh it's confusing in nextjs we must try to avoid client components right? But wouldn't this make the whole app client side since ThemeProvider is a client component?

ahh it's confusing in nextjs we must try to avoid client components right

incorrect

But wouldn't this make the whole app client side since ThemeProvider is a client component

not really

client components can wrap server components when the server components are passed via the children prop

but I do actually agree that if you're going to be using next theme's hook to get theme data everywhere it's not ideal

cause then indeed every component that has css would need to be a client one

you dont need to use next theme's hook to get theme data

ooh ok yeah that makes sense

you can simply set the css selector and define what to display under a certain condition
its only that if you want to display a completely different DOM tree using the theme

that's my confusion. I use tailwind so if i render the classes conditionally wouldn't all my components be client side

no it wouldnt

wdym with render classes conditionally

like if dark theme bg-black

cause smth like "dark:bg-red-50" is pure css

or are you doing className:{dark ? " " : " " }

but i still have to add "dark" for that to work right?

dark isn't a js variable

it's a CSS selector

i mean className:{dark ? " dark" : " " }

you dont do it like that

and then dark:bg-black

this is already handled by next-themes

if the root body has className = "dark", then all the styles with dark: will be applied

ohhh ok so that's where next-themes comes in? I though I have to do it for all the components

yeah

ok thanks guys now it's clear

then you can set up your tailwind like this

and have multiple themes

only need to use the useTheme to change the theme

or to render different DOM elements under different theme

i can also use className="bg-white dark:bg-black" and it would work right?

yes

my screenshot is if you have more than 2 theme, that is where you have to assign the "tokens" to each colors

yeah i understand in your example it set's the bg and others to the spcific one according to your selection

its in the docs

can you show me a ss of a component?

I meant with multiple theme

ohh ok got it

Thanks man

nw! happy to help