App Directory dark mode with tailwindcss and SSR #47952

artemavrin · 2023-04-05T08:20:37Z

artemavrin
Apr 5, 2023

Dark mode in app dir with tailwindcss and SSR

Get theme from cookies in main layout

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const theme = cookies().get("theme")

  return (
    <html lang="en" className={theme?.value}>
      <body className="
        bg-white
        text-black
        dark:bg-black
        dark:text-white
        transition
        duration-700"
      >
        {children}
      </body>
    </html>
  )
}

Implement theme switcher component. It's client component

// components/client/theme-swither.tsx
"use client"

interface Props {
    theme: Theme
}

export const ThemeSwitcher: FC<Props> = ({ theme }) => {

    const [_theme, setTheme] = useState<Theme>(theme)

    const toogleTheme = () => {

        const root = document.getElementsByTagName('html')[0]
        root.classList.toggle(Theme.dark)
        if (root.classList.contains(Theme.dark)) {
            setTheme(Theme.dark)
            document.cookie = `theme=${Theme.dark}`
        } else {
            setTheme(Theme.light)
            document.cookie = `theme=${Theme.light}`
        }

    }

    return (
        <button onClick={toogleTheme}>
            {
                _theme == Theme.dark ?
                    <SunIcon className="h-10 w-10 text-yellow-500" />
                    :
                    <MoonIcon className="h-10 w-10" />
            }
        </button>
    )}

Render page with theme switcher. Pass current theme from cookie to theme switcher as parameter

// app/page.tsx
export default function Home() {

 // current theme from cookies
  const theme = cookies().get("theme")?.value === "dark" ? Theme.dark : Theme.light
  return (
    <main className="flex flex-col justify-center items-center h-full gap-5 p-10">
      <div className="">
        <ThemeSwitcher theme={theme} />
      </div>
      <div className="flex justify-center items-center">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />

      </div>
      <h1 className="text-5xl md:text-8xl font-extrabold text-center max-w-6xl">
        The React Framework for the Web
      </h1>
      
    </main>
  )
}

source code

paulwongx · 2023-05-17T20:05:31Z

paulwongx
May 17, 2023

@artemavrin Thanks for this. So clarifying the obvious, but this is better than next themes for example because it doesn't require wrapping the whole app in a provider, which necessitates the whole app needing to be "use client", meaning the whole app won't be server rendered defeating the whole purpose of the app dir right?

This approach avoids the whole app being wrapped in a provider, thus, allows for server side rendering cuz the server can get the theme cookie(?) when rendering on the server side and still thus allows for theme switching right?

9 replies

danieljcksn May 24, 2023

This is not correct, you can still SSR children components if your wrapping provider uses the "use client" directive. The children don't become client components because of it.

No, I think that's wrong. Take a look at the documentation:

Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.

Source: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

tresorama May 24, 2023

Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.

I think this means that a client component can :

shows children
imports other files at the top, renders them, and shows them

While the second involves that every imported file is rendered as Client Component, because they are imported from a Client Component file.
The first, showing children, is not the same thing, because children can be passed from a Server Component.

You can imagine that your app is rendered as two app:

Server tree, by the Node env
Client tree, by the browser env

Rendering means calculating the output of that React Component, not placing it in the right DOM node.These two operation are detached

Then the browser will take these two trees (Client and Server) and create a third tree, that lives only in the browser, a Virtual Tree.
ThisVirtual Tree is then mounted by the browser runtime into the DOM, creating what we humans see as a page.

Nodes of this Virtual Tree are slots that must be filled on the browser, with a rendered component, which can come from the Server tree or the Client tree, and this is true at every level of the tree.

It's important to note that every node's component of the Virtual Tree will preserve its rendering origin.
So a Server Component will always be rendered (and re-rendered) on the Server, and then mounted by the browser runtime in the right place.
And a Client Component will always be rendered (and re-rendered) on the Client, and then mounted by the browser runtime in the right place.

Disclaimer: I'm not a maintainer and this is my mental model of Server Components at the moment, so what I said could be false.

ZeroPie May 26, 2023

This is not correct, you can still SSR children components if your wrapping provider uses the "use client" directive. The children don't become client components because of it.

No, that's wrong. Take a look at the documentation:

Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.

Source: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Composing Client and Server Components

How i confirmed it:

1 - Wrap your App with a Theme Provider with the"use client" directive
2 - Disabled JS in Chrome Developer Tools
3 - Reloaded the page
4 - I get HTML from the Server and not an empty document.

If i am wrong or i am not seeing/understanding something, please do let me know.

tigawanna Jun 18, 2023

Wrapping the app in a "use client" rovider doesn't stop you from using server components as it's children

paulwongx Nov 17, 2023

I realized the answer to this which helped clarify a lot of stuff.

If you have "use client" and try to import a server component in the component itself or in one of it's children, it won't work.

However, if you use a client component inside a server component, the children of that server component can still be a server component.

The article below clarifies it so much. Essentially you want to think of client components as boundaries and not the file itself. You set the boundary by putting "use client" and that file and all it's children are client components.

But say you have a client provider that you include in a server component at the root of your application, as long as that component is a server component, the children can also be server components

Reference: https://www.joshwcomeau.com/react/server-components/
^ This should really be required reading for anyone using Next 13/14 app dir

codinginflow · 2023-08-06T14:54:54Z

codinginflow
Aug 6, 2023

2 replies

tigawanna Aug 6, 2023

Providers are client only , meaning on first load , if you want to use the system theme or had a preferred theme already saved the server components would have rendered with the defaults and components like the theme toggle too , on getting to the client context takes over and changes the html during hydration and you get those hydration warnings

codinginflow Aug 6, 2023

I was wrong, sorry.

deployn · 2023-09-05T11:09:28Z

deployn
Sep 5, 2023

What happens if you use localstorage instead of cookies?

6 replies

deployn Sep 5, 2023

This is my implementation:

"use client"

import React, { useState, useEffect } from 'react';

export default function DarkModeToggle() {
  const [theme, setTheme] = useState(() => {
    const localTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    return localTheme || (prefersDark ? 'dark' : 'not-dark');
  });

  useEffect(() => {
    localStorage.setItem('theme', theme);
    const root = document.getElementsByTagName('html')[0];
    root.classList.toggle('dark', theme === 'dark');
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
  };

  return (
    <button onClick={toggleTheme}>
      Button
    </button>
  );
}

No hydration errors as far as I can see. But are there other problems with the toggle?

tigawanna Sep 5, 2023

You'll still get hydration errors, because that toggle button will change during hydration from what it was server side , there's also the issue of the theme flashing briefly while it gets swapped out on the client before the page loads

AndrewRPorter Sep 7, 2023

You are also unable to read local storage values during SSR so you might get a flicker between page renders. One way around this would be to use next/link for all page routes

forksofpower Oct 5, 2023

To prevent the flicker on SSR I have opted to use Mantine-UI's theme loading approach:

import React from "react";

import { Theme } from "@/types/theme";

export interface ThemeLoaderProps
  extends React.ComponentPropsWithoutRef<"script"> {
  forceTheme?: boolean;
  defaultTheme?: Theme;
  localStorageKey?: string;
}

export const getScript = ({
  forceTheme,
  defaultTheme,
  localStorageKey = "theme",
}: Pick<
  ThemeLoaderProps,
  "defaultTheme" | "forceTheme" | "localStorageKey"
>) => {
  return forceTheme
    ? `document.documentElement.setAttribute("data-theme", '${defaultTheme}');`
    : `
    try {
      const stored = window.localStorage.getItem("${localStorageKey}");
      let theme = a === "light" || a ==="dark" || a === "auto" ? a : "${defaultTheme}";
      if (theme === "auto") {
        theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      }
      document.documentElement.setAttribute("data-theme", theme);
    } catch(t) {}`;
};

const ThemeLoader: React.FC<ThemeLoaderProps> = ({
  forceTheme,
  defaultTheme,
  localStorageKey,
}) => {
  const _defaultTheme = ["light", "dark", "auto"].includes(
    defaultTheme as string
  )
    ? defaultTheme
    : Theme.LIGHT;
  return (
    <script
      id="theme-loader-script"
      dangerouslySetInnerHTML={{
        __html: getScript({
          forceTheme,
          defaultTheme: _defaultTheme,
          localStorageKey,
        }),
      }}
    />
  );
};

export default ThemeLoader;

ThemeLoader is a server component that adds a script to the DOM that handles loading the theme value from localStorage. The result is no flashing of an initial theme and no hydration issues as the script will set the data-theme attribute before hydration.

The loader should be placed in the document <head> before any other scripts load. The app router root template is a great place for that!

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <html lang="en">
      <head>
        <ThemeLoader defaultTheme={Theme.LIGHT} />
      </head>
      <body>
          <ThemeProvider>
            <NavBar />
            {children}
          </ThemeProvider>
      </body>
    </html>
  );
}

Obviously this requires JS to be enabled to run, but the component could be extended with a cookie fallback if you're ambitious.

ScottyMaher Aug 17, 2024

Solution for this included in my answer #47952 (comment). Hope it helps :)

JamesSingleton · 2023-11-17T05:36:03Z

JamesSingleton
Nov 17, 2023

I was looking for a way to replace next-themes because I honestly don't like wrapping my entire application in that provider. One issue I ran into on this is upon page refresh the icon is correct, but the class name is removed. So now you are in a weird loop where it shows the sun when it's on light mode and the moon on dark mode.

2 replies

tigawanna Nov 17, 2023

Am mostly using daisyUI with tailwind and the classNames should persist across renders

ScottyMaher Aug 17, 2024

I did run into that too while playing around. You won't have any such problems with this solution: #47952 (comment). Since the icons are controlled directly by the theme applied to the html tag through CSS, rather than using state, there won't be a missmatch. :)

Yrobot · 2023-11-27T10:06:20Z

Yrobot
Nov 27, 2023

Thanks for your solution,

But this wont work for SSG, I am looking for a theme solution based on the localstorage, which will work for both client render and server render.

For now, i am trying to set the theme in the useEffect logic, but at that moment, the html has been rendered. So updating the theme in useEffect will cause the page to flicker, which is a bad user experience.

After reading daisyui doc website, the theme logic in it is based on the localstorage like this:

<script>
      try {
        document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"))
      } catch (e) {}
</script>

So i hope to add a script in head which update the theme and block the html parsing, so that the theme is setted before html rendered.

1 reply

ScottyMaher Aug 17, 2024

Solution for this included in my answer #47952 (comment). Hope it helps :)

tigawanna · 2023-11-27T10:47:38Z

tigawanna
Nov 27, 2023

does that work? ,
Mine relied on injecting the script while SSRing server-side

      emitToDocumentHead() {
        const cookie_theme = requestContext?.cookie?.theme;
        return `
    <link rel="icon" type="image/svg+xml" href="/site.svg" />
    <script>
      (function() {
        document.documentElement.setAttribute("data-theme", "${cookie_theme}");
      })();
     </script>
`
      },

but I think that should work if it is the first script that runs on the page

0 replies

GabrielMendonca1 · 2024-07-10T01:40:36Z

GabrielMendonca1
Jul 10, 2024

where this icons from ?

1 reply

artemavrin Jul 10, 2024
Author

heroicons

ScottyMaher · 2024-08-17T08:39:34Z

ScottyMaher
Aug 17, 2024

Nice! This is a very easy way to set up the theme switching. I think it can be simplified a little like so:

"use client";

import { Moon as MoonIcon, SunMedium as SunIcon } from 'lucide-react';

const ToggleThemeButton = ({ className = '' }: { className?: string }) => {
  const toggleTheme = () => {
    const isDark = document.documentElement.classList.toggle('dark');
    // setting SameSite property to satisfy relevant console warning. Use SameSite=None if site relies on cross-site requests
    document.cookie = `theme=${isDark ? 'dark' : 'light'}; SameSite=Lax; Path=/;`;
  }

  return (
    <button
      onClick={toggleTheme}
      className={`p-2 bg-gray-200 dark:bg-gray-800 rounded-full ${className}`}
      aria-label="Toggle theme"
    >
      <SunIcon size="24" className="text-gray-200 hidden dark:block" />
      <MoonIcon size="24" className="text-gray-800 block dark:hidden" />
    </button>
  )
}

Then all you need for everything to work is the change in layout.tsx. Because the icons are controlled with CSS, you don't need to use cookies wherever you choose to import the theme toggle. Done!

The only problem is, this is unable to detect the user theme preference. To do that while avoiding a Flash of Unstyled Content (FOUC) I'm pretty sure the only way is to inject a script in the header. Since this is getting information unavailable to the server and updating the html we will get a hydration warning, which we can suppress with "suppressHydrationWarning".

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const storedTheme = cookies().get("theme")?.value;

  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                if (${storedTheme === 'dark'} || (${!storedTheme} && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                  document.documentElement.classList.add('dark');
                }
              })();
            `,
          }}
        />
      </head>
      <body className={`${inter.className} bg-white dark:bg-gray-900`}>
        <ToggleThemeButton className="absolute top-6 right-6" />
        {children}
      </body>
    </html>
  );
}

If you want to use localStorage instead of cookies, as some comments have mentioned, it's easy to switch out the above with the following:

  const toggleTheme = () => {
    const isDark = document.documentElement.classList.toggle('dark');
-   document.cookie = `theme=${isDark ? 'dark' : 'light'}; SameSite=Lax; Path=/;`;
+   localStorage.setItem('theme', isDark ? 'dark' : 'light');
  };

-  const storedTheme = cookies().get("theme")?.value;

+  const theme = localStorage.getItem('theme');  // inside the script
+  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-  if (${storedTheme === 'dark'} || (${!storedTheme} && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

0 replies

App Directory dark mode with tailwindcss and SSR #47952

Dark mode in app dir with tailwindcss and SSR

Replies: 8 comments · 21 replies

artemavrin Jul 10, 2024 Author

Replies: 8 comments 21 replies

artemavrin Jul 10, 2024
Author