mismerge icon indicating copy to clipboard operation
mismerge copied to clipboard

[BUG][In React] The dark mode colors are lost after toggling visibility

Open baijunjie opened this issue 3 months ago • 0 comments

In React, when using a dark theme, if a component is hidden once and then shown again, the dark theme colors are lost and it reverts to the default colors.

Before hiding: Image Image

After showing again: Image Image

Here is my code:

import { MisMerge3, DefaultDarkColors, DefaultLightColors } from '@mismerge/react'
import { useTheme } from 'next-themes'

export function Merge ({
  isShow,
  localContent,
  remoteContent,
  baseContent,
}: MergeModalProps) {
  const { theme } = useTheme()
  const [ mergedContent, setMergedContent ] = useState(baseContent)

  useEffect(() => {
    setMergedContent(baseContent)
  }, [ baseContent ])

  if (!isShow) return null
  return (
    <MisMerge3
      lhs={localContent}
      ctr={mergedContent}
      rhs={remoteContent}
      onCtrChange={setMergedContent}
      colors={theme === 'dark' ? DefaultDarkColors : DefaultLightColors}
      wrapLines={true}
    />
  )
}

baijunjie avatar Oct 08 '25 01:10 baijunjie