[DataGrid] Add default background color to grid

docs/data/data-grid/style/BackgroundColorsGrid.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import Stack from '@mui/material/Stack';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+
+const getTheme = (mode) =>
+  createTheme({
+    palette: {
+      mode,
+      DataGrid: {
+        bg: mode === 'light' ? '#f8fafc' : '#334155',
+        pinnedBg: mode === 'light' ? '#f1f5f9' : '#293548',
+        headerBg: mode === 'light' ? '#eaeff5' : '#1e293b',
+      },
+    },
+  });
+
+const columns = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+    editable: true,
+  },
+  {
+    field: 'fullName',
+    headerName: 'Full name',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 160,
+    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+export default function BackgroundColorsGrid() {
+  const [mode, setMode] = React.useState('light');
+  const theme = React.useMemo(() => getTheme(mode), [mode]);
+
+  return (
+    <Stack direction="column" gap={1} style={{ width: '100%', height: 400 }}>
+      <ToggleButtonGroup
+        size="small"
+        color="primary"
+        value={mode}
+        onChange={(event, value) => setMode(value === null ? mode : value)}
+        exclusive
+      >
+        <ToggleButton value="light" aria-label="Light mode" sx={{ gap: 1 }}>
+          <LightModeIcon fontSize="small" /> Light
+        </ToggleButton>
+        <ToggleButton value="dark" aria-label="Dark mode" sx={{ gap: 1 }}>
+          <DarkModeIcon fontSize="small" /> Dark
+        </ToggleButton>
+      </ToggleButtonGroup>
+
+      <ThemeProvider theme={theme}>
+        <DataGridPremium
+          rows={rows}
+          columns={columns}
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 5,
+              },
+            },
+            pinnedColumns: {
+              left: ['id'],
+            },
+          }}
+          pinnedRows={{
+            bottom: [rows[0]],
+          }}
+        />
+      </ThemeProvider>
+    </Stack>
+  );
+}

docs/data/data-grid/style/BackgroundColorsGrid.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { GridColDef } from '@mui/x-data-grid';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import Stack from '@mui/material/Stack';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+
+type PaletteMode = 'light' | 'dark';
+
+const getTheme = (mode: PaletteMode) =>
+  createTheme({
+    palette: {
+      mode,
+      DataGrid: {
+        bg: mode === 'light' ? '#f8fafc' : '#334155',
+        pinnedBg: mode === 'light' ? '#f1f5f9' : '#293548',
+        headerBg: mode === 'light' ? '#eaeff5' : '#1e293b',
+      },
+    },
+  });
+
+const columns: GridColDef<(typeof rows)[number]>[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+    editable: true,
+  },
+  {
+    field: 'fullName',
+    headerName: 'Full name',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 160,
+    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+export default function BackgroundColorsGrid() {
+  const [mode, setMode] = React.useState<PaletteMode>('light');
+  const theme = React.useMemo(() => getTheme(mode), [mode]);
+
+  return (
+    <Stack direction="column" gap={1} style={{ width: '100%', height: 400 }}>
+      <ToggleButtonGroup
+        size="small"
+        color="primary"
+        value={mode}
+        onChange={(event, value) => setMode(value === null ? mode : value)}
+        exclusive
+      >
+        <ToggleButton value="light" aria-label="Light mode" sx={{ gap: 1 }}>
+          <LightModeIcon fontSize="small" /> Light
+        </ToggleButton>
+        <ToggleButton value="dark" aria-label="Dark mode" sx={{ gap: 1 }}>
+          <DarkModeIcon fontSize="small" /> Dark
+        </ToggleButton>
+      </ToggleButtonGroup>
+
+      <ThemeProvider theme={theme}>
+        <DataGridPremium
+          rows={rows}
+          columns={columns}
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 5,
+              },
+            },
+            pinnedColumns: {
+              left: ['id'],
+            },
+          }}
+          pinnedRows={{
+            bottom: [rows[0]],
+          }}
+        />
+      </ThemeProvider>
+    </Stack>
+  );
+}

docs/data/data-grid/style/style.md

@@ -116,26 +116,68 @@
 
 {{"demo": "StripedGrid.js", "bg": "inline"}}
 
-## Theme header and pinned sections
+## Container, header, and pinned sections
 
-By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background of its header and pinned sections. These elements require a solid color to hide the scrollable content behind them. You can override that color with the following configuration:
+By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background color of the grid container, the column headers, and the pinned rows and columns.
+
+You can override these background colors with the following theme configuration:
 
 ```tsx
 import { createTheme } from '@mui/material/styles';
 import type {} from '@mui/x-data-grid/themeAugmentation';
 
 const theme = createTheme({
-  mixins: {
-    MuiDataGrid: {
-      // Pinned columns sections
-      pinnedBackground: '#340606',
-      // Headers, and top & bottom fixed rows
-      containerBackground: '#343434',
+  palette: {
+    DataGrid: {
+      // Container background
+      bg: '#f8fafc',
+      // Pinned rows and columns background
+      pinnedBg: '#f1f5f9',
+      // Column header background
+      headerBg: '#eaeff5',
     },
   },
 });
 ```
 
+### Light and dark mode in Material UI v6
+
+Material UI v6 users can use the `colorSchemes` property to specify different colors for light and dark mode:
+
+```tsx
+import { createTheme } from '@mui/material/styles';
+import type {} from '@mui/x-data-grid/themeAugmentation';
+
+const theme = createTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        DataGrid: {
+          bg: '#f8fafc',
+          pinnedBg: '#f1f5f9',
+          headerBg: '#eaeff5',
+        },
+      },
+    },
+    dark: {
+      palette: {
+        DataGrid: {
+          bg: '#334155',
+          pinnedBg: '#293548',
+          headerBg: '#1e293b',
+        },
+      },
+    },
+  },
+});
+```
+
+### Light and dark mode in Material UI v5
+
+Material UI v5 supports specifying different colors for light and dark mode with two different themes, as shown in the demo below.
+
+{{"demo": "BackgroundColorsGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Custom theme
 
 The following demo leverages the CSS customization API to match the Ant Design specification.

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

@@ -116,6 +116,30 @@ Below are described the steps you need to make to migrate from v7 to v8.
 
 ### CSS classes and styling
 
+- The Data Grid now has a default background color, and its customization has moved from `theme.mixins.MuiDataGrid` to `theme.palette.DataGrid` with the following properties:
+
+  - `bg`: Sets the background color of the entire grid (new property)
+  - `headerBg`: Sets the background color of the header (previously named `containerBackground`)
+  - `pinnedBg`: Sets the background color of pinned rows and columns (previously named `pinnedBackground`)
+
+  ```diff
+   const theme = createTheme({
+  -  mixins: {
+  -    MuiDataGrid: {
+  -      containerBackground: '#f8fafc',
+  -      pinnedBackground: '#f1f5f9',
+  -    },
+  -  },
+  +  palette: {
+  +    DataGrid: {
+  +      bg: '#f8fafc',
+  +      headerBg: '#e2e8f0',
+  +      pinnedBg: '#f1f5f9',
+  +    },
+  +  },
+   });
+  ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 
 <!-- ### Editing

packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx

@@ -7,7 +7,7 @@ import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 
 const Filler = styled('div')({
   flex: 1,
-  backgroundColor: 'var(--DataGrid-containerBackground)',
+  backgroundColor: 'var(--DataGrid-headerBackground)',
 });
 
 export interface GridColumnHeadersProps