setTheme does not update DOM (next 13) #238

Yihwan · 2023-11-26T16:51:17Z

Clicking "Dark Mode" does not activate dark mode, apparently because DOM is not updating.
theme from useTheme receives current theme as expected.
Manually updating DOM changes theme as expected.
Minimal repro: https://github.com/Yihwan/next-themes-minimal-repro

import type { Metadata } from 'next';
import localFont from 'next/font/local';

import { ThemeProvider } from '@/components/ThemeProvider';

// ...

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en' suppressHydrationWarning>
      <body
        className={cn(
          'bg-background font-sans antialiased',
          interFont.variable,
        )}
      >
        <LayoutHeader />

        <ThemeProvider
          attribute='class'
          defaultTheme='system'
          disableTransitionOnChange
        >
          <main className='p-4'>{children}</main>
        </ThemeProvider>
      </body>
    </html>
  );
}

// ThemeProvider
'use client';

import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { type ThemeProviderProps } from 'next-themes/dist/types';
import * as React from 'react';

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

// LayoutHeader 
'use client';

import { useTheme } from 'next-themes';
import * as React from 'react';

export default function LayoutHeader() {
  const { theme, setTheme } = useTheme();

  return (
    <header>
      <div>
        The current theme is: {theme}
        <button onClick={() => setTheme('light')}>Light Mode</button>
        <button onClick={() => setTheme('dark')}>Dark Mode</button>
      </div>
    </header>
  );
}

The text was updated successfully, but these errors were encountered:

Yihwan · 2023-11-26T17:13:52Z

just realized i didn't put the header in the provider 🤦

Yihwan closed this as completed Nov 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

setTheme does not update DOM (next 13) #238

setTheme does not update DOM (next 13) #238

Yihwan commented Nov 26, 2023 •

edited

Loading

Yihwan commented Nov 26, 2023

setTheme does not update DOM (next 13) #238

setTheme does not update DOM (next 13) #238

Comments

Yihwan commented Nov 26, 2023 • edited Loading

Yihwan commented Nov 26, 2023

Yihwan commented Nov 26, 2023 •

edited

Loading