diff --git a/docs/data/data-grid/style/BackgroundColorsGrid.js b/docs/data/data-grid/style/BackgroundColorsGrid.js
new file mode 100644
index 0000000000000..721dce7ed3fb6
--- /dev/null
+++ b/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 (
+
+ setMode(value === null ? mode : value)}
+ exclusive
+ >
+
+ Light
+
+
+ Dark
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/style/BackgroundColorsGrid.tsx b/docs/data/data-grid/style/BackgroundColorsGrid.tsx
new file mode 100644
index 0000000000000..159259db998df
--- /dev/null
+++ b/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('light');
+ const theme = React.useMemo(() => getTheme(mode), [mode]);
+
+ return (
+
+ setMode(value === null ? mode : value)}
+ exclusive
+ >
+
+ Light
+
+
+ Dark
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md
index ef4f3f85cc781..28225ac6a5064 100644
--- a/docs/data/data-grid/style/style.md
+++ b/docs/data/data-grid/style/style.md
@@ -116,26 +116,68 @@ The following demo illustrates how this can be achieved.
{{"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.
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index fcaee580e9608..b099e21243ad3 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/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.