apply theme to RawLayout

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

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import Head from 'next/head';
 
+import { ThemeProvider } from '~/pages/ThemeProvider';
+
 type Props = {
   title: string,
   className?: string,
@@ -22,9 +24,11 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
-      <div className={classNames.join(' ')}>
-        {children}
-      </div>
+      <ThemeProvider theme="">
+        <div className={classNames.join(' ')} data-light={true}>
+          {children}
+        </div>
+      </ThemeProvider>
     </>
   );
 };

packages/app/src/styles/theme/default.scss → packages/app/src/pages/ThemeDefault.module.scss

@@ -1,6 +1,6 @@
-@use '../variables' as *;
-@use '../bootstrap/variables' as *;
-@use './mixins/page-editor-mode-manager';
+@use '../styles/variables' as *;
+@use '../styles/bootstrap/variables' as *;
+@use '../styles/theme/mixins/page-editor-mode-manager';
 
 // == Define Bootstrap theme colors
 //
@@ -103,8 +103,8 @@
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  @import 'apply-colors';
-  @import 'apply-colors-light';
+  @import '../styles/theme/apply-colors';
+  @import '../styles/theme/apply-colors-light';
 
   // Button
   .btn-group.grw-page-editor-mode-manager {
@@ -200,8 +200,8 @@
   // admin theme box
   $color-theme-color-box: $primary;
 
-  @import 'apply-colors';
-  @import 'apply-colors-dark';
+  @import '../styles/theme/apply-colors';
+  @import '../styles/theme/apply-colors-dark';
 
   //Button
   .btn-group.grw-page-editor-mode-manager {

packages/app/src/pages/ThemeDefault.tsx

@@ -1,8 +1,9 @@
 
-import styles from './theme-default.module.scss';
 import { ThemeInjector } from './ThemeInjector';
 
+import styles from './ThemeDefault.module.scss';
+
 const ThemeDefault = ({ children }: { children: JSX.Element }): JSX.Element => {
-  return <ThemeInjector themeStyles={styles}>{children}</ThemeInjector>;
-}
+  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+};
 export default ThemeDefault;

packages/app/src/pages/ThemeInjector.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 type Props = {
   children: JSX.Element,
-  themeStyles: { readonly [key: string]: string },
+  className: string,
 }
 
-export const ThemeInjector = ({ themeStyles, children }: Props): JSX.Element => {
-  const className = `${children.props.className ?? ''} ${themeStyles['theme']}`;
+export const ThemeInjector = ({ children, className: themeClassName }: Props): JSX.Element => {
+  const className = `${children.props.className ?? ''} ${themeClassName}`;
   return React.cloneElement(children, { className });
-}
+};

packages/app/src/pages/ThemeProvider.tsx

@@ -1,7 +1,8 @@
 
-import dynamic from 'next/dynamic';
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+
 const ThemeDefault = dynamic(() => import('./ThemeDefault'));
 
 type Props = {
@@ -11,4 +12,4 @@ type Props = {
 
 export const ThemeProvider = ({ theme, children }: Props): JSX.Element => {
   return <ThemeDefault>{children}</ThemeDefault>;
-}
+};

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

@@ -14,7 +14,6 @@ import { useI18nextHMR } from '../services/i18next-hmr';
 import { useGrowiVersion } from '../stores/context';
 
 import { CommonProps } from './commons';
-import { ThemeProvider } from './ThemeProvider';
 // import { useInterceptorManager } from '~/stores/interceptor';
 
 const isDev = process.env.NODE_ENV === 'development';
@@ -36,11 +35,7 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <ThemeProvider theme="">
-        <div data-light="true">
-          <Component {...pageProps} />
-        </div>
-      </ThemeProvider>
+      <Component {...pageProps} />
     </DndProvider>
   );
 }