[core] Fix theming bugs

packages/toolpad-core/package.json

@@ -53,15 +53,15 @@
   "dependencies": {
     "@mui/base": "5.0.0-beta.40",
     "@mui/lab": "5.0.0-alpha.172",
-    "@mui/utils": "5.16.4",
+    "@mui/utils": "6.0.0-beta.1",
     "@toolpad/utils": "workspace:*",
     "client-only": "^0.0.1",
     "invariant": "2.2.4",
     "prop-types": "15.8.1"
   },
   "devDependencies": {
-    "@mui/icons-material": "v6.0.0-beta.2",
-    "@mui/material": "v6.0.0-beta.2",
+    "@mui/icons-material": "6.0.0-beta.2",
+    "@mui/material": "6.0.0-beta.2",
     "@types/invariant": "2.2.37",
     "@types/prop-types": "15.7.12",
     "@types/react": "18.3.3",

packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx

@@ -99,6 +99,10 @@ function CSSVarsThemeConsumer(props: CSSVarsThemeConsumerProps) {
   );
 }
 
+const COLOR_SCHEME_ATTRIBUTE = 'data-mui-color-scheme';
+const COLOR_SCHEME_STORAGE_KEY = 'mui-toolpad-color-scheme';
+const MODE_STORAGE_KEY = 'mui-toolpad-mode';
+
 interface CSSVarsThemeProviderProps {
   children: React.ReactNode;
   theme: NonNullable<CssVarsTheme>;
@@ -119,6 +123,9 @@ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) {
       defaultMode="system"
       documentNode={appWindow?.document}
       colorSchemeNode={appWindow?.document?.body}
+      attribute={COLOR_SCHEME_ATTRIBUTE}
+      colorSchemeStorageKey={COLOR_SCHEME_STORAGE_KEY}
+      modeStorageKey={MODE_STORAGE_KEY}
     >
       <CSSVarsThemeConsumer isDualTheme={isDualTheme}>{children}</CSSVarsThemeConsumer>
     </CssVarsProvider>
@@ -148,7 +155,11 @@ function AppThemeProvider(props: AppThemeProviderProps) {
 
   return isCSSVarsTheme ? (
     <React.Fragment>
-      <InitColorSchemeScript />
+      <InitColorSchemeScript
+        attribute={COLOR_SCHEME_ATTRIBUTE}
+        colorSchemeStorageKey={COLOR_SCHEME_STORAGE_KEY}
+        modeStorageKey={MODE_STORAGE_KEY}
+      />
       <CSSVarsThemeProvider theme={theme} window={appWindow}>
         {themeChildren}
       </CSSVarsThemeProvider>

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -40,7 +40,6 @@ import { ToolpadLogo } from './ToolpadLogo';
 const DRAWER_WIDTH = 320; // px
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
-  backgroundColor: (theme.vars ?? theme).palette.background.paper,
   borderWidth: 0,
   borderBottomWidth: 1,
   borderStyle: 'solid',
@@ -237,8 +236,7 @@ function DashboardSidebarSubNavigation({
               key={`divider-${depth}-${navigationItemIndex}`}
               sx={{
                 borderBottomWidth: 2,
-                ml: 2,
-                mr: 2,
+                mx: 2,
                 mt: 1,
                 mb: nextItem?.kind === 'header' ? 0 : 1,
               }}