useTheme() doesn't return active theme #234

chrtravels · 2023-11-13T09:24:51Z

I am using NextJS 14 with the app router. It doesn't work to toggle setTheme so I logged useTheme() and it's only returning and empty themes array and the setTheme function. That's it! The themes array should include: 'light', 'dark' & 'systemTheme.'

It should return six key/value repairs but it's returning two. theme, resolvedTheme, forcedTheme & systemTheme are all missing.

layout.tsx:

import Providers from '../../context/Providers';
import { Navbar } from '../../../kanban-scheduling-app-nextjs/components/navbar/Navbar';

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

export const metadata: Metadata = {
  title: 'Test',
  description: 'test',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className={inter.className}>
        <Providers>
          <Navbar />
          {children}
        </Providers>
      </body>
    </html>
  )
}

Providers.jsx:

'use client'

import { ThemeProvider } from 'next-themes'
import { useState, useEffect } from 'react';

const Providers = ({children}) => {
  const [mounted, setMounted] = useState(false)

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

  if (!mounted) {
    return <>{children}</>
  }

  return (
    <ThemeProvider enableSystem='true'>
      {children}
    </ThemeProvider>
  )
}


export default Providers;

Navbar.jsx (has the toggle):

'use client'

import { useTheme } from 'next-themes';

import { useEffect, useState } from 'react';
import Image from 'next/image';
import styles from './navbar.module.scss'


export const Navbar = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme} = useTheme();

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

  if (!mounted) {
    return null
  }

  console.log('theme: ', useTheme())

  return (
    <div className={styles.container}>
      <div className={styles.navbarActions}>
          {theme === 'dark' ? (
            <button onClick={() => setTheme('light')}>light</button>
          ) :
            (
              <button onClick={() => setTheme('dark')}>dark</button>
            )
          }
      </div>
    </div>
  )
}

The button always defaults to 'dark' because 'theme' from useTheme() isn't returned from the function call and consequently is 'undefined'.

The only way I can get the theme to change is if I manually go into dev tools and change data-theme to 'light'.

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

Semanual · 2024-04-24T21:19:58Z

For anyone wondering how to solve it: #216

chrtravels closed this as completed Nov 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useTheme() doesn't return active theme #234

useTheme() doesn't return active theme #234

chrtravels commented Nov 13, 2023 •

edited

Loading

Semanual commented Apr 24, 2024

useTheme() doesn't return active theme #234

useTheme() doesn't return active theme #234

Comments

chrtravels commented Nov 13, 2023 • edited Loading

Semanual commented Apr 24, 2024

chrtravels commented Nov 13, 2023 •

edited

Loading