dropdown style broken

[2u841r]

in dev:

but in prod, all ok

both in same browser. (i tried in 3 browsers, all same.)
windows 11.

    "daisyui": "^5.4.2",

i don't know how to reproduce. today its happen, 2another day 2+ weeks ago- i noticed same thing.

[saadeghi]

Can you share the code?

[2u841r]

layout.tsx

 <ThemeProvider>
          <div className="flex flex-col h-screen bg-base-100 text-base-content overflow-hidden">
            {children}
          </div>
          <Toaster />
</ThemeProvider>

ThemeProvider

"use client"

import type React from "react"

import { useEffect, useState } from "react"

export default function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<string>("dark")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    // Get theme from localStorage or default to dark
    const savedTheme = localStorage.getItem("theme") || "dark"
    setTheme(savedTheme)
    document.documentElement.setAttribute("data-theme", savedTheme)
  }, [])

  useEffect(() => {
    if (!mounted) return // Inject theme switcher into window for audio player access
    ;(window as any).currentTheme = theme
    ;(window as any).setTheme = (newTheme: string) => {
      setTheme(newTheme)
      localStorage.setItem("theme", newTheme)
      document.documentElement.setAttribute("data-theme", newTheme)
    }
  }, [theme, mounted])

  return <>{children}</>
}

theme-switcher.tsx

"use client"

import { useState, useEffect } from "react"
import { Palette } from "lucide-react"

const themes = [
  { name: "light", label: "Light" },
  { name: "dark", label: "Dark" },
  { name: "valentine", label: "Pink" },
  { name: "caramellatte", label: "Peach" },
  { name: "abyss", label: "Abyss" },
]

export default function ThemeSwitcher() {
  const [currentTheme, setCurrentTheme] = useState("dark")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    const saved = localStorage.getItem("theme") || "dark"
    setCurrentTheme(saved)
    document.documentElement.setAttribute("data-theme", saved)
  }, [])

  const handleThemeChange = (theme: string) => {
    setCurrentTheme(theme)
    localStorage.setItem("theme", theme)
    document.documentElement.setAttribute("data-theme", theme)
    
    // Track theme change event with Umami
    if (typeof window !== 'undefined' && (window as any).umami) {
      const themeLabel = themes.find(t => t.name === theme)?.label || theme
      ;(window as any).umami.track('Theme Changed', {
        theme: themeLabel,
        themeName: theme,
      })
    }
  }

  if (!mounted) return null

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <div className="flex items-center gap-1 sm:gap-2">
        {/* <Palette size={18} className="text-base-content" /> */}
        <select
          value={currentTheme}
          onChange={(e) => handleThemeChange(e.target.value)}
          className="select select-sm select-bordered bg-base-100 text-base-content"
        >
          {themes.map((theme) => (
            <option key={theme.name} value={theme.name}>
              {theme.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

[2u841r]

Can you share the code?

just checked- if i remove --turbopack from package.json

  "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
  }

the issue is fixed.

but thing is- even few hours ago, yesterday and most of the days- no issue even with --turbopack

[saadeghi]

just checked- if i remove --turbopack from package.json

  "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
  }

the issue is fixed.

I think you should report this in Turbopack repo.

Similar issue vercel/next.js#81763