recreate useResolvedTheme

apps/app/src/components/Layout/BasicLayout.tsx

@@ -5,8 +5,6 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { mutate } from 'swr';
 
-import { useNextThemes } from '~/stores/use-next-themes';
-
 import { Sidebar } from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
@@ -35,11 +33,6 @@ type Props = {
 }
 
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
-  const { resolvedTheme } = useNextThemes();
-
-  const data = { resolvedTheme };
-
-  mutate('resolvedTheme', data);
 
   return (
     <RawLayout className={className ?? ''}>

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

@@ -5,7 +5,7 @@ import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import { Lato } from 'next/font/google';
 import localFont from 'next/font/local';
-import { SWRConfig } from 'swr';
+import { SWRConfig, mutate } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
 
@@ -13,6 +13,7 @@ import { useI18nextHMR } from '~/services/i18next-hmr';
 import {
   useAppTitle, useConfidential, useGrowiVersion, useSiteUrl, useIsDefaultLogo, useForcedColorScheme,
 } from '~/stores/context';
+import { useNextThemes } from '~/stores/use-next-themes';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
 
 import { CommonProps } from './utils/commons';
@@ -54,6 +55,12 @@ type GrowiAppProps = AppProps & {
 registerTransformerForObjectId();
 
 function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
+  const { resolvedTheme } = useNextThemes();
+
+  console.log(resolvedTheme);
+
+  mutate('resolvedTheme', resolvedTheme);
+
   useI18nextHMR(isDev);
 
   useEffect(() => {

packages/editor/src/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -68,7 +68,6 @@ export const EmojiButton: FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const { data } = useResolvedTheme();
-  const { resolvedTheme } = data;
 
   console.dir(data);
 
@@ -140,7 +139,7 @@ export const EmojiButton: FC<Props> = (props) => {
             title={translation.title}
             emojiTooltip
             style={setStyle()}
-            theme={resolvedTheme}
+            // theme={resolvedTheme}
           />
         </Modal>
       </div>

packages/editor/src/stores/use-resolved-theme.ts

@@ -1,6 +1,25 @@
+import { ColorScheme } from '@growi/core';
 import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
+import { mutate } from 'swr';
 
-export const useResolvedTheme = (): SWRResponse => {
-  return useSWRStatic('resolvedTheme', undefined, { fallbackData: undefined });
+type ResolvedThemeStatus = {
+  themeData: ColorScheme,
+}
+
+type ResolvedThemeUtils = {
+  mutateResolvedTheme(resolvedTheme: ColorScheme): void
+}
+
+export const useResolvedTheme = (): SWRResponse<ResolvedThemeStatus, Error> & ResolvedThemeUtils => {
+  const swrResponse = useSWRStatic('resolvedTheme');
+
+  const mutateResolvedTheme = (resolvedTheme: ColorScheme) => {
+    mutate({ themeData: resolvedTheme });
+  };
+
+  return {
+    ...swrResponse,
+    mutateResolvedTheme,
+  };
 };