fix: error initial style when first in dark mode (#1543)

apps/web/src/providers/ThemeProvider.tsx

@@ -38,7 +38,7 @@ const ThemeInjector = React.memo<{
 
 const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
-    const { theme } = useTheme();
+    const { resolvedTheme: theme } = useTheme();
     const [currentWorkspace] = useCurrentWorkspace();
     const currentPage = useCurrentPage();
     const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
@@ -71,9 +71,10 @@ const themes = ['dark', 'light'];
 
 export const ThemeProvider = ({
   children,
+  ...props
 }: PropsWithChildren<ThemeProviderProps>) => {
   return (
-    <NextThemeProvider themes={themes}>
+    <NextThemeProvider themes={themes} enableSystem={true} {...props}>
       <ThemeProviderInner>{children}</ThemeProviderInner>
     </NextThemeProvider>
   );

packages/component/src/ui/button/styles.ts

@@ -196,7 +196,7 @@ export const StyledButton = styled('button', {
         ? {
             cursor: 'not-allowed',
             pointerEvents: 'none',
-            color: theme.colors.borderColor,
+            color: theme.colors.disableColor,
           }
         : {}),
       transition: 'background .15s',

packages/component/src/ui/menu/styles.ts

@@ -39,7 +39,7 @@ export const StyledMenuItem = styled('button')<{
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
     backgroundColor: 'transparent',
-
+    color: theme.colors.textColor,
     ':hover': {
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,