feat: upgrate to new theme (#2027)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/providers/ThemeProvider.tsx

@@ -1,17 +1,9 @@
 import type {
-  AffineNextCssVariables,
-  AffineNextLightColorScheme,
+  AffineCssVariables,
   AffineTheme,
   ThemeProviderProps,
 } from '@affine/component';
-import {
-  getDarkTheme,
-  getLightTheme,
-  globalThemeVariables,
-  nextDarkColorScheme,
-  nextLightColorScheme,
-  ThemeProvider as AffineThemeProvider,
-} from '@affine/component';
+import { AffineMuiThemeProvider, getTheme, muiThemes } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
 import kebabCase from 'kebab-case';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
@@ -21,17 +13,9 @@ import { memo, useEffect, useMemo, useState } from 'react';
 
 import { useCurrentMode } from '../hooks/current/use-current-mode';
 
-const ThemeInjector = memo<{
-  themeStyle: AffineTheme;
-  nextThemeStyle: AffineNextLightColorScheme;
-}>(function ThemeInjector({ themeStyle, nextThemeStyle }) {
-  const injectAffineNextTheme = useMemo(() => {
-    return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => {
-      variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] =
-        value;
-      return variables;
-    }, {} as AffineNextCssVariables);
-  }, [nextThemeStyle]);
+const CssVariablesInjector = memo<{
+  theme: AffineTheme;
+}>(function ThemeInjector({ theme }) {
   return (
     <GlobalStyles
       styles={{
@@ -39,13 +23,17 @@ const ThemeInjector = memo<{
         //   ...globalThemeVariables(themeStyle),
         // },
         ':root': {
-          ...globalThemeVariables(themeStyle),
-          ...injectAffineNextTheme,
+          ...Object.entries(theme).reduce((variables, [key, value]) => {
+            variables[
+              `--affine-${kebabCase(key)}` as keyof AffineCssVariables
+            ] = value;
+            return variables;
+          }, {} as AffineCssVariables),
         },
         html: {
-          fontFamily: themeStyle.font.family,
-          fontSize: themeStyle.font.base,
-          lineHeight: themeStyle.font.lineHeight,
+          fontFamily: theme.fontFamily,
+          fontSize: theme.fontBase,
+          lineHeight: theme.lineHeight,
         },
       }}
     />
@@ -56,29 +44,23 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
     const { resolvedTheme: theme } = useTheme();
     const editorMode = useCurrentMode();
-    const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
-    const darkThemeStyle = useMemo(
-      () => getDarkTheme(editorMode),
-      [editorMode]
-    );
     // SSR will always render the light theme, so we need to defer the theme if user selected dark mode
-    const [deferTheme, setDeferTheme] = useState('light');
+    const [deferTheme, setDeferTheme] = useState<'light' | 'dark'>('light');
+
+    const themeStyle = useMemo(
+      () => getTheme(deferTheme, editorMode),
+      [deferTheme, editorMode]
+    );
+
     useEffect(() => {
       window.apis?.onThemeChange(theme === 'dark' ? 'dark' : 'light');
       setDeferTheme(theme === 'dark' ? 'dark' : 'light');
     }, [theme]);
     return (
-      <AffineThemeProvider
-        theme={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
-      >
-        <ThemeInjector
-          themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
-          nextThemeStyle={
-            deferTheme === 'dark' ? nextDarkColorScheme : nextLightColorScheme
-          }
-        />
+      <AffineMuiThemeProvider theme={muiThemes}>
+        <CssVariablesInjector theme={themeStyle} />
         {children}
-      </AffineThemeProvider>
+      </AffineMuiThemeProvider>
     );
   }
 );