fix: header theme

custom-implementation/src/components/header.css

@@ -1,5 +1,5 @@
 .custom-header {
-    background-color: white; 
+	z-index: 60;
 }
 
 .custom-header nav a {

custom-implementation/src/components/header.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import {
   ComponentConfigContext,
   HeaderV30 as SharedHeader,
@@ -11,10 +12,23 @@ const Header = ({
   logo,
   links,
   actions,
-  version,
   collapseOnScroll = true,
 }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 any) => {
+  const html = document.getElementsByTagName('html')[0]
+  const [theme, setTheme] = useState(html.getAttribute('class'))
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setTheme(html.getAttribute('class'))
+    })
+
+    const config = { attributes: true, attributeFilter: ['class'] }
+    observer.observe(html, config)
+    return () => {
+      observer.disconnect()
+    }
+  }, [html])
+
   return (
     <div>
       <ComponentConfigContext.Provider
@@ -25,7 +39,7 @@ any) => {
           logo={logo}
           items={links}
           actions={actions}
-          version={version}
+          version={theme === 'dark' ? 'light' : 'dark'}
           collapseOnScroll={collapseOnScroll}
           wrapperClassName="custom-header"
         />

custom-implementation/src/main.tsx

@@ -20,16 +20,20 @@ const render = async () => {
   const sidenav = document.querySelector('button.fern-search-bar')
     ?.parentElement as HTMLElement
 
+  const theme = document.getElementsByTagName('html')[0].getAttribute('class')
+
   if (!document.getElementById('theme-switch')) {
     const wrapper = document.createElement('div')
     wrapper.setAttribute('id', 'theme-switch')
     sidenav.appendChild(wrapper)
-
     ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
   }
 
   ReactDOM.render(
-    React.createElement(Header, { ...data.header }),
+    React.createElement(Header, {
+      ...data.header,
+      version: theme == 'dark' ? 'light' : 'dark',
+    }),
     document.getElementById('fern-header'),
     () => {
       // Once the header component is loaded, make it visible