WIP: load theme styles dynamically

packages/app/src/pages/ThemeDefault.tsx

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

packages/app/src/pages/ThemeInjector.tsx

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

packages/app/src/pages/ThemeProvider.tsx

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

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

@@ -6,7 +6,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import '~/styles/style-next.scss';
-import '~/styles/theme/default.scss';
+// import '~/styles/theme/default.scss';
 // import InterceptorManager from '~/service/interceptor-manager';
 
 import * as nextI18nConfig from '../next-i18next.config';
@@ -14,6 +14,7 @@ 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';
@@ -35,7 +36,11 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <Component {...pageProps} />
+      <ThemeProvider theme="">
+        <div data-light="true">
+          <Component {...pageProps} />
+        </div>
+      </ThemeProvider>
     </DndProvider>
   );
 }

packages/app/src/styles/theme/default.scss

@@ -16,7 +16,7 @@
 
 //== Light Mode
 //
-html[light] {
+.theme[data-light='true'] :global {
   $primary: #122c55;
   $accent: #209fd8;
 
@@ -116,7 +116,7 @@ html[light] {
 
 //== Dark Mode
 //
-html[dark] {
+.theme[data-dark='true'] :global {
   $primary: #115cd3;
   $accent: #db00c2;