fix: apply light mode for Fence

docs/src/components/Fence.jsx

@@ -1,13 +1,17 @@
 import { Fragment } from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
+import { useTheme } from 'next-themes'
+import lightTheme from 'prism-react-renderer/themes/github'
+
 
 export function Fence({ children, language }) {
+  const { resolvedTheme } = useTheme()
   return (
     <Highlight
       {...defaultProps}
       code={children.trimEnd()}
       language={language}
-      theme={undefined}
+      theme={resolvedTheme !== 'dark' ? lightTheme: undefined }
     >
       {({ className, style, tokens, getTokenProps }) => (
         <pre className={className} style={style}>

docs/src/components/ThemeSelector.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import { Listbox } from '@headlessui/react'
 import clsx from 'clsx'
@@ -55,13 +55,22 @@ function SystemIcon(props) {
 
 export function ThemeSelector(props) {
   let { theme, setTheme } = useTheme()
-
+  const [mounted, setMounted] = useState(false)
   useEffect(() => {
     if (theme) {
       document.documentElement.setAttribute('data-theme', theme)
     }
   }, [theme])
 
+   // useEffect only runs on the client, so now we can safely show the UI
+   useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   return (
     <Listbox
       as="div"