import type { JSX, ReactNode } from 'react'; import React, { useState } from 'react'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import type { ColorScheme } from '@growi/core'; import { useIsomorphicLayoutEffect } from 'usehooks-ts'; import { NextThemesProvider, useNextThemes, } from '~/stores-universal/use-next-themes'; import loggerFactory from '~/utils/logger'; import styles from './RawLayout.module.scss'; const toastContainerClass = styles['grw-toast-container'] ?? ''; const logger = loggerFactory('growi:cli:RawLayout'); const ToastContainer = dynamic( () => import('react-toastify').then((mod) => mod.ToastContainer), { ssr: false }, ); type Props = { className?: string; children?: ReactNode; }; export const RawLayout = ({ children, className }: Props): JSX.Element => { const classNames: string[] = ['layout-root', 'growi']; if (className != null) { classNames.push(className); } // get color scheme from next-themes const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes(); const [colorScheme, setColorScheme] = useState( undefined, ); // set colorScheme in CSR useIsomorphicLayoutEffect(() => { setColorScheme(resolvedTheme ?? resolvedThemeByAttributes); }, [resolvedTheme, resolvedThemeByAttributes]); return ( <>

{children}

); };