setTheme not working #280

akshit-sharma · 2024-03-28T07:15:18Z

I am unable to set the theme using setTheme. Here's a link for minimal example.

Any pointer will be helpful.

My ThemeSwitch is a dropdown which logs the output to browser console:

// app/components/ThemeSwitch.tsx
"use client";
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'

const ThemeSwitch = () => {
  const [ mounted, setMounted ] = useState(false)
  const { theme, setTheme, resolvedTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null;

  const handleChange = (e : string) => {
    console.log(e);
    console.log('before ', theme, ' ', resolvedTheme);
    setTheme(e);
    console.log('after ', theme, ' ', resolvedTheme);
  }

  return (
    <select value={theme} onChange={e => handleChange(e.target.value)}>
      <option value="system">System</option>
      <option value="dark">Dark</option>
      <option value="light">Light</option>
    </select>
  )
}

export default ThemeSwitch

My app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="bg-white dark:bg-black min-h-dvh">
        <ThemeProvider attribute="data-theme" enableSystem defaultTheme="system"
          value={{ light: 'light', dark: 'dark' }} >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Output Image:

akshit-sharma · 2024-03-29T21:19:59Z

It seems to work now, thanks to this comment.

Putting Providers in a separate file and importing it works.

akshit-sharma closed this as completed Mar 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

setTheme not working #280

setTheme not working #280

akshit-sharma commented Mar 28, 2024 •

edited

Loading

akshit-sharma commented Mar 29, 2024

setTheme not working #280

setTheme not working #280

Comments

akshit-sharma commented Mar 28, 2024 • edited Loading

akshit-sharma commented Mar 29, 2024

akshit-sharma commented Mar 28, 2024 •

edited

Loading