chore: fix storybook switch theme hooks

.storybook/theme-decorator.tsx

@@ -1,7 +1,7 @@
 import React, { useLayoutEffect } from 'react'
 import { ThemeProvider } from 'styled-components'
-import { useDarkMode } from './use-dark-mode'
 import { light, dark } from '@charcoal-ui/theme'
+import { useDarkMode } from './use-dark-mode'
 import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'
 
 import '../packages/theme/src/unstable-css/_variables_dark.css'

.storybook/use-dark-mode.ts

@@ -1,34 +1,23 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { addons } from '@storybook/preview-api'
 
 const DARK_MODE_EVENT_NAME = 'DARK_MODE'
 
 // https://github.com/storybookjs/storybook/issues/28758
 export const useDarkMode = () => {
   const [isDark, setIsDark] = useState(
-    document.documentElement.classList.contains('dark')
+    addons.getChannel().last(DARK_MODE_EVENT_NAME).at(0) ?? false
   )
 
-  // document の class 属性の変化を監視してダークモード状態を更新
-  useEffect(() => {
-    const observer = new MutationObserver((mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (mutation.attributeName === 'class') {
-          setIsDark(document.documentElement.classList.contains('dark'))
-          break
-        }
-      }
-    })
-    observer.observe(document.documentElement, { attributes: true })
-    return () => observer.disconnect()
-  }, [])
-
-  // Storybook の DARK_MODE イベントを監視
   useEffect(() => {
     const chan = addons.getChannel()
-    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
+    const handler = (isDark: boolean) => {
+      setIsDark(isDark)
+    }
+
+    chan.on(DARK_MODE_EVENT_NAME, handler)
     return () => {
-      chan.off(DARK_MODE_EVENT_NAME, setIsDark)
+      chan.off(DARK_MODE_EVENT_NAME, handler)
     }
   }, [])