Theme Flicker Problem - localStorage not available on server #64391

lindjacob · 2024-04-12T10:14:30Z

lindjacob
Apr 12, 2024

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>
)

}
`

Answered by lindjacob

Apr 18, 2024

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.

View full answer

jwu-ice · 2024-04-17T06:45:34Z

jwu-ice
Apr 17, 2024

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..!

1 reply

lindjacob Apr 18, 2024
Author

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.

Answer selected by lindjacob

bloodykheeng · 2025-02-24T17:24:13Z

bloodykheeng
Feb 24, 2025

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="/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;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme Flicker Problem - localStorage not available on server #64391

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Theme Flicker Problem - localStorage not available on server #64391

lindjacob Apr 12, 2024

Replies: 2 comments · 1 reply

jwu-ice Apr 17, 2024

lindjacob Apr 18, 2024 Author

bloodykheeng Feb 24, 2025

lindjacob
Apr 12, 2024

Replies: 2 comments 1 reply

jwu-ice
Apr 17, 2024

lindjacob Apr 18, 2024
Author

bloodykheeng
Feb 24, 2025