theme

Author: starlightknown

custom-implementation/src/components/header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import {
   ComponentConfigContext,
   HeaderV30 as SharedHeader,
@@ -16,10 +16,17 @@ const Header = ({
 }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 any) => {
   const html = document.getElementsByTagName('html')[0]
-  const [theme, setTheme] = useState(html.getAttribute('class'))
+  const [theme, setTheme] = useState(html.getAttribute('class') || 'light') // Default to 'light' if no class is present
+
+  const themeRef = useRef(theme)
+  themeRef.current = theme
+
   useEffect(() => {
     const observer = new MutationObserver(() => {
-      setTheme(html.getAttribute('class'))
+      const newTheme = html.getAttribute('class') || 'light'
+      if (themeRef.current !== newTheme) {
+        setTheme(newTheme)
+      }
     })
 
     const config = { attributes: true, attributeFilter: ['class'] }
@@ -39,7 +46,7 @@ any) => {
           logo={logo}
           items={links}
           actions={actions}
-          version={theme === 'dark' ? 'light' : 'dark'}
+          version={theme === 'dark' ? 'dark' : 'light'} // Ensure the theme is correctly reflected
           collapseOnScroll={collapseOnScroll}
           wrapperClassName="custom-header"
         />