|
@@ -1,6 +1,5 @@
|
|
|
import React, { ReactNode, useState } from 'react';
|
|
import React, { ReactNode, useState } from 'react';
|
|
|
|
|
|
|
|
-import { isClient } from '@growi/core';
|
|
|
|
|
import Head from 'next/head';
|
|
import Head from 'next/head';
|
|
|
import { useIsomorphicLayoutEffect } from 'usehooks-ts';
|
|
import { useIsomorphicLayoutEffect } from 'usehooks-ts';
|
|
|
|
|
|
|
@@ -37,22 +36,15 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
|
|
|
setColorScheme(resolvedTheme ?? resolvedThemeByAttributes);
|
|
setColorScheme(resolvedTheme ?? resolvedThemeByAttributes);
|
|
|
}, [resolvedTheme]);
|
|
}, [resolvedTheme]);
|
|
|
|
|
|
|
|
- const scriptToRewriteDataColorScheme = isClient() ? `
|
|
|
|
|
- wrapper = document.getElementById('wrapper');
|
|
|
|
|
- wrapper.setAttribute('data-color-scheme', '${resolvedThemeByAttributes}');
|
|
|
|
|
- ` : '';
|
|
|
|
|
-
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
<Head>
|
|
<Head>
|
|
|
<title>{title}</title>
|
|
<title>{title}</title>
|
|
|
<meta charSet="utf-8" />
|
|
<meta charSet="utf-8" />
|
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
|
|
- {/* set data-color-scheme immediately after load */}
|
|
|
|
|
- <script>{scriptToRewriteDataColorScheme}</script>
|
|
|
|
|
</Head>
|
|
</Head>
|
|
|
<ThemeProvider theme={growiTheme} colorScheme={colorScheme}>
|
|
<ThemeProvider theme={growiTheme} colorScheme={colorScheme}>
|
|
|
- <div id="wrapper" className={classNames.join(' ')} data-color-scheme={colorScheme}>
|
|
|
|
|
|
|
+ <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
|
|
|
{children}
|
|
{children}
|
|
|
</div>
|
|
</div>
|
|
|
</ThemeProvider>
|
|
</ThemeProvider>
|
Yuki Takei