Verso/services/web/frontend/js/shared/hooks/use-themed-page.tsx

import { useLayoutEffect } from 'react'
import { useActiveOverallTheme } from './use-active-overall-theme'
import { useUserSettingsContext } from '@/shared/context/user-settings-context'

export default function useThemedPage(featureFlag?: string) {
  const activeOverallTheme = useActiveOverallTheme(featureFlag)
  const {
    userSettings: { overallTheme },
  } = useUserSettingsContext()

  useLayoutEffect(() => {
    document.body.dataset.theme =
      activeOverallTheme === 'dark' ? 'default' : 'light'
    document.body.dataset.lumiere = overallTheme === 'lumiere-' ? 'true' : 'false'
  }, [activeOverallTheme, overallTheme])
}