Theme Flicker Problem - localStorage not available on server

[lindjacob]

Dear Developers,

I hope you can help me. I have been searching all over for a good solution to this problem without luck.

When I open my app, the default theme is applied for a second, before the localStorage becomes available and my saved theme is applied. Below is a video where I refresh my app to show it:

flicker.problem.mp4

I am looking for a good solution to avoid this or make the transition more smooth.

Given that we cannot know the user's theme choice on the server side before the initial fetch, where the window object becomes available, is there then another way to access the localStorage before loading the app and setting the theme correctly?

I am trying out DasiyUI for this project, where you set the theme by setting the 'data-theme' tag in the html element.

Below are the relevant code snippets from my app.

theme-context.tsx
`
'use client'

import { createContext, useContext, useState, useEffect } from 'react';

type ThemeContextProviderProps = {
children: React.ReactNode;
}

type Theme = 'cupcake' | 'dark' | null;

type ThemeContext = {
theme: Theme;
setTheme: React.Dispatch<React.SetStateAction>;
}

export const ThemeContext = createContext<ThemeContext | null>(null);

export default function ThemeContextProvider({ children }: ThemeContextProviderProps) {
const [theme, setTheme] = useState<Theme | null>(null);

useEffect(() => {
    if (!theme) {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            setTheme(savedTheme as Theme);
        } else {
            setTheme('cupcake');
        }
    } else {
        localStorage.setItem('theme', theme);
        document.documentElement.setAttribute('data-theme', theme);
    }
}, [theme]);

return (
    <ThemeContext.Provider
        value={{
            theme,
            setTheme
        }}>
            {children}
    </ThemeContext.Provider>
)

}

export function useThemeContext() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useThemeContext must be used within a ThemeContextProvider');
}
return context;
}
`

layout.tsx
`
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { SpeedInsights } from '@vercel/speed-insights/next';
import { Analytics } from '@vercel/analytics/react';
import { GoogleTagManager } from '@next/third-parties/google';
import ThemeContextProvider from '@/contexts/theme-context';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
title: 'Professionel Personlig Træning',
description: 'Vores trænere er de bedst kvalificerede i Danmark',
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (


<body className={${inter.className}}>

{children}






);
}
`

ThemeToggle.tsx
`
'use client';

import { useThemeContext } from '@/contexts/theme-context';

export default function ThemeToggle() {
const { theme, setTheme } = useThemeContext();

const toggleTheme = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTheme(theme === 'dark' ? 'cupcake' : 'dark');
}

return (
    <label className="flex cursor-pointer gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5" /><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" /></svg>
        <input type="checkbox" value="synthwave" className="toggle theme-controller" onChange={toggleTheme} checked={theme === 'dark'} />
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    </label>
)

}
`

[jwu-ice]

I don't know if this is your exact problem.
i solve that flickering problem with next-themes library.

but theme button ui is still flicking a split second..!

[lindjacob]

Thank you for your answer.

I actually found a logical solution that was right in front of my eyes.

All I needed to do, was to insert the following line above the return statement in my theme-context.tsx file:
if (!theme) return null;

This prevents the page's content from loading until the correct theme has been retrieved from the local storage on the client side.
Optionally you can add a fade in animation to make the loading transition more smooth.

[sayedragab27]

hey please i face same issue could please till me how to solve it @lindjacob

[bloodykheeng]

just use cookies

see my layout.tsx
so i get the default theme through a cookie i set on from client but it persists or syncs on server

import { ThemeProvider } from '@/util/ThemeProvider'


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  const getCookie = async () => {
    const cookieStore = await cookies()
    return cookieStore.get("theme")
  }

  const defaultTheme = getCookie();

  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link id="theme-link" rel="stylesheet" href="https://webproxy.poorya-velaei-d67.workers.dev/https://github.com/themes/lara-light-blue/theme.css" />


      </head>
      <body className={`bg-[#FCFCFC] dark:bg-black ${inter.className}`}>

        <NextJsProgressBar />

        <TanstackProvider>
       
            <ThemeProvider defaultTheme={defaultTheme}>
              <PrimeReactProvider>
                <PrimeReactThemeSync>
                  <ToastProvider>
                    <PrimeReactToastProvider>
                      <AuthProvider>
                        <FirebaseNotificationProvider>

                          {children}

                        </FirebaseNotificationProvider>
                      </AuthProvider>
                    </PrimeReactToastProvider>
                  </ToastProvider>
                </PrimeReactThemeSync>
              </PrimeReactProvider>
            </ThemeProvider>
 
        </TanstackProvider>

      </body>
    </html>
  );
}

there is my custom theme provider

"use client";

import { createContext, useState, useEffect, useContext } from "react";
import Cookies from "js-cookie";

type Theme = "light" | "dark";
type ThemeContextType = {
    theme: Theme;
    setTheme: (theme: Theme) => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children, defaultTheme }: { children: React.ReactNode, defaultTheme: any }) {

    const savedTheme = Cookies.get("theme") as Theme;
    const [theme, setTheme] = useState<Theme>(defaultTheme ?? savedTheme ?? "light");

    useEffect(() => {
        const html = document.documentElement;
        if (savedTheme) {
            setTheme(savedTheme);
        } else {
            Cookies.set("theme", theme, { expires: 365 }); // set initial default theme
        }

        if (savedTheme === "dark") {
            html.classList.add("dark");
            html.classList.remove("light");
            html.style.colorScheme = "dark";
            html.setAttribute("data-theme", 'dark'); // Set data-theme attribute
        } else {
            html.classList.add("light");
            html.classList.remove("dark");
            html.style.colorScheme = "light";
            html.setAttribute("data-theme", 'light'); // Set data-theme attribute
        }
    }, []);

    const handleSetTheme = (newTheme: Theme) => {
        setTheme(newTheme);
        Cookies.set("theme", newTheme, { expires: 365 }); // Store for a year

        const html = document.documentElement;

        if (newTheme === "dark") {
            html.classList.add("dark");
            html.classList.remove("light");
            html.style.colorScheme = "dark";
            html.setAttribute("data-theme", 'dark'); // Set data-theme attribute
        } else {
            html.classList.add("light");
            html.classList.remove("dark");
            html.style.colorScheme = "light";
            html.setAttribute("data-theme", 'light'); // Set data-theme attribute
        }
    };

    return (
        <ThemeContext.Provider value={{ theme, setTheme: handleSetTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

export function useTheme() {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme must be used within a ThemeProvider");
    }
    return context;
}

usage
how i use my theme
i stopped using next-themes it uses local storage so its not effective thats why i resorted to a custom hook

"use client";


import { Button } from "primereact/button";
import { PrimeIcons } from "primereact/api";

// import { useTheme } from "next-themes";
import { useTheme } from "@/util/ThemeProvider";


const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();


  return (
    <Button
      icon={theme === "dark" ? PrimeIcons.SUN : PrimeIcons.MOON}
      className="p-button-rounded p-button-text mt-1 mb-1  text-black dark:text-white"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="theme toggler"
    />
  );
};

export default ThemeToggler;