diff --git a/docs/data/charts/styling/SxStyling.js b/docs/data/charts/styling/SxStyling.js
index 158f933f9ff0..976ff5e87ba2 100644
--- a/docs/data/charts/styling/SxStyling.js
+++ b/docs/data/charts/styling/SxStyling.js
@@ -30,10 +30,16 @@ export default function SxStyling() {
             fill: '#006BD6',
           },
         },
-        border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`,
-        backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`,
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        backgroundImage:
+          'linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
         backgroundSize: '35px 35px',
         backgroundPosition: '20px 20px, 20px 20px',
+        ...theme.applyStyles('dark', {
+          borderColor: 'rgba(255,255,255, 0.1)',
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255, 0.1) 1px, transparent 1px)',
+        }),
       })}
       xAxis={[{ scaleType: 'band', data: labels }]}
       series={[
diff --git a/docs/data/charts/styling/SxStyling.tsx b/docs/data/charts/styling/SxStyling.tsx
index 57758d5ab7b9..67eee1e60db8 100644
--- a/docs/data/charts/styling/SxStyling.tsx
+++ b/docs/data/charts/styling/SxStyling.tsx
@@ -30,11 +30,16 @@ export default function SxStyling(): React.JSX.Element {
             fill: '#006BD6',
           },
         },
-
-        border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`,
-        backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`,
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        backgroundImage:
+          'linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
         backgroundSize: '35px 35px',
         backgroundPosition: '20px 20px, 20px 20px',
+        ...theme.applyStyles('dark', {
+          borderColor: 'rgba(255,255,255, 0.1)',
+          backgroundImage:
+            'linear-gradient(rgba(255,255,255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255, 0.1) 1px, transparent 1px)',
+        }),
       })}
       xAxis={[{ scaleType: 'band', data: labels }]}
       series={[
diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
index dfa70d34ebe0..c629a45f3397 100644
--- a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
+++ b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
@@ -4,18 +4,20 @@ import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const lightBorderColor = lighten(alpha(theme.palette.divider, 1), 0.88);
+  const darkBorderColor = darken(alpha(theme.palette.divider, 1), 0.68);
 
   const selectedCellBorder = alpha(theme.palette.primary.main, 0.5);
 
   return {
     [`& .${gridClasses.cell}`]: {
       border: `1px solid transparent`,
-      borderRight: `1px solid ${borderColor}`,
-      borderBottom: `1px solid ${borderColor}`,
+      borderRight: `1px solid ${lightBorderColor}`,
+      borderBottom: `1px solid ${lightBorderColor}`,
+      ...theme.applyStyles('dark', {
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
+      }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {
       borderColor: alpha(theme.palette.primary.main, 0.1),
diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
index dfa70d34ebe0..c629a45f3397 100644
--- a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
+++ b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
@@ -4,18 +4,20 @@ import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const lightBorderColor = lighten(alpha(theme.palette.divider, 1), 0.88);
+  const darkBorderColor = darken(alpha(theme.palette.divider, 1), 0.68);
 
   const selectedCellBorder = alpha(theme.palette.primary.main, 0.5);
 
   return {
     [`& .${gridClasses.cell}`]: {
       border: `1px solid transparent`,
-      borderRight: `1px solid ${borderColor}`,
-      borderBottom: `1px solid ${borderColor}`,
+      borderRight: `1px solid ${lightBorderColor}`,
+      borderBottom: `1px solid ${lightBorderColor}`,
+      ...theme.applyStyles('dark', {
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
+      }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {
       borderColor: alpha(theme.palette.primary.main, 0.1),
diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js
index 3fc0fb9d27ed..07c9e2689d5f 100644
--- a/docs/data/data-grid/demo/FullFeaturedDemo.js
+++ b/docs/data/data-grid/demo/FullFeaturedDemo.js
@@ -15,9 +15,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 
 const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
-  border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  border: '1px solid #303030',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -33,24 +32,28 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+    color: 'rgba(255,255,255,0.85)',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -66,26 +69,31 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
     WebkitFontSmoothing: 'auto',
     letterSpacing: 'normal',
     '& .MuiDataGrid-columnsContainer': {
-      backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+      backgroundColor: '#1d1d1d',
+      ...theme.applyStyles('light', {
+        backgroundColor: '#fafafa',
+      }),
     },
     '& .MuiDataGrid-iconSeparator': {
       display: 'none',
     },
     '& .MuiDataGrid-colCell, .MuiDataGrid-cell': {
-      borderRight: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderRight: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderRightColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-      borderBottom: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderBottom: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderBottomColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-cell': {
-      color:
-        theme.palette.mode === 'light'
-          ? 'rgba(0,0,0,.85)'
-          : 'rgba(255,255,255,0.65)',
+      color: 'rgba(255,255,255,0.65)',
+      ...theme.applyStyles('light', {
+        color: 'rgba(0,0,0,.85)',
+      }),
     },
     '& .MuiPaginationItem-root': {
       borderRadius: 0,
@@ -94,10 +102,11 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid rgb(67, 67, 67)',
       borderRadius: 2,
+      ...theme.applyStyles('light', {
+        borderColor: '#d9d9d9',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -129,7 +138,14 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       top: '39%',
       border: 0,
     },
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
+  ...theme.applyStyles('light', {
+    borderColor: '#f0f0f0',
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 const StyledBox = styled('div')(({ theme }) => ({
diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx
index 2928393ef60e..2112942cab76 100644
--- a/docs/data/data-grid/demo/FullFeaturedDemo.tsx
+++ b/docs/data/data-grid/demo/FullFeaturedDemo.tsx
@@ -15,9 +15,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectProps } from '@mui/material/Select';
 
 const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
-  border: `1px solid ${theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'}`,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  border: '1px solid #303030',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -33,24 +32,28 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+    color: 'rgba(255,255,255,0.85)',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -66,26 +69,31 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
     WebkitFontSmoothing: 'auto',
     letterSpacing: 'normal',
     '& .MuiDataGrid-columnsContainer': {
-      backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+      backgroundColor: '#1d1d1d',
+      ...theme.applyStyles('light', {
+        backgroundColor: '#fafafa',
+      }),
     },
     '& .MuiDataGrid-iconSeparator': {
       display: 'none',
     },
     '& .MuiDataGrid-colCell, .MuiDataGrid-cell': {
-      borderRight: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderRight: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderRightColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-      borderBottom: `1px solid ${
-        theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-      }`,
+      borderBottom: '1px solid #303030',
+      ...theme.applyStyles('light', {
+        borderBottomColor: '#f0f0f0',
+      }),
     },
     '& .MuiDataGrid-cell': {
-      color:
-        theme.palette.mode === 'light'
-          ? 'rgba(0,0,0,.85)'
-          : 'rgba(255,255,255,0.65)',
+      color: 'rgba(255,255,255,0.65)',
+      ...theme.applyStyles('light', {
+        color: 'rgba(0,0,0,.85)',
+      }),
     },
     '& .MuiPaginationItem-root': {
       borderRadius: 0,
@@ -94,10 +102,11 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid rgb(67, 67, 67)',
       borderRadius: 2,
+      ...theme.applyStyles('light', {
+        borderColor: '#d9d9d9',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -129,7 +138,14 @@ const AntDesignStyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
       top: '39%',
       border: 0,
     },
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
+  ...theme.applyStyles('light', {
+    borderColor: '#f0f0f0',
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 const StyledBox = styled('div')(({ theme }) => ({
diff --git a/docs/data/data-grid/editing/IsCellEditableGrid.js b/docs/data/data-grid/editing/IsCellEditableGrid.js
index aebf4beab281..1bf016540987 100644
--- a/docs/data/data-grid/editing/IsCellEditableGrid.js
+++ b/docs/data/data-grid/editing/IsCellEditableGrid.js
@@ -10,14 +10,16 @@ import {
 export default function IsCellEditableGrid() {
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '& .MuiDataGrid-cell--editable': {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+          bgcolor: 'rgb(217 243 190)',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#376331',
+          }),
         },
-      }}
+      })}
     >
       <DataGrid
         rows={rows}
diff --git a/docs/data/data-grid/editing/IsCellEditableGrid.tsx b/docs/data/data-grid/editing/IsCellEditableGrid.tsx
index 9b716c9506b6..94c97eadcffd 100644
--- a/docs/data/data-grid/editing/IsCellEditableGrid.tsx
+++ b/docs/data/data-grid/editing/IsCellEditableGrid.tsx
@@ -10,14 +10,16 @@ import {
 export default function IsCellEditableGrid() {
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '& .MuiDataGrid-cell--editable': {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+          bgcolor: 'rgb(217 243 190)',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#376331',
+          }),
         },
-      }}
+      })}
     >
       <DataGrid
         rows={rows}
diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.js b/docs/data/data-grid/editing/ValidateServerNameGrid.js
index 050f0b161ceb..5ae631fb7138 100644
--- a/docs/data/data-grid/editing/ValidateServerNameGrid.js
+++ b/docs/data/data-grid/editing/ValidateServerNameGrid.js
@@ -7,14 +7,21 @@ const StyledBox = styled('div')(({ theme }) => ({
   height: 400,
   width: '100%',
   '& .MuiDataGrid-cell--editable': {
-    backgroundColor: theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+    backgroundColor: 'rgb(217 243 190)',
     '& .MuiInputBase-root': {
       height: '100%',
     },
+    ...theme.applyStyles('dark', {
+      backgroundColor: '#376331',
+    }),
   },
   '& .Mui-error': {
-    backgroundColor: `rgb(126,10,15, ${theme.palette.mode === 'dark' ? 0 : 0.1})`,
-    color: theme.palette.mode === 'dark' ? '#ff4343' : '#750f0f',
+    backgroundColor: 'rgb(126,10,15, 0.1)',
+    color: '#750f0f',
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'rgb(126,10,15, 0)',
+      color: '#ff4343',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.tsx b/docs/data/data-grid/editing/ValidateServerNameGrid.tsx
index 5b460c759370..035511267521 100644
--- a/docs/data/data-grid/editing/ValidateServerNameGrid.tsx
+++ b/docs/data/data-grid/editing/ValidateServerNameGrid.tsx
@@ -14,14 +14,21 @@ const StyledBox = styled('div')(({ theme }) => ({
   height: 400,
   width: '100%',
   '& .MuiDataGrid-cell--editable': {
-    backgroundColor: theme.palette.mode === 'dark' ? '#376331' : 'rgb(217 243 190)',
+    backgroundColor: 'rgb(217 243 190)',
     '& .MuiInputBase-root': {
       height: '100%',
     },
+    ...theme.applyStyles('dark', {
+      backgroundColor: '#376331',
+    }),
   },
   '& .Mui-error': {
-    backgroundColor: `rgb(126,10,15, ${theme.palette.mode === 'dark' ? 0 : 0.1})`,
-    color: theme.palette.mode === 'dark' ? '#ff4343' : '#750f0f',
+    backgroundColor: 'rgb(126,10,15, 0.1)',
+    color: '#750f0f',
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'rgb(126,10,15, 0)',
+      color: '#ff4343',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
index 59520ac9e415..294ebacdbea2 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
@@ -62,11 +62,20 @@ function CustomHeaderFilter(props) {
 
   return (
     <Stack
-      sx={{
-        outline: hasFocus ? 'solid #1976d2 1px' : '',
-        outlineOffset: hasFocus ? -2 : 0,
-        borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
-      }}
+      sx={[
+        {
+          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+        },
+        hasFocus
+          ? {
+              outline: 'solid #1976d2 1px',
+              outlineOffset: -2,
+            }
+          : {
+              outline: '',
+              outlineOffset: 0,
+            },
+      ]}
       tabIndex={tabIndex}
       ref={cellRef}
       data-field={colDef.field}
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
index 4a0eb124b62a..8603a2d4e52d 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
@@ -69,11 +69,20 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
 
   return (
     <Stack
-      sx={{
-        outline: hasFocus ? 'solid #1976d2 1px' : '',
-        outlineOffset: hasFocus ? -2 : 0,
-        borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
-      }}
+      sx={[
+        {
+          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+        },
+        hasFocus
+          ? {
+              outline: 'solid #1976d2 1px',
+              outlineOffset: -2,
+            }
+          : {
+              outline: '',
+              outlineOffset: 0,
+            },
+      ]}
       tabIndex={tabIndex}
       ref={cellRef}
       data-field={colDef.field}
diff --git a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js b/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js
index b52f36d8eb20..9b93efc6eaaf 100644
--- a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js
+++ b/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js
@@ -10,10 +10,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-rows-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-rows-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.tsx b/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.tsx
index b52f36d8eb20..9b93efc6eaaf 100644
--- a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.tsx
+++ b/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.tsx
@@ -10,10 +10,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-rows-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-rows-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js
index 0f9a8b1b1f64..77d28626f827 100644
--- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js
+++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js
@@ -59,13 +59,12 @@ function CustomDetailPanelToggle(props) {
       aria-label={isExpanded ? 'Close' : 'Open'}
     >
       <ExpandMoreIcon
-        sx={{
+        sx={(theme) => ({
           transform: `rotateZ(${isExpanded ? 180 : 0}deg)`,
-          transition: (theme) =>
-            theme.transitions.create('transform', {
-              duration: theme.transitions.duration.shortest,
-            }),
-        }}
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+          }),
+        })}
         fontSize="inherit"
       />
     </IconButton>
diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx
index 47a78a7af50a..aea595aa168d 100644
--- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx
+++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx
@@ -63,13 +63,12 @@ function CustomDetailPanelToggle(props: Pick<GridRenderCellParams, 'id' | 'value
       aria-label={isExpanded ? 'Close' : 'Open'}
     >
       <ExpandMoreIcon
-        sx={{
+        sx={(theme) => ({
           transform: `rotateZ(${isExpanded ? 180 : 0}deg)`,
-          transition: (theme) =>
-            theme.transitions.create('transform', {
-              duration: theme.transitions.duration.shortest,
-            }),
-        }}
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+          }),
+        })}
         fontSize="inherit"
       />
     </IconButton>
diff --git a/docs/data/data-grid/overlays/LoadingOverlayCustom.js b/docs/data/data-grid/overlays/LoadingOverlayCustom.js
index a936b4296f19..a2b1edbb06ca 100644
--- a/docs/data/data-grid/overlays/LoadingOverlayCustom.js
+++ b/docs/data/data-grid/overlays/LoadingOverlayCustom.js
@@ -12,10 +12,10 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   height: '100%',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? 'rgba(255, 255, 255, 0.9)'
-      : 'rgba(18, 18, 18, 0.9)',
+  backgroundColor: 'rgba(18, 18, 18, 0.9)',
+  ...theme.applyStyles('light', {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  }),
 }));
 
 function CircularProgressWithLabel(props) {
diff --git a/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx b/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx
index 59209a50e686..1b2249596147 100644
--- a/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx
+++ b/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx
@@ -14,10 +14,10 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   height: '100%',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? 'rgba(255, 255, 255, 0.9)'
-      : 'rgba(18, 18, 18, 0.9)',
+  backgroundColor: 'rgba(18, 18, 18, 0.9)',
+  ...theme.applyStyles('light', {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  }),
 }));
 
 function CircularProgressWithLabel(
diff --git a/docs/data/data-grid/overlays/NoResultsOverlayCustom.js b/docs/data/data-grid/overlays/NoResultsOverlayCustom.js
index 15320b97081c..dc89588011fd 100644
--- a/docs/data/data-grid/overlays/NoResultsOverlayCustom.js
+++ b/docs/data/data-grid/overlays/NoResultsOverlayCustom.js
@@ -11,10 +11,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-results-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-results-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/overlays/NoResultsOverlayCustom.tsx b/docs/data/data-grid/overlays/NoResultsOverlayCustom.tsx
index 15320b97081c..dc89588011fd 100644
--- a/docs/data/data-grid/overlays/NoResultsOverlayCustom.tsx
+++ b/docs/data/data-grid/overlays/NoResultsOverlayCustom.tsx
@@ -11,10 +11,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-results-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-results-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/overlays/NoRowsOverlayCustom.js b/docs/data/data-grid/overlays/NoRowsOverlayCustom.js
index bfe5090c0466..606ccc43562c 100644
--- a/docs/data/data-grid/overlays/NoRowsOverlayCustom.js
+++ b/docs/data/data-grid/overlays/NoRowsOverlayCustom.js
@@ -11,10 +11,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-rows-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-rows-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx b/docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx
index bfe5090c0466..606ccc43562c 100644
--- a/docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx
+++ b/docs/data/data-grid/overlays/NoRowsOverlayCustom.tsx
@@ -11,10 +11,16 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   justifyContent: 'center',
   height: '100%',
   '& .no-rows-primary': {
-    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
+    fill: '#3D4751',
+    ...theme.applyStyles('light', {
+      fill: '#AEB8C2',
+    }),
   },
   '& .no-rows-secondary': {
-    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
+    fill: '#1D2126',
+    ...theme.applyStyles('light', {
+      fill: '#E8EAED',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/performance/GridVisualization.js b/docs/data/data-grid/performance/GridVisualization.js
index 012448e2fd47..97862557cf5d 100644
--- a/docs/data/data-grid/performance/GridVisualization.js
+++ b/docs/data/data-grid/performance/GridVisualization.js
@@ -44,14 +44,13 @@ export default function GridVisualization() {
 
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '&&& .updated': {
-          transition: (theme) =>
-            theme.transitions.create(['background-color', 'outline'], {
-              duration: theme.transitions.duration.standard,
-            }),
+          transition: theme.transitions.create(['background-color', 'outline'], {
+            duration: theme.transitions.duration.standard,
+          }),
         },
         '&&& .updating': {
           backgroundColor: 'rgb(92 199 68 / 20%)',
@@ -59,7 +58,7 @@ export default function GridVisualization() {
           outlineOffset: '-1px',
           transition: 'none',
         },
-      }}
+      })}
     >
       <DataGridPro
         {...data}
diff --git a/docs/data/data-grid/performance/GridVisualization.tsx b/docs/data/data-grid/performance/GridVisualization.tsx
index f40abc5a5cc5..746dfc3dc4f0 100644
--- a/docs/data/data-grid/performance/GridVisualization.tsx
+++ b/docs/data/data-grid/performance/GridVisualization.tsx
@@ -44,14 +44,13 @@ export default function GridVisualization() {
 
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: 400,
         width: '100%',
         '&&& .updated': {
-          transition: (theme) =>
-            theme.transitions.create(['background-color', 'outline'], {
-              duration: theme.transitions.duration.standard,
-            }),
+          transition: theme.transitions.create(['background-color', 'outline'], {
+            duration: theme.transitions.duration.standard,
+          }),
         },
         '&&& .updating': {
           backgroundColor: 'rgb(92 199 68 / 20%)',
@@ -59,7 +58,7 @@ export default function GridVisualization() {
           outlineOffset: '-1px',
           transition: 'none',
         },
-      }}
+      })}
     >
       <DataGridPro
         {...data}
diff --git a/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.js b/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.js
index 38a6ed393f82..a182a88aff59 100644
--- a/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.js
+++ b/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.js
@@ -14,8 +14,11 @@ const StyledBox = styled('div')(({ theme }) => ({
     },
   },
   '& .Mui-error': {
-    backgroundColor: `rgb(126,10,15, ${theme.palette.mode === 'dark' ? 0 : 0.1})`,
+    backgroundColor: 'rgb(126,10,15, 0.1)',
     color: theme.palette.error.main,
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'rgb(126,10,15, 0)',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.tsx b/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.tsx
index 74d0ddf5b413..98f926555114 100644
--- a/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.tsx
+++ b/docs/data/data-grid/recipes-editing/ConditionalValidationGrid.tsx
@@ -14,8 +14,11 @@ const StyledBox = styled('div')(({ theme }) => ({
     },
   },
   '& .Mui-error': {
-    backgroundColor: `rgb(126,10,15, ${theme.palette.mode === 'dark' ? 0 : 0.1})`,
+    backgroundColor: 'rgb(126,10,15, 0.1)',
     color: theme.palette.error.main,
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'rgb(126,10,15, 0)',
+    }),
   },
 }));
 
diff --git a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js
index 2f344485f9e6..75fd9a5422ac 100644
--- a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js
+++ b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js
@@ -10,13 +10,6 @@ const pageSizeOptions = [5, 10, 50];
 const serverOptions = { useCursorPagination: false };
 const datasetOptions = {};
 
-function getBorderColor(theme) {
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
-
 const StyledDiv = styled('div')(({ theme: t }) => ({
   position: 'absolute',
   zIndex: 10,
@@ -28,8 +21,11 @@ const StyledDiv = styled('div')(({ theme: t }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '4px',
-  border: `1px solid ${getBorderColor(t)}`,
+  border: `1px solid ${lighten(alpha(t.palette.divider, 1), 0.88)}`,
   backgroundColor: t.palette.background.default,
+  ...t.applyStyles('dark', {
+    borderColor: darken(alpha(t.palette.divider, 1), 0.68),
+  }),
 }));
 
 function ErrorOverlay({ error }) {
diff --git a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx
index 85cc69fdb165..2ea04e50c57f 100644
--- a/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx
+++ b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.tsx
@@ -9,20 +9,13 @@ import {
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { alpha, styled, darken, lighten, Theme } from '@mui/material/styles';
+import { alpha, styled, darken, lighten } from '@mui/material/styles';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
 const serverOptions = { useCursorPagination: false };
 const datasetOptions = {};
 
-function getBorderColor(theme: Theme) {
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
-
 const StyledDiv = styled('div')(({ theme: t }) => ({
   position: 'absolute',
   zIndex: 10,
@@ -34,8 +27,11 @@ const StyledDiv = styled('div')(({ theme: t }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '4px',
-  border: `1px solid ${getBorderColor(t)}`,
+  border: `1px solid ${lighten(alpha(t.palette.divider, 1), 0.88)}`,
   backgroundColor: t.palette.background.default,
+  ...t.applyStyles('dark', {
+    borderColor: darken(alpha(t.palette.divider, 1), 0.68),
+  }),
 }));
 
 function ErrorOverlay({ error }: { error: string }) {
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
index faffe196653b..1066e54daf35 100644
--- a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
+++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
@@ -116,13 +116,6 @@ export default function ServerSideTreeDataErrorHandling() {
   );
 }
 
-function getBorderColor(theme) {
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
-
 const StyledDiv = styled('div')(({ theme: t }) => ({
   position: 'absolute',
   zIndex: 10,
@@ -134,8 +127,11 @@ const StyledDiv = styled('div')(({ theme: t }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '4px',
-  border: `1px solid ${getBorderColor(t)}`,
+  border: `1px solid ${lighten(alpha(t.palette.divider, 1), 0.88)}`,
   backgroundColor: t.palette.background.default,
+  ...t.applyStyles('dark', {
+    borderColor: darken(alpha(t.palette.divider, 1), 0.68),
+  }),
 }));
 
 function ErrorOverlay({ error }) {
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx
index d7e61934f194..c62baec1a6a7 100644
--- a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx
+++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.tsx
@@ -9,7 +9,7 @@ import Snackbar from '@mui/material/Snackbar';
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { alpha, styled, darken, lighten, Theme } from '@mui/material/styles';
+import { alpha, styled, darken, lighten } from '@mui/material/styles';
 import { useMockServer } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
@@ -121,13 +121,6 @@ export default function ServerSideTreeDataErrorHandling() {
   );
 }
 
-function getBorderColor(theme: Theme) {
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
-
 const StyledDiv = styled('div')(({ theme: t }) => ({
   position: 'absolute',
   zIndex: 10,
@@ -139,8 +132,11 @@ const StyledDiv = styled('div')(({ theme: t }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '4px',
-  border: `1px solid ${getBorderColor(t)}`,
+  border: `1px solid ${lighten(alpha(t.palette.divider, 1), 0.88)}`,
   backgroundColor: t.palette.background.default,
+  ...t.applyStyles('dark', {
+    borderColor: darken(alpha(t.palette.divider, 1), 0.68),
+  }),
 }));
 
 function ErrorOverlay({ error }: { error: string }) {
diff --git a/docs/data/data-grid/style/AntDesignGrid.js b/docs/data/data-grid/style/AntDesignGrid.js
index 37efb118bd28..7bb38f9533e2 100644
--- a/docs/data/data-grid/style/AntDesignGrid.js
+++ b/docs/data/data-grid/style/AntDesignGrid.js
@@ -17,10 +17,11 @@ function customCheckbox(theme) {
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid #d9d9d9',
       borderRadius: 2,
+      ...theme.applyStyles('dark', {
+        borderColor: 'rgb(67, 67, 67)',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -57,8 +58,7 @@ function customCheckbox(theme) {
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   border: 0,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -74,29 +74,39 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.65)',
+    color: 'rgba(255,255,255,0.65)',
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
   '& .MuiPaginationItem-root': {
     borderRadius: 0,
   },
   ...customCheckbox(theme),
+  ...theme.applyStyles('light', {
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 function CustomPagination() {
diff --git a/docs/data/data-grid/style/AntDesignGrid.tsx b/docs/data/data-grid/style/AntDesignGrid.tsx
index d4f18367c18b..257018a2471d 100644
--- a/docs/data/data-grid/style/AntDesignGrid.tsx
+++ b/docs/data/data-grid/style/AntDesignGrid.tsx
@@ -17,10 +17,11 @@ function customCheckbox(theme: Theme) {
       width: 16,
       height: 16,
       backgroundColor: 'transparent',
-      border: `1px solid ${
-        theme.palette.mode === 'light' ? '#d9d9d9' : 'rgb(67, 67, 67)'
-      }`,
+      border: '1px solid #d9d9d9',
       borderRadius: 2,
+      ...theme.applyStyles('dark', {
+        borderColor: 'rgb(67, 67, 67)',
+      }),
     },
     '& .MuiCheckbox-root svg path': {
       display: 'none',
@@ -57,8 +58,7 @@ function customCheckbox(theme: Theme) {
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   border: 0,
-  color:
-    theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  color: 'rgba(255,255,255,0.85)',
   fontFamily: [
     '-apple-system',
     'BlinkMacSystemFont',
@@ -74,29 +74,39 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   WebkitFontSmoothing: 'auto',
   letterSpacing: 'normal',
   '& .MuiDataGrid-columnsContainer': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : '#1d1d1d',
+    backgroundColor: '#1d1d1d',
+    ...theme.applyStyles('light', {
+      backgroundColor: '#fafafa',
+    }),
   },
   '& .MuiDataGrid-iconSeparator': {
     display: 'none',
   },
   '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
-    borderRight: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderRight: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderRightColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#f0f0f0' : '#303030'
-    }`,
+    borderBottom: '1px solid #303030',
+    ...theme.applyStyles('light', {
+      borderBottomColor: '#f0f0f0',
+    }),
   },
   '& .MuiDataGrid-cell': {
-    color:
-      theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.65)',
+    color: 'rgba(255,255,255,0.65)',
+    ...theme.applyStyles('light', {
+      color: 'rgba(0,0,0,.85)',
+    }),
   },
   '& .MuiPaginationItem-root': {
     borderRadius: 0,
   },
   ...customCheckbox(theme),
+  ...theme.applyStyles('light', {
+    color: 'rgba(0,0,0,.85)',
+  }),
 }));
 
 function CustomPagination() {
diff --git a/docs/data/data-grid/style/StylingRowsGrid.js b/docs/data/data-grid/style/StylingRowsGrid.js
index 56606a53676f..6aee2cc5a979 100644
--- a/docs/data/data-grid/style/StylingRowsGrid.js
+++ b/docs/data/data-grid/style/StylingRowsGrid.js
@@ -4,109 +4,59 @@ import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import { darken, lighten, styled } from '@mui/material/styles';
 
-const getBackgroundColor = (color, mode) =>
-  mode === 'dark' ? darken(color, 0.7) : lighten(color, 0.7);
-
-const getHoverBackgroundColor = (color, mode) =>
-  mode === 'dark' ? darken(color, 0.6) : lighten(color, 0.6);
-
-const getSelectedBackgroundColor = (color, mode) =>
-  mode === 'dark' ? darken(color, 0.5) : lighten(color, 0.5);
-
-const getSelectedHoverBackgroundColor = (color, mode) =>
-  mode === 'dark' ? darken(color, 0.4) : lighten(color, 0.4);
+const getBackgroundColor = (color, theme, coefficient) => ({
+  backgroundColor: darken(color, coefficient),
+  ...theme.applyStyles('light', {
+    backgroundColor: lighten(color, coefficient),
+  }),
+});
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   '& .super-app-theme--Open': {
-    backgroundColor: getBackgroundColor(theme.palette.info.main, theme.palette.mode),
+    ...getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.info.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.success.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.success.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.warning.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.warning.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.error.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.error.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.error.main, theme, 0.4),
       },
     },
   },
diff --git a/docs/data/data-grid/style/StylingRowsGrid.tsx b/docs/data/data-grid/style/StylingRowsGrid.tsx
index 4d88308d90bc..de1d8b44e7fd 100644
--- a/docs/data/data-grid/style/StylingRowsGrid.tsx
+++ b/docs/data/data-grid/style/StylingRowsGrid.tsx
@@ -2,111 +2,61 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { darken, lighten, styled } from '@mui/material/styles';
+import { darken, lighten, styled, Theme } from '@mui/material/styles';
 
-const getBackgroundColor = (color: string, mode: string) =>
-  mode === 'dark' ? darken(color, 0.7) : lighten(color, 0.7);
-
-const getHoverBackgroundColor = (color: string, mode: string) =>
-  mode === 'dark' ? darken(color, 0.6) : lighten(color, 0.6);
-
-const getSelectedBackgroundColor = (color: string, mode: string) =>
-  mode === 'dark' ? darken(color, 0.5) : lighten(color, 0.5);
-
-const getSelectedHoverBackgroundColor = (color: string, mode: string) =>
-  mode === 'dark' ? darken(color, 0.4) : lighten(color, 0.4);
+const getBackgroundColor = (color: string, theme: Theme, coefficient: number) => ({
+  backgroundColor: darken(color, coefficient),
+  ...theme.applyStyles('light', {
+    backgroundColor: lighten(color, coefficient),
+  }),
+});
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   '& .super-app-theme--Open': {
-    backgroundColor: getBackgroundColor(theme.palette.info.main, theme.palette.mode),
+    ...getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.info.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.success.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.success.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.warning.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.warning.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.error.main,
-      theme.palette.mode,
-    ),
+    ...getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.error.main,
-          theme.palette.mode,
-        ),
+        ...getBackgroundColor(theme.palette.error.main, theme, 0.4),
       },
     },
   },
diff --git a/docs/data/date-pickers/base-concepts/CustomSlots.js b/docs/data/date-pickers/base-concepts/CustomSlots.js
index 5a6d1197147a..46b7619f3fd3 100644
--- a/docs/data/date-pickers/base-concepts/CustomSlots.js
+++ b/docs/data/date-pickers/base-concepts/CustomSlots.js
@@ -13,10 +13,10 @@ const StyledButton = styled(IconButton)(({ theme }) => ({
 }));
 const StyledDay = styled(PickersDay)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.secondary.dark
-      : theme.palette.secondary.light,
+  color: theme.palette.secondary.light,
+  ...theme.applyStyles('light', {
+    color: theme.palette.secondary.dark,
+  }),
 }));
 
 export default function CustomSlots() {
diff --git a/docs/data/date-pickers/base-concepts/CustomSlots.tsx b/docs/data/date-pickers/base-concepts/CustomSlots.tsx
index 5a6d1197147a..46b7619f3fd3 100644
--- a/docs/data/date-pickers/base-concepts/CustomSlots.tsx
+++ b/docs/data/date-pickers/base-concepts/CustomSlots.tsx
@@ -13,10 +13,10 @@ const StyledButton = styled(IconButton)(({ theme }) => ({
 }));
 const StyledDay = styled(PickersDay)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.secondary.dark
-      : theme.palette.secondary.light,
+  color: theme.palette.secondary.light,
+  ...theme.applyStyles('light', {
+    color: theme.palette.secondary.dark,
+  }),
 }));
 
 export default function CustomSlots() {
diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js
index 905c7f807657..881a6630a012 100644
--- a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js
+++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js
@@ -29,7 +29,15 @@ function CustomCalendarHeader(props) {
     <CustomCalendarHeaderRoot>
       <IconButton
         onClick={selectPreviousMonth}
-        sx={{ visibility: monthIndex === 0 ? undefined : 'hidden' }}
+        sx={[
+          monthIndex === 0
+            ? {
+                visibility: null,
+              }
+            : {
+                visibility: 'hidden',
+              },
+        ]}
         title={`Previous ${calendars} month${calendars === 1 ? '' : 's'}`}
       >
         <ChevronLeft />
@@ -37,7 +45,15 @@ function CustomCalendarHeader(props) {
       <Typography>{month.format('MMMM YYYY')}</Typography>
       <IconButton
         onClick={selectNextMonth}
-        sx={{ visibility: monthIndex === calendars - 1 ? undefined : 'hidden' }}
+        sx={[
+          monthIndex === calendars - 1
+            ? {
+                visibility: null,
+              }
+            : {
+                visibility: 'hidden',
+              },
+        ]}
         title={`Next ${calendars} month${calendars === 1 ? '' : 's'}`}
       >
         <ChevronRight />
diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx
index a7cda0e96c95..e150031d943e 100644
--- a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx
+++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx
@@ -30,7 +30,15 @@ function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps<Dayjs>) {
     <CustomCalendarHeaderRoot>
       <IconButton
         onClick={selectPreviousMonth}
-        sx={{ visibility: monthIndex === 0 ? undefined : 'hidden' }}
+        sx={[
+          monthIndex === 0
+            ? {
+                visibility: null,
+              }
+            : {
+                visibility: 'hidden',
+              },
+        ]}
         title={`Previous ${calendars} month${calendars === 1 ? '' : 's'}`}
       >
         <ChevronLeft />
@@ -38,7 +46,15 @@ function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps<Dayjs>) {
       <Typography>{month.format('MMMM YYYY')}</Typography>
       <IconButton
         onClick={selectNextMonth}
-        sx={{ visibility: monthIndex === calendars - 1 ? undefined : 'hidden' }}
+        sx={[
+          monthIndex === calendars - 1
+            ? {
+                visibility: null,
+              }
+            : {
+                visibility: 'hidden',
+              },
+        ]}
         title={`Next ${calendars} month${calendars === 1 ? '' : 's'}`}
       >
         <ChevronRight />
diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.js b/docs/data/date-pickers/custom-field/BrowserV6Field.js
index f3a8f6cc98d1..bb3952a732ce 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6Field.js
+++ b/docs/data/date-pickers/custom-field/BrowserV6Field.js
@@ -29,7 +29,13 @@ const BrowserField = React.forwardRef((props, ref) => {
 
   return (
     <Box
-      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center' }}
+      sx={[
+        {
+          display: 'flex',
+          alignItems: 'center',
+        },
+        sx || {},
+      ]}
       id={id}
       ref={handleRef}
     >
diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx
index b7b4237ad880..45fa7acdec43 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx
+++ b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx
@@ -59,7 +59,13 @@ const BrowserField = React.forwardRef(
 
     return (
       <Box
-        sx={{ ...(sx || {}), display: 'flex', alignItems: 'center' }}
+        sx={[
+          {
+            display: 'flex',
+            alignItems: 'center',
+          },
+          sx || {},
+        ]}
         id={id}
         ref={handleRef}
       >
diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js
index 61c9dd0857d1..5421fd0d4348 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js
+++ b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js
@@ -30,7 +30,14 @@ const BrowserField = React.forwardRef((props, ref) => {
 
   return (
     <Box
-      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center', flexGrow: 1 }}
+      sx={[
+        {
+          display: 'flex',
+          alignItems: 'center',
+          flexGrow: 1,
+        },
+        sx || {},
+      ]}
       id={id}
       ref={handleRef}
     >
diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx
index 0c993265f441..b52029d14cde 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx
+++ b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx
@@ -63,7 +63,14 @@ const BrowserField = React.forwardRef(
 
     return (
       <Box
-        sx={{ ...(sx || {}), display: 'flex', alignItems: 'center', flexGrow: 1 }}
+        sx={[
+          {
+            display: 'flex',
+            alignItems: 'center',
+            flexGrow: 1,
+          },
+          sx || {},
+        ]}
         id={id}
         ref={handleRef}
       >
diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js
index dc34821c612c..4815d50972ac 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js
+++ b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js
@@ -33,7 +33,13 @@ const BrowserField = React.forwardRef((props, ref) => {
 
   return (
     <Box
-      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center' }}
+      sx={[
+        {
+          display: 'flex',
+          alignItems: 'center',
+        },
+        sx || {},
+      ]}
       id={id}
       ref={handleRef}
     >
diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx
index 29d27a1c63d7..15c4e41160ae 100644
--- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx
+++ b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx
@@ -69,7 +69,13 @@ const BrowserField = React.forwardRef(
 
     return (
       <Box
-        sx={{ ...(sx || {}), display: 'flex', alignItems: 'center' }}
+        sx={[
+          {
+            display: 'flex',
+            alignItems: 'center',
+          },
+          sx || {},
+        ]}
         id={id}
         ref={handleRef}
       >
diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.js b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.js
index 45751705f59d..67ba149ec674 100644
--- a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.js
+++ b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.js
@@ -13,7 +13,18 @@ function CustomInputAdornment(props) {
     <InputAdornment {...other}>
       <PriorityHighIcon
         color="error"
-        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+        sx={[
+          {
+            marginLeft: 1,
+          },
+          hasError
+            ? {
+                opacity: 1,
+              }
+            : {
+                opacity: 0,
+              },
+        ]}
       />
       {children}
     </InputAdornment>
diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.tsx b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.tsx
index 9fda0784aff8..c55a05726acc 100644
--- a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.tsx
+++ b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalid.tsx
@@ -14,7 +14,18 @@ function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean
     <InputAdornment {...other}>
       <PriorityHighIcon
         color="error"
-        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+        sx={[
+          {
+            marginLeft: 1,
+          },
+          hasError
+            ? {
+                opacity: 1,
+              }
+            : {
+                opacity: 0,
+              },
+        ]}
       />
       {children}
     </InputAdornment>
diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js
index e6b3ea511373..8012efda6585 100644
--- a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js
+++ b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js
@@ -11,7 +11,18 @@ function CustomInputAdornment(props) {
   const { hasError, children, sx, ...other } = props;
   return (
     <InputAdornment {...other}>
-      <PriorityHighIcon color="error" sx={{ opacity: hasError ? 1 : 0 }} />
+      <PriorityHighIcon
+        color="error"
+        sx={[
+          hasError
+            ? {
+                opacity: 1,
+              }
+            : {
+                opacity: 0,
+              },
+        ]}
+      />
       {children}
     </InputAdornment>
   );
diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx
index 5e49622b3c02..28bf9e2a238e 100644
--- a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx
+++ b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx
@@ -12,7 +12,18 @@ function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean
   const { hasError, children, sx, ...other } = props;
   return (
     <InputAdornment {...other}>
-      <PriorityHighIcon color="error" sx={{ opacity: hasError ? 1 : 0 }} />
+      <PriorityHighIcon
+        color="error"
+        sx={[
+          hasError
+            ? {
+                opacity: 1,
+              }
+            : {
+                opacity: 0,
+              },
+        ]}
+      />
       {children}
     </InputAdornment>
   );
diff --git a/docs/data/date-pickers/date-calendar/WeekPicker.js b/docs/data/date-pickers/date-calendar/WeekPicker.js
index 2154ea4918cc..02efb22ffc51 100644
--- a/docs/data/date-pickers/date-calendar/WeekPicker.js
+++ b/docs/data/date-pickers/date-calendar/WeekPicker.js
@@ -21,10 +21,16 @@ const CustomPickersDay = styled(PickersDay, {
     },
   }),
   ...(isHovered && {
-    backgroundColor: theme.palette.primary[theme.palette.mode],
+    backgroundColor: theme.palette.primary.light,
     '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary[theme.palette.mode],
+      backgroundColor: theme.palette.primary.light,
     },
+    ...theme.applyStyles('dark', {
+      backgroundColor: theme.palette.primary.dark,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    }),
   }),
   ...(day.day() === 0 && {
     borderTopLeftRadius: '50%',
diff --git a/docs/data/date-pickers/date-calendar/WeekPicker.tsx b/docs/data/date-pickers/date-calendar/WeekPicker.tsx
index 88f7fb03e3f6..7e46c36ba876 100644
--- a/docs/data/date-pickers/date-calendar/WeekPicker.tsx
+++ b/docs/data/date-pickers/date-calendar/WeekPicker.tsx
@@ -26,10 +26,16 @@ const CustomPickersDay = styled(PickersDay, {
     },
   }),
   ...(isHovered && {
-    backgroundColor: theme.palette.primary[theme.palette.mode],
+    backgroundColor: theme.palette.primary.light,
     '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary[theme.palette.mode],
+      backgroundColor: theme.palette.primary.light,
     },
+    ...theme.applyStyles('dark', {
+      backgroundColor: theme.palette.primary.dark,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    }),
   }),
   ...(day.day() === 0 && {
     borderTopLeftRadius: '50%',
diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
index 2bc8af2bb52c..6f1dbf791830 100644
--- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
+++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
@@ -7,34 +7,36 @@ import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
 import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
 import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 
-const DateRangePickerDay = styled(MuiDateRangePickerDay)(
-  ({
-    theme,
-    isHighlighting,
-    isStartOfHighlighting,
-    isEndOfHighlighting,
-    outsideCurrentMonth,
-  }) => ({
-    ...(!outsideCurrentMonth &&
-      isHighlighting && {
+const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
+  variants: [
+    {
+      props: ({ isHighlighting, outsideCurrentMonth }) =>
+        !outsideCurrentMonth && isHighlighting,
+      style: {
         borderRadius: 0,
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.common.white,
         '&:hover, &:focus': {
           backgroundColor: theme.palette.primary.dark,
         },
-      }),
-    ...(isStartOfHighlighting && {
-      borderTopLeftRadius: '50%',
-      borderBottomLeftRadius: '50%',
-    }),
-    ...(isEndOfHighlighting && {
-      borderTopRightRadius: '50%',
-      borderBottomRightRadius: '50%',
-    }),
-  }),
-);
-
+      },
+    },
+    {
+      props: ({ isStartOfHighlighting }) => isStartOfHighlighting,
+      style: {
+        borderTopLeftRadius: '50%',
+        borderBottomLeftRadius: '50%',
+      },
+    },
+    {
+      props: ({ isEndOfHighlighting }) => isEndOfHighlighting,
+      style: {
+        borderTopRightRadius: '50%',
+        borderBottomRightRadius: '50%',
+      },
+    },
+  ],
+}));
 export default function CustomDateRangePickerDay() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx
index f42faf053b0a..caf9d98b2c8f 100644
--- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx
+++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx
@@ -10,34 +10,36 @@ import {
   DateRangePickerDayProps,
 } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 
-const DateRangePickerDay = styled(MuiDateRangePickerDay)(
-  ({
-    theme,
-    isHighlighting,
-    isStartOfHighlighting,
-    isEndOfHighlighting,
-    outsideCurrentMonth,
-  }) => ({
-    ...(!outsideCurrentMonth &&
-      isHighlighting && {
+const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
+  variants: [
+    {
+      props: ({ isHighlighting, outsideCurrentMonth }) =>
+        !outsideCurrentMonth && isHighlighting,
+      style: {
         borderRadius: 0,
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.common.white,
         '&:hover, &:focus': {
           backgroundColor: theme.palette.primary.dark,
         },
-      }),
-    ...(isStartOfHighlighting && {
-      borderTopLeftRadius: '50%',
-      borderBottomLeftRadius: '50%',
-    }),
-    ...(isEndOfHighlighting && {
-      borderTopRightRadius: '50%',
-      borderBottomRightRadius: '50%',
-    }),
-  }),
-) as React.ComponentType<DateRangePickerDayProps<Dayjs>>;
-
+      },
+    },
+    {
+      props: ({ isStartOfHighlighting }) => isStartOfHighlighting,
+      style: {
+        borderTopLeftRadius: '50%',
+        borderBottomLeftRadius: '50%',
+      },
+    },
+    {
+      props: ({ isEndOfHighlighting }) => isEndOfHighlighting,
+      style: {
+        borderTopRightRadius: '50%',
+        borderBottomRightRadius: '50%',
+      },
+    },
+  ],
+})) as React.ComponentType<DateRangePickerDayProps<Dayjs>>;
 export default function CustomDateRangePickerDay() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
index 9f943fa5f554..eedcc6b8fe7b 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
@@ -35,10 +35,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[200],
+  color: theme.palette.grey[200],
   [`& .${treeItemClasses.content}`]: {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(0.5, 1),
@@ -50,18 +47,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   },
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.25)
-        : theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.dark,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
+    ...theme.applyStyles('dark', {
+      color: theme.palette.primary.contrastText,
+    }),
   },
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
 
 export default function CustomStyling() {
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
index dd1a123cb753..de8fc4bd6f5c 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
@@ -36,11 +36,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[200],
-
+  color: theme.palette.grey[200],
   [`& .${treeItemClasses.content}`]: {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(0.5, 1),
@@ -52,18 +48,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   },
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.25)
-        : theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.dark,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
+    ...theme.applyStyles('dark', {
+      color: theme.palette.primary.contrastText,
+    }),
   },
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
 
 export default function CustomStyling() {
diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
index a02a1e86667b..45d30698d930 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js
@@ -80,14 +80,14 @@ function DotIcon() {
 }
 
 const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[400],
+  color: theme.palette.grey[400],
   position: 'relative',
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
 
 const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
@@ -100,10 +100,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   fontWeight: 500,
   [`&.Mui-expanded `]: {
     '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
-      color:
-        theme.palette.mode === 'light'
-          ? theme.palette.primary.main
-          : theme.palette.primary.dark,
+      color: theme.palette.primary.dark,
+      ...theme.applyStyles('light', {
+        color: theme.palette.primary.main,
+      }),
     },
     '&::before': {
       content: '""',
@@ -113,22 +113,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
       top: '44px',
       height: 'calc(100% - 48px)',
       width: '1.5px',
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[700],
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles('light', {
+        backgroundColor: theme.palette.grey[300],
+      }),
     },
   },
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+    color: 'white',
+    ...theme.applyStyles('light', {
+      color: theme.palette.primary.main,
+    }),
   },
   [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.primary.main
-        : theme.palette.primary.dark,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.primary.main,
+    }),
   },
 }));
 
diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
index b57e0a3fb720..70cb94cbb040 100644
--- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx
@@ -98,14 +98,14 @@ declare module 'react' {
 }
 
 const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[400],
+  color: theme.palette.grey[400],
   position: 'relative',
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 })) as unknown as typeof TreeItem2Root;
 
 const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
@@ -118,10 +118,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   fontWeight: 500,
   [`&.Mui-expanded `]: {
     '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
-      color:
-        theme.palette.mode === 'light'
-          ? theme.palette.primary.main
-          : theme.palette.primary.dark,
+      color: theme.palette.primary.dark,
+      ...theme.applyStyles('light', {
+        color: theme.palette.primary.main,
+      }),
     },
     '&::before': {
       content: '""',
@@ -131,22 +131,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
       top: '44px',
       height: 'calc(100% - 48px)',
       width: '1.5px',
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[700],
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles('light', {
+        backgroundColor: theme.palette.grey[300],
+      }),
     },
   },
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+    color: 'white',
+    ...theme.applyStyles('light', {
+      color: theme.palette.primary.main,
+    }),
   },
   [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.primary.main
-        : theme.palette.primary.dark,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.primary.main,
+    }),
   },
 }));
 
diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js
index 2e27635af25f..a072303ff3d2 100644
--- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js
+++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js
@@ -81,16 +81,15 @@ function DotIcon() {
 }
 
 const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[400],
+  color: theme.palette.grey[400],
   position: 'relative',
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
-
 const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   flexDirection: 'row-reverse',
   borderRadius: theme.spacing(0.7),
@@ -100,10 +99,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   fontWeight: 500,
   [`&.Mui-expanded `]: {
     '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
-      color:
-        theme.palette.mode === 'light'
-          ? theme.palette.primary.main
-          : theme.palette.primary.dark,
+      color: theme.palette.primary.dark,
+      ...theme.applyStyles('light', {
+        color: theme.palette.primary.main,
+      }),
     },
     '&::before': {
       content: '""',
@@ -113,22 +112,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
       top: '44px',
       height: 'calc(100% - 48px)',
       width: '1.5px',
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[700],
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles('light', {
+        backgroundColor: theme.palette.grey[300],
+      }),
     },
   },
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+    color: 'white',
+    ...theme.applyStyles('light', {
+      color: theme.palette.primary.main,
+    }),
   },
   [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.primary.main
-        : theme.palette.primary.dark,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.primary.main,
+    }),
   },
 }));
 
diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
index 77d933653142..0a93f04cea63 100644
--- a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
+++ b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
@@ -98,16 +98,15 @@ declare module 'react' {
 }
 
 const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[400],
+  color: theme.palette.grey[400],
   position: 'relative',
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 })) as unknown as typeof TreeItem2Root;
-
 const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   flexDirection: 'row-reverse',
   borderRadius: theme.spacing(0.7),
@@ -117,10 +116,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   fontWeight: 500,
   [`&.Mui-expanded `]: {
     '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
-      color:
-        theme.palette.mode === 'light'
-          ? theme.palette.primary.main
-          : theme.palette.primary.dark,
+      color: theme.palette.primary.dark,
+      ...theme.applyStyles('light', {
+        color: theme.palette.primary.main,
+      }),
     },
     '&::before': {
       content: '""',
@@ -130,22 +129,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
       top: '44px',
       height: 'calc(100% - 48px)',
       width: '1.5px',
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[700],
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles('light', {
+        backgroundColor: theme.palette.grey[300],
+      }),
     },
   },
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+    color: 'white',
+    ...theme.applyStyles('light', {
+      color: theme.palette.primary.main,
+    }),
   },
   [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.primary.main
-        : theme.palette.primary.dark,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.primary.main,
+    }),
   },
 }));
 
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
index 3b2fc9d59aa6..aed1efe19d50 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
@@ -5,10 +5,7 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
 const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[200],
+  color: theme.palette.grey[200],
   [`& .${treeItemClasses.content}`]: {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(0.5, 1),
@@ -20,18 +17,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   },
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.25)
-        : theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.dark,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
+    ...theme.applyStyles('dark', {
+      color: theme.palette.primary.contrastText,
+    }),
   },
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
 
 export default function CustomStyling() {
diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
index 8a8b2d213719..aed1efe19d50 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
@@ -5,11 +5,7 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 
 const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[800]
-      : theme.palette.grey[200],
-
+  color: theme.palette.grey[200],
   [`& .${treeItemClasses.content}`]: {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(0.5, 1),
@@ -21,18 +17,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   },
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.25)
-        : theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.dark,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
+    ...theme.applyStyles('dark', {
+      color: theme.palette.primary.contrastText,
+    }),
   },
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[800],
+  }),
 }));
 
 export default function CustomStyling() {
diff --git a/docs/src/modules/components/DemoPropsForm.tsx b/docs/src/modules/components/DemoPropsForm.tsx
index c0dbea676285..6af4554500dd 100644
--- a/docs/src/modules/components/DemoPropsForm.tsx
+++ b/docs/src/modules/components/DemoPropsForm.tsx
@@ -129,15 +129,15 @@ function ControlledColorRadio(props: any) {
           <Check
             fontSize="medium"
             color="inherit"
-            sx={{
+            sx={(theme) => ({
               zIndex: 1,
               position: 'absolute',
               top: '50%',
               left: '50%',
               transform: 'translate(-50%, -50%)',
               pointerEvents: 'none',
-              color: (theme) => theme.palette.background.default,
-            }}
+              color: theme.palette.background.default,
+            })}
           />
         }
         sx={{ width: '100%', height: '100%', margin: 0 }}
@@ -488,19 +488,21 @@ export default function ChartDemoPropsForm<T extends string>({
                         key={placement}
                         // variant="soft"
                         color="primary"
-                        sx={{
-                          position: 'relative',
-                          height: '14px',
-                          width: 32,
-                          borderRadius: 'xs',
-                          mx: 0.5,
-                          ...(placement.match(/^(top|bottom)$/) && {
+                        sx={[
+                          {
+                            position: 'relative',
+                            height: '14px',
+                            width: 32,
+                            borderRadius: 'xs',
+                            mx: 0.5,
+                          },
+                          placement.match(/^(top|bottom)$/) && {
                             justifySelf: 'center',
-                          }),
-                          ...(placement.match(/^(top-end|bottom-end)$/) && {
+                          },
+                          placement.match(/^(top-end|bottom-end)$/) && {
                             justifySelf: 'flex-end',
-                          }),
-                        }}
+                          },
+                        ]}
                       >
                         <Radio
                           value={placement}
diff --git a/docs/src/modules/components/LocalizationTable.js b/docs/src/modules/components/LocalizationTable.js
index bd0b241c1a57..83b1661a0fbe 100644
--- a/docs/src/modules/components/LocalizationTable.js
+++ b/docs/src/modules/components/LocalizationTable.js
@@ -17,10 +17,7 @@ const Root = styled('div')(({ theme }) => ({
   fontWeight: 600,
   color: (theme.vars || theme).palette.text.secondary,
   '&.low': {
-    color:
-      theme.palette.mode === 'dark'
-        ? (theme.vars || theme).palette.text.primary
-        : (theme.vars || theme).palette.error.dark,
+    color: (theme.vars || theme).palette.error.dark,
     '& .progress-bar': {
       backgroundColor: (theme.vars || theme).palette.error.main,
       opacity: 0.3,
@@ -29,26 +26,29 @@ const Root = styled('div')(({ theme }) => ({
       border: `1px solid`,
       borderColor: (theme.vars || theme).palette.error.light,
     },
+    ...theme.applyStyles('dark', {
+      color: (theme.vars || theme).palette.text.primary,
+    }),
   },
   '&.medium': {
-    color:
-      theme.palette.mode === 'dark'
-        ? (theme.vars || theme).palette.text.primary
-        : (theme.vars || theme).palette.warning.dark,
+    color: (theme.vars || theme).palette.warning.dark,
     '& .progress-bar': {
       backgroundColor: (theme.vars || theme).palette.warning.main,
-      opacity: theme.palette.mode === 'dark' ? 0.4 : 0.25,
+      opacity: 0.25,
+      ...theme.applyStyles('dark', {
+        opacity: 0.4,
+      }),
     },
     '& .progress-background': {
       border: `1px solid`,
       borderColor: (theme.vars || theme).palette.warning.light,
     },
+    ...theme.applyStyles('dark', {
+      color: (theme.vars || theme).palette.text.primary,
+    }),
   },
   '&.high': {
-    color:
-      theme.palette.mode === 'dark'
-        ? (theme.vars || theme).palette.text.primary
-        : (theme.vars || theme).palette.success.dark,
+    color: (theme.vars || theme).palette.success.dark,
     '& .progress-bar': {
       backgroundColor: (theme.vars || theme).palette.success.main,
       opacity: 0.3,
@@ -57,6 +57,9 @@ const Root = styled('div')(({ theme }) => ({
       border: `1px solid`,
       borderColor: (theme.vars || theme).palette.success.light,
     },
+    ...theme.applyStyles('dark', {
+      color: (theme.vars || theme).palette.text.primary,
+    }),
   },
 }));
 
diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx
index 2b48de823b10..5980b1565b98 100644
--- a/docs/src/modules/components/PickersPlayground.tsx
+++ b/docs/src/modules/components/PickersPlayground.tsx
@@ -50,17 +50,20 @@ const ComponentSection = styled('div')(({ theme }) => ({
   '& .MuiPickersLayout-root': {
     borderRadius: 8,
     border: '1px dashed',
-    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.divider,
-    ...(theme.palette.mode === 'dark' && {
+    borderColor: theme.palette.divider,
+    ...theme.applyStyles('dark', {
       backgroundColor: alpha(theme.palette.grey[900], 0.2),
     }),
+    ...theme.applyStyles('light', {
+      borderColor: theme.palette.grey[300],
+    }),
   },
 }));
 
 const PropControlsSection = styled('div')(({ theme }) => ({
   flexGrow: 1,
   background: alpha(theme.palette.grey[50], 0.5),
-  ...(theme.palette.mode === 'dark' && {
+  ...theme.applyStyles('dark', {
     backgroundColor: alpha(theme.palette.grey[900], 0.3),
   }),
 }));
diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
index 3d9fe387525c..456604d975c9 100644
--- a/docs/src/modules/components/overview/Keyboard.tsx
+++ b/docs/src/modules/components/overview/Keyboard.tsx
@@ -248,7 +248,7 @@ const arrowKeys: KeyType[] = [
 const RootRectangle = styled('rect')(({ theme }) => ({
   fill: 'white',
   stroke: theme.palette.grey[500],
-  ...(theme.palette.mode === 'dark' && {
+  ...theme.applyStyles('dark', {
     stroke: theme.palette.grey[600],
     fill: theme.palette.background.paper,
   }),
@@ -261,7 +261,7 @@ const KeyRoot = styled('g')(({ theme }) => ({
 const KeyRectangle = styled('rect')(({ theme }) => ({
   fill: 'white',
   stroke: theme.palette.grey[500],
-  ...(theme.palette.mode === 'dark' && {
+  ...theme.applyStyles('dark', {
     stroke: theme.palette.grey[600],
     fill: theme.palette.background.paper,
   }),
@@ -270,7 +270,7 @@ const KeyText = styled('text')(({ theme }) => ({
   fill: theme.palette.grey[800],
   fontSize: 9,
   fontFamily: 'IBM Plex Sans',
-  ...(theme.palette.mode === 'dark' && { fill: theme.palette.text.primary }),
+  ...theme.applyStyles('dark', { fill: theme.palette.text.primary }),
 }));
 
 type KeyboardSvgProps = {
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
index 456067392205..fb9b4d2f74de 100644
--- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
+++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -37,16 +37,34 @@ export const ChartsAxisHighlightPath = styled('path', {
   name: 'MuiChartsAxisHighlight',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: { axisHighlight: AxisHighlight } }>(({ ownerState, theme }) => ({
+})<{ ownerState: { axisHighlight: AxisHighlight } }>(({ theme }) => ({
   pointerEvents: 'none',
-  ...(ownerState.axisHighlight === 'band' && {
-    fill: theme.palette.mode === 'light' ? 'gray' : 'white',
-    fillOpacity: 0.1,
-  }),
-  ...(ownerState.axisHighlight === 'line' && {
-    strokeDasharray: '5 2',
-    stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff',
-  }),
+  variants: [
+    {
+      props: {
+        axisHighlight: 'band',
+      },
+      style: {
+        fill: 'white',
+        fillOpacity: 0.1,
+        ...theme.applyStyles('light', {
+          fill: 'gray',
+        }),
+      },
+    },
+    {
+      props: {
+        axisHighlight: 'line',
+      },
+      style: {
+        strokeDasharray: '5 2',
+        stroke: '#ffffff',
+        ...theme.applyStyles('light', {
+          stroke: '#000000',
+        }),
+      },
+    },
+  ],
 }));
 
 type AxisHighlight = 'none' | 'line' | 'band';
diff --git a/packages/x-data-grid-generator/src/renderer/renderPnl.tsx b/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
index 40e8c01d7c35..8246e08241da 100644
--- a/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
+++ b/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
@@ -7,11 +7,16 @@ const Value = styled('div')(({ theme }) => ({
   width: '100%',
   fontVariantNumeric: 'tabular-nums',
   '&.positive': {
-    color:
-      theme.palette.mode === 'light' ? theme.palette.success.dark : theme.palette.success.light,
+    color: theme.palette.success.light,
+    ...theme.applyStyles('light', {
+      color: theme.palette.success.dark,
+    }),
   },
   '&.negative': {
-    color: theme.palette.mode === 'light' ? theme.palette.error.dark : theme.palette.error.light,
+    color: theme.palette.error.light,
+    ...theme.applyStyles('light', {
+      color: theme.palette.error.dark,
+    }),
   },
 }));
 
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
index 22e3d381cfa7..30f29b060b8a 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
@@ -9,13 +9,16 @@ function GridGroupingColumnLeafCell(props: GridRenderCellParams) {
 
   return (
     <Box
-      sx={{
-        ml:
-          rootProps.rowGroupingColumnMode === 'multiple'
-            ? 1
-            : (theme) =>
-                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-      }}
+      sx={[
+        rootProps.rowGroupingColumnMode === 'multiple'
+          ? {
+              ml: 1,
+            }
+          : (theme) => ({
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
+            }),
+      ]}
+      style={{ '--depth': rowNode.depth } as any}
     >
       {props.formattedValue ?? props.value}
     </Box>
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
index 0046dc3294a4..07a397c1a0b4 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
@@ -75,13 +75,16 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
   return (
     <Box
       className={classes.root}
-      sx={{
-        ml:
-          rootProps.rowGroupingColumnMode === 'multiple'
-            ? 0
-            : (theme) =>
-                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-      }}
+      sx={[
+        rootProps.rowGroupingColumnMode === 'multiple'
+          ? {
+              ml: 0,
+            }
+          : (theme) => ({
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
+            }),
+      ]}
+      style={{ '--depth': rowNode.depth } as any}
     >
       <div className={classes.toggle}>
         {filteredDescendantCount > 0 && (
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index 1e60d9b579f7..c30e5af630d0 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -452,12 +452,24 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...logicOperatorInputProps}
-          sx={{
-            display: hasLogicOperatorColumn ? 'flex' : 'none',
-            visibility: showMultiFilterOperators ? 'visible' : 'hidden',
-            ...(baseFormControlProps.sx || {}),
-            ...(logicOperatorInputProps.sx || {}),
-          }}
+          sx={[
+            hasLogicOperatorColumn
+              ? {
+                  display: 'flex',
+                }
+              : {
+                  display: 'none',
+                },
+            showMultiFilterOperators
+              ? {
+                  visibility: 'visible',
+                }
+              : {
+                  visibility: 'hidden',
+                },
+            baseFormControlProps.sx,
+            logicOperatorInputProps.sx,
+          ]}
           className={clsx(
             classes.logicOperatorInput,
             baseFormControlProps.className,
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
index 8881a0a86f24..4921f12486ed 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -157,7 +157,15 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
           <rootProps.slots.baseIconButton
             aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
             size="small"
-            sx={{ visibility: searchValue ? 'visible' : 'hidden' }}
+            sx={[
+              searchValue
+                ? {
+                    visibility: 'visible',
+                  }
+                : {
+                    visibility: 'hidden',
+                  },
+            ]}
             onClick={handleSearchReset}
             {...rootProps.slotProps?.baseIconButton}
           >
diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
index a435c62372f8..52294d0cb180 100644
--- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
+++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
@@ -32,8 +32,8 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
         borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
-        ...(theme.palette.mode === 'dark' && {
-          borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`,
+        ...theme.applyStyles('dark', {
+          borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6),
         }),
       },
     },
@@ -42,8 +42,8 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
         borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
-        ...(theme.palette.mode === 'dark' && {
-          borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`,
+        ...theme.applyStyles('dark', {
+          borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6),
         }),
       },
     },
@@ -53,8 +53,8 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
         marginLeft:
           'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any,
         borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
-        ...(theme.palette.mode === 'dark' && {
-          borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
+        ...theme.applyStyles('dark', {
+          borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6),
         }),
       },
     },