[react] refresh page in dark mode, giscus element with theme=dark property but the iframe element load light.css

[zhangwh754]

If refresh page when giscus-component in viewport, the theme will render correct.
but if refresh page when giscus-component out of viewport, the problem will occur.

current condition:

expext:

I notice previous Issue #1152 ,but after my try, this problem both occur when lazing and eager.

my code

'use client'

import { useEffect, useState } from 'react'
import Giscus from '@giscus/react'
import { shallow } from 'zustand/shallow'
import { useThemeStore } from 'stores/theme-store'

export default function SiteComments(props: { slug: string }) {
  const isDark = useThemeStore(state => state.isDark, shallow)

  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <Giscus
      id={props.slug}
      repo="zhangwh754/blog-comments"
      repoId="R_kgDOLBAVFw"
      category="Announcements"
      categoryId="DIC_kwDOLBAVF84CcNVV"
      mapping="title"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="1"
      inputPosition="top"
      theme={isDark ? 'dark' : 'light'}
      lang="zh-CN"
      loading="lazy"
    />
  )
}