Icon does not change to reflect theme setting

[kariemoorman]

When transitioning from light to dark mode the associated icon stays fixed as sun, instead of switching to moon icon (to reflect the current theme setting).

[Zebeqo]

https://github.com/shadcn/ui/pull/4

[kuldeepswnkumar]

Hello @kariemoorman. I would like to work on this.

[agmmnn]

This is my implementation in tauri-ui-boilerplate.

export function ThemeToggle() {
  const { setTheme, theme, systemTheme } = useTheme()
  const [currentTheme, setCurrentTheme] = useState("")

  useEffect(() => {
    setCurrentTheme(
      theme === "system"
        ? systemTheme === "light"
          ? "light"
          : "dark"
        : theme === "light"
        ? "light"
        : "dark"
    )
  }, [theme, systemTheme])

  const ThemeIcon = Icons[currentTheme === "light" ? "sun" : "moon"]

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sm">
          <ThemeIcon className="hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100" />
...

https://github.com/agmmnn/tauri-ui-boilerplate/blob/master/src/components/theme-toggle.tsx

[ahosny752]

I found a solution to this. Its due to hydration mismatch for. Refer to this doc https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch