Dark mode using selector strategy with NextJS App router.
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
I'm trying to follow this:
https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
I quite like the simplistic approach of adding dark to my html tag, and that works great manually, I want to add a switch to do this, and also read from local storage... BUT I'm not sure where or how to do that, as i'm using RSC's so components (and root layout) are running on the server, so local storage approach doesn't really work ?
I've seen a bit of this next-theme module, and that might be the approach I use... But with this selector approach by tailwinds, it seems like a nice simple method to add 'dark' to HTML tag, would be preferred. But I'm a bit stuck on how I even make use of local storage with these server components.
Has anyone implemented tailwinds guide on nextjs app router RSC's ?
https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
I quite like the simplistic approach of adding dark to my html tag, and that works great manually, I want to add a switch to do this, and also read from local storage... BUT I'm not sure where or how to do that, as i'm using RSC's so components (and root layout) are running on the server, so local storage approach doesn't really work ?
I've seen a bit of this next-theme module, and that might be the approach I use... But with this selector approach by tailwinds, it seems like a nice simple method to add 'dark' to HTML tag, would be preferred. But I'm a bit stuck on how I even make use of local storage with these server components.
Has anyone implemented tailwinds guide on nextjs app router RSC's ?
Answered by Plott Hound
Hi. This library is great for theme implementation https://www.npmjs.com/package/next-themes
20 Replies
@Barbary Lion I'm trying to follow this:
https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
I quite like the simplistic approach of adding dark to my html tag, and that works great manually, I want to add a switch to do this, and also read from local storage... BUT I'm not sure where or how to do that, as i'm using RSC's so components (and root layout) are running on the server, so local storage approach doesn't really work ?
I've seen a bit of this next-theme module, and that might be the approach I use... But with this selector approach by tailwinds, it seems like a nice simple method to add 'dark' to HTML tag, would be preferred. But I'm a bit stuck on how I even make use of local storage with these server components.
Has anyone implemented tailwinds guide on nextjs app router RSC's ?
Plott Hound
Hi. This library is great for theme implementation https://www.npmjs.com/package/next-themes
Answer
Plott Hound
It will automatically add the dark class to your html element, allow easy switching between themes and let you read the current active theme.
Barbary LionOP
That uses the previous tailwind CLASS strategy, I want to try implement their new selector approach, so trying to figure out how to do that with RSC's
you cant know ahead of time what the users preference is before the client loads so doing it in RSC is not really possible
in addition to this localStorage is a client api you cant access it in an RSC
Barbary LionOP
Since the themeprovider is a client component, can you safely wrap your whole app in this client component ? won't it make the whole app a client component ?
Plott Hound
it is fine to wrap RSC with client component using
children its a common approachlet me find the docs link
@Barbary Lion Since the themeprovider is a client component, can you safely wrap your whole app in this client component ? won't it make the whole app a client component ?
Plott Hound
and to clarify no it wont make the children client components
Barbary LionOP
oh.... ok that was one of my concerns... Sweet thanks! I'm implementing the next theme library... very smooth
Thanks for the help!
@Barbary Lion Thanks for the help!
Plott Hound
you're welcome, please mark my reply as the answer. instructions are in the first reply to your post
@Barbary Lion oh.... ok that was one of my concerns... Sweet thanks! I'm implementing the next theme library... very smooth
Plott Hound
just an fyi. you will encounter a hydration error when you get it setup, this is because we are adding the dark class/or data attribute to the html element after the client has mounted, the fix is simply to add
suppressHydrationWarning to your html tag in layout.tsx. it only works one level deep so it wont supress hydration warnings within the html tagreturn (
<html lang="en" className="h-full" suppressHydrationWarning={true}>
<body className={
<ThemeProvider attribute="class">{children}</ThemeProvider>
</body>
</html>
<html lang="en" className="h-full" suppressHydrationWarning={true}>
<body className={
${inter.className} h-full subpixel-antialiased}><ThemeProvider attribute="class">{children}</ThemeProvider>
</body>
</html>
Like that ?
Plott Hound
yeah but you dont even need to pass true:
<html lang="en" className="h-full" suppressHydrationWarning>Barbary LionOP
oh ok great thanks