fix: remove mui theme provider (#2055)

packages/component/src/components/affine-loading/index.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@mui/material';
+import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 
 import { InternalLottie } from '../internal-lottie';
@@ -16,8 +16,8 @@ export const AffineLoading: FC<AffineLoadingProps> = ({
   autoplay = false,
   autoReverse = false,
 }) => {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
   return (
     <InternalLottie
       key={isDark ? 'dark' : 'light'}

packages/component/src/components/workspace-card/styles.ts

@@ -48,7 +48,7 @@ export const StyledCard = styled('div')<{
     ...displayFlex('flex-start', 'flex-start'),
     marginBottom: '24px',
     transition: 'background .2s',
-    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: 'var(--affine-background-primary-color)',
     position: 'relative',
     ':hover': {
       background: 'var(--affine-hover-color)',

packages/component/src/theme/theme.css.ts

@@ -0,0 +1,32 @@
+import type { AffineCssVariables } from '@affine/component';
+import { globalStyle } from '@vanilla-extract/css';
+import kebabCase from 'kebab-case';
+
+import { darkTheme, lightTheme } from '../styles/theme';
+
+globalStyle('body', {
+  color: 'var(--affine-text-primary-color)',
+  fontFamily: 'var(--affine-font-family)',
+  fontSize: 'var(--affine-font-base)',
+  lineHeight: 'var(--affine-font-height)',
+});
+
+globalStyle('html', {
+  vars: {
+    ...Object.entries(lightTheme).reduce((variables, [key, value]) => {
+      variables[`--affine-${kebabCase(key)}` as keyof AffineCssVariables] =
+        value;
+      return variables;
+    }, {} as AffineCssVariables),
+  },
+});
+
+globalStyle('html[data-theme="dark"]', {
+  vars: {
+    ...Object.entries(darkTheme).reduce((variables, [key, value]) => {
+      variables[`--affine-${kebabCase(key)}` as keyof AffineCssVariables] =
+        value;
+      return variables;
+    }, {} as AffineCssVariables),
+  },
+});