next-themes icon indicating copy to clipboard operation
next-themes copied to clipboard

[Bug]: Refreshing the page will reset it to light

Open Pszz opened this issue 8 months ago • 1 comments

What happened?

When I setTheme toggle, LocalStorage successfully becomes dark. But when I refresh the page, it is reset to light

image image

  • providers.tsx
<NextUIProvider>
    <ThemeProvider attribute="class">
      {children}
    </ThemeProvider>
</NextUIProvider>

  • component.tsx
'use client'
import { useTheme } from 'next-themes'
import { Switch } from '@nextui-org/react'
import React from 'react'

export function DarkMode() {
  const { setTheme, theme } = useTheme()
  return (
    <Switch
      size="sm"
      aria-label="Dark Mode"
      defaultSelected={theme === 'dark'}
      onValueChange={(isSelected) => {
        setTheme(isSelected ? 'dark' : 'light')
      }}
    />
  )
}

Version

"next-themes": "^0.3.0",

What browsers are you seeing the problem on?

Chrome

Pszz avatar Jun 12 '24 14:06 Pszz