use new useNextThemes

packages/app/package.json

@@ -180,6 +180,7 @@
     "universal-bunyan": "^0.9.2",
     "unzipper": "^0.10.5",
     "url-join": "^4.0.0",
+    "usehooks-ts": "^2.6.0",
     "validator": "^13.7.0",
     "ws": "^8.3.0",
     "xss": "^1.0.6"

packages/app/src/components/Layout/RawLayout.tsx

@@ -1,15 +1,20 @@
-import React, {
-  ReactNode, useCallback, useEffect, useState,
-} from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import Head from 'next/head';
 import Image from 'next/image';
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
 
 import { useGrowiTheme } from '~/stores/context';
-import { Themes, useNextThemes } from '~/stores/use-next-themes';
+import { ColorScheme, ResolvedThemes, useNextThemes } from '~/stores/use-next-themes';
+import loggerFactory from '~/utils/logger';
 
 import { getBackgroundImageSrc } from '../Theme/utils/ThemeImageProvider';
 import { ThemeProvider } from '../Theme/utils/ThemeProvider';
+import { isClient } from '@growi/core';
+
+
+const logger = loggerFactory('growi:cli:RawLayout');
+
 
 type Props = {
   title?: string,
@@ -26,18 +31,18 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
   const { data: growiTheme } = useGrowiTheme();
 
   // get color scheme from next-themes
-  const { resolvedTheme } = useNextThemes();
+  const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes();
 
-  const [colorScheme, setColorScheme] = useState<Themes|undefined>(undefined);
+  const [colorScheme, setColorScheme] = useState<ColorScheme|undefined>(undefined);
   const [backgroundImageSrc, setBackgroundImageSrc] = useState<string | undefined>(undefined);
 
   // set colorScheme in CSR
-  useEffect(() => {
-    setColorScheme(resolvedTheme as Themes);
+  useIsomorphicLayoutEffect(() => {
+    setColorScheme(resolvedTheme ?? resolvedThemeByAttributes);
   }, [resolvedTheme]);
 
   // set background image
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const imgSrc = getBackgroundImageSrc(growiTheme, colorScheme);
     setBackgroundImageSrc(imgSrc);
   }, [growiTheme, colorScheme]);
@@ -50,7 +55,7 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       <ThemeProvider theme={growiTheme}>
-        <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
+        <div id="wrapper" className={classNames.join(' ')} data-color-scheme={colorScheme}>
           {backgroundImageSrc != null && <div className="grw-bg-image-wrapper">
             <Image className='grw-bg-image' alt='background-image' src={backgroundImageSrc} layout='fill' quality="100" />
           </div>}

packages/app/src/components/Navbar/AppearanceModeDropdown.tsx

@@ -55,7 +55,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
   }, [resolvedTheme, setTheme]);
 
   const userPreferenceSwitchModifiedHandler = useCallback((isDarkMode: boolean) => {
-    setTheme(isDarkMode ? 'dark' : 'light');
+    setTheme(isDarkMode ? Themes.dark : Themes.light);
   }, [setTheme]);
 
   /* eslint-disable react/prop-types */

packages/app/src/pages/_app.page.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 
 import { appWithTranslation } from 'next-i18next';
-import { ThemeProvider } from 'next-themes';
 import { AppProps } from 'next/app';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -12,6 +11,8 @@ import '~/styles/style-next.scss';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
 
+import { NextThemesProvider } from '~/stores/use-next-themes';
+
 import { useI18nextHMR } from '../services/i18next-hmr';
 import {
   useAppTitle, useConfidential, useGrowiTheme, useGrowiVersion, useSiteUrl,
@@ -45,11 +46,11 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
   useGrowiVersion(commonPageProps.growiVersion);
 
   return (
-    <ThemeProvider>
+    <NextThemesProvider>
       <DndProvider backend={HTML5Backend}>
         <Component {...pageProps} />
       </DndProvider>
-    </ThemeProvider>
+    </NextThemesProvider>
   );
 }
 

yarn.lock

@@ -24011,6 +24011,11 @@ use@^3.1.0:
   dependencies:
     kind-of "^6.0.2"
 
+usehooks-ts@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.6.0.tgz#aebab367da2350a0bee1c3749bc6dd4bcce3eaae"
+  integrity sha512-Kj/4oc2nOxRDGTDb2v1ZulF7+tpeXFuqI6cUesM0Vic7TPPDlFORxKh4ivsYg+NTvX/YbM+lhqqkfFTiIt23eg==
+
 useragent@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972"