From 1653b88e02b366d16d72749c13ca5a88fe75c5d5 Mon Sep 17 00:00:00 2001
From: Zhang ShengYan <yan.code@gmail.com>
Date: Sat, 23 Nov 2024 18:04:13 +0800
Subject: [PATCH] fix: apply light mode for Fence

---
 docs/src/components/Fence.jsx         |  6 +++++-
 docs/src/components/ThemeSelector.jsx | 13 +++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/Fence.jsx b/docs/src/components/Fence.jsx
index 03f43e6ff9..ffccf2515e 100644
--- a/docs/src/components/Fence.jsx
+++ b/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}>
diff --git a/docs/src/components/ThemeSelector.jsx b/docs/src/components/ThemeSelector.jsx
index 5ca03f3e03..33f3f30f32 100644
--- a/docs/src/components/ThemeSelector.jsx
+++ b/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"