From 9c642240733d5ec3568b5a78fafe40634befc531 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Wed, 7 Aug 2024 22:35:44 +0300
Subject: [PATCH 01/12] Run `v6.0.0/styled`

---
 .../ChartsAxisHighlight.tsx                   | 36 ++++++++++++++-----
 .../src/renderer/renderPnl.tsx                | 11 ++++--
 2 files changed, 35 insertions(+), 12 deletions(-)

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,
+    }),
   },
 }));
 

From d366b6297d936019f826c6ee9cef85a292197054 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Aug 2024 10:29:48 +0300
Subject: [PATCH 02/12] Run `v6.0.0/styled` on docs

---
 docs/data/data-grid/demo/FullFeaturedDemo.js  | 68 ++++++++++++-------
 docs/data/data-grid/demo/FullFeaturedDemo.tsx | 68 ++++++++++++-------
 .../editing/ValidateServerNameGrid.js         | 13 +++-
 .../editing/ValidateServerNameGrid.tsx        | 13 +++-
 .../layout/AutoHeightOverlayNoSnap.js         | 10 ++-
 .../layout/AutoHeightOverlayNoSnap.tsx        | 10 ++-
 .../overlays/LoadingOverlayCustom.js          |  8 +--
 .../overlays/LoadingOverlayCustom.tsx         |  8 +--
 .../overlays/NoResultsOverlayCustom.js        | 10 ++-
 .../overlays/NoResultsOverlayCustom.tsx       | 10 ++-
 .../data-grid/overlays/NoRowsOverlayCustom.js | 10 ++-
 .../overlays/NoRowsOverlayCustom.tsx          | 10 ++-
 .../ConditionalValidationGrid.js              |  5 +-
 .../ConditionalValidationGrid.tsx             |  5 +-
 docs/data/data-grid/style/AntDesignGrid.js    | 31 ++++++---
 docs/data/data-grid/style/AntDesignGrid.tsx   | 31 ++++++---
 .../date-pickers/base-concepts/CustomSlots.js |  8 +--
 .../base-concepts/CustomSlots.tsx             |  8 +--
 .../customization/CustomStyling.js            | 16 ++---
 .../customization/CustomStyling.tsx           | 17 +++--
 .../customization/FileExplorer.js             | 37 +++++-----
 .../customization/FileExplorer.tsx            | 37 +++++-----
 .../rich-tree-view/ordering/FileExplorer.js   | 38 ++++++-----
 .../rich-tree-view/ordering/FileExplorer.tsx  | 38 ++++++-----
 .../customization/CustomStyling.js            | 16 ++---
 .../customization/CustomStyling.tsx           | 17 +++--
 .../modules/components/LocalizationTable.js   | 29 ++++----
 .../modules/components/PickersPlayground.tsx  |  9 ++-
 28 files changed, 350 insertions(+), 230 deletions(-)

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/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/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/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/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/style/AntDesignGrid.js b/docs/data/data-grid/style/AntDesignGrid.js
index 37efb118bd28..b6ccf99aab16 100644
--- a/docs/data/data-grid/style/AntDesignGrid.js
+++ b/docs/data/data-grid/style/AntDesignGrid.js
@@ -57,8 +57,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 +73,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..f2cf28f7ee64 100644
--- a/docs/data/data-grid/style/AntDesignGrid.tsx
+++ b/docs/data/data-grid/style/AntDesignGrid.tsx
@@ -57,8 +57,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 +73,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/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/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
index 9f943fa5f554..96c739393d35 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,21 @@ 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,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
   },
   [`& .${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..e2718030e7b6 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,21 @@ 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,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
   },
   [`& .${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..3de0f0c79f4e 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,21 @@ 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,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
   },
   [`& .${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..3de0f0c79f4e 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,21 @@ 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,
+    backgroundColor: theme.palette.primary.dark,
     color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     padding: theme.spacing(0, 1.2),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.primary.main, 0.25),
+    }),
   },
   [`& .${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/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),
   }),
 }));

From 9c43e82c762e4ef13ffdb1b3ff835a46ee433858 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Aug 2024 14:56:10 +0300
Subject: [PATCH 03/12] Run `v6.0.0/sx-prop` on docs

---
 docs/data/charts/styling/SxStyling.js         | 10 +++++--
 docs/data/charts/styling/SxStyling.tsx        | 11 +++++--
 .../data-grid/editing/IsCellEditableGrid.js   | 10 ++++---
 .../data-grid/editing/IsCellEditableGrid.tsx  | 10 ++++---
 .../CustomHeaderFilterDataGridPro.js          | 19 ++++++++----
 .../CustomHeaderFilterDataGridPro.tsx         | 19 ++++++++----
 .../CustomizeDetailPanelToggle.js             | 11 ++++---
 .../CustomizeDetailPanelToggle.tsx            | 11 ++++---
 .../performance/GridVisualization.js          | 11 ++++---
 .../performance/GridVisualization.tsx         | 11 ++++---
 .../CalendarHeaderComponentRange.js           | 20 +++++++++++--
 .../CalendarHeaderComponentRange.tsx          | 20 +++++++++++--
 .../custom-field/BrowserV6Field.js            |  8 ++++-
 .../custom-field/BrowserV6Field.tsx           |  8 ++++-
 .../BrowserV6MultiInputRangeField.js          |  9 +++++-
 .../BrowserV6MultiInputRangeField.tsx         |  9 +++++-
 .../BrowserV6SingleInputRangeField.js         |  8 ++++-
 .../BrowserV6SingleInputRangeField.tsx        |  8 ++++-
 .../AddWarningIconWhenInvalid.js              | 13 +++++++-
 .../AddWarningIconWhenInvalid.tsx             | 13 +++++++-
 .../AddWarningIconWhenInvalidRange.js         | 13 +++++++-
 .../AddWarningIconWhenInvalidRange.tsx        | 13 +++++++-
 docs/src/modules/components/DemoPropsForm.tsx | 30 ++++++++++---------
 23 files changed, 220 insertions(+), 75 deletions(-)

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/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/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/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/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/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/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}

From 9f5bb774a54aba9e8ac29f9f8bb73f74de387feb Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Aug 2024 15:55:25 +0300
Subject: [PATCH 04/12] Run `v6.0.0/sx-prop`

---
 .../components/GridGroupingColumnLeafCell.tsx | 15 +++++++-----
 .../components/GridGroupingCriteriaCell.tsx   | 15 +++++++-----
 .../panel/filterPanel/GridFilterForm.tsx      | 24 ++++++++++++++-----
 .../toolbar/GridToolbarQuickFilter.tsx        | 10 +++++++-
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
index 22e3d381cfa7..33174070c941 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) =>
+      sx={[
+        rootProps.rowGroupingColumnMode === 'multiple'
+          ? {
+              ml: 1,
+            }
+          : {
+              ml: (theme) =>
                 `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-      }}
+            },
+      ]}
     >
       {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..494439978468 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) =>
+      sx={[
+        rootProps.rowGroupingColumnMode === 'multiple'
+          ? {
+              ml: 0,
+            }
+          : {
+              ml: (theme) =>
                 `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-      }}
+            },
+      ]}
     >
       <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..2cbf3d056ba7 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}
           >

From 330cf58c85f0238a1e4c07c6cd13025c292d7fde Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 9 Aug 2024 16:25:29 +0300
Subject: [PATCH 05/12] Refactor remaining possible instances of
 `theme.palette.mode` usage

---
 .../CellSelectionRangeStyling.js              | 14 +--
 .../CellSelectionRangeStyling.tsx             | 14 +--
 .../ServerSideErrorHandling.js                | 12 +--
 .../ServerSideErrorHandling.tsx               | 14 +--
 .../ServerSideTreeDataErrorHandling.js        | 12 +--
 .../ServerSideTreeDataErrorHandling.tsx       | 14 +--
 docs/data/data-grid/style/AntDesignGrid.js    |  7 +-
 docs/data/data-grid/style/AntDesignGrid.tsx   |  7 +-
 docs/data/data-grid/style/StylingRowsGrid.js  | 94 +++++-------------
 docs/data/data-grid/style/StylingRowsGrid.tsx | 96 +++++--------------
 .../date-pickers/date-calendar/WeekPicker.js  | 10 +-
 .../date-pickers/date-calendar/WeekPicker.tsx | 10 +-
 .../customization/CustomStyling.js            |  4 +-
 .../customization/CustomStyling.tsx           |  4 +-
 .../customization/CustomStyling.js            |  4 +-
 .../customization/CustomStyling.tsx           |  4 +-
 .../TreeItem2DragAndDropOverlay.tsx           | 12 +--
 17 files changed, 121 insertions(+), 211 deletions(-)

diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
index dfa70d34ebe0..a1a88c376a44 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..a1a88c376a44 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/server-side-data/ServerSideErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideErrorHandling.js
index 1bf394ea930f..d9c5a3a04112 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 a030a8bf6e50..e04ea6d7ed5a 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 44da5bf0cab3..b255032d12f6 100644
--- a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
+++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js
@@ -118,13 +118,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,
@@ -136,8 +129,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 fdd4deeb1771..bf7cf4cce10a 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];
@@ -123,13 +123,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,
@@ -141,8 +134,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 b6ccf99aab16..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',
diff --git a/docs/data/data-grid/style/AntDesignGrid.tsx b/docs/data/data-grid/style/AntDesignGrid.tsx
index f2cf28f7ee64..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',
diff --git a/docs/data/data-grid/style/StylingRowsGrid.js b/docs/data/data-grid/style/StylingRowsGrid.js
index 56606a53676f..9818f2b820d7 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),
+    backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.info.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.success.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.success.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.warning.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.warning.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.error.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.error.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: 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..0ed6b9163743 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),
+    backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.info.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.info.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.success.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.success.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.success.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.warning.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.warning.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.warning.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(
-      theme.palette.error.main,
-      theme.palette.mode,
-    ),
+    backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getHoverBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getSelectedBackgroundColor(
-        theme.palette.error.main,
-        theme.palette.mode,
-      ),
+      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getSelectedHoverBackgroundColor(
-          theme.palette.error.main,
-          theme.palette.mode,
-        ),
+        backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.4),
       },
     },
   },
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/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
index 96c739393d35..eedcc6b8fe7b 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js
@@ -48,11 +48,13 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
     backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     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,
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 e2718030e7b6..de8fc4bd6f5c 100644
--- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx
@@ -49,11 +49,13 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
     backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     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,
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 3de0f0c79f4e..aed1efe19d50 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js
@@ -18,11 +18,13 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
     backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     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,
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 3de0f0c79f4e..aed1efe19d50 100644
--- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
+++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx
@@ -18,11 +18,13 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
   [`& .${treeItemClasses.iconContainer}`]: {
     borderRadius: '50%',
     backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText,
     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,
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),
         }),
       },
     },

From 365b9978dc37743a4fafe18606d59bdade5c04fd Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 9 Aug 2024 16:59:31 +0300
Subject: [PATCH 06/12] Fix "brain-fart"

---
 docs/data/data-grid/style/StylingRowsGrid.js  | 32 +++++++++----------
 docs/data/data-grid/style/StylingRowsGrid.tsx | 32 +++++++++----------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/data/data-grid/style/StylingRowsGrid.js b/docs/data/data-grid/style/StylingRowsGrid.js
index 9818f2b820d7..6aee2cc5a979 100644
--- a/docs/data/data-grid/style/StylingRowsGrid.js
+++ b/docs/data/data-grid/style/StylingRowsGrid.js
@@ -13,50 +13,50 @@ const getBackgroundColor = (color, theme, coefficient) => ({
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   '& .super-app-theme--Open': {
-    backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.4),
+        ...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 0ed6b9163743..de1d8b44e7fd 100644
--- a/docs/data/data-grid/style/StylingRowsGrid.tsx
+++ b/docs/data/data-grid/style/StylingRowsGrid.tsx
@@ -13,50 +13,50 @@ const getBackgroundColor = (color: string, theme: Theme, coefficient: number) =>
 
 const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
   '& .super-app-theme--Open': {
-    backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.info.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.info.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.info.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.info.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Filled': {
-    backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.success.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.success.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.success.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.success.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--PartiallyFilled': {
-    backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.warning.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.warning.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.warning.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.warning.main, theme, 0.4),
       },
     },
   },
   '& .super-app-theme--Rejected': {
-    backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.7),
+    ...getBackgroundColor(theme.palette.error.main, theme, 0.7),
     '&:hover': {
-      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.6),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.6),
     },
     '&.Mui-selected': {
-      backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.5),
+      ...getBackgroundColor(theme.palette.error.main, theme, 0.5),
       '&:hover': {
-        backgroundColor: getBackgroundColor(theme.palette.error.main, theme, 0.4),
+        ...getBackgroundColor(theme.palette.error.main, theme, 0.4),
       },
     },
   },

From e21fdcf9baa322e13ba67c5c8c868c5b9287bf2c Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Tue, 13 Aug 2024 13:24:30 +0300
Subject: [PATCH 07/12] Fix style applying

---
 .../data-grid/cell-selection/CellSelectionRangeStyling.js     | 4 ++--
 .../data-grid/cell-selection/CellSelectionRangeStyling.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
index a1a88c376a44..c629a45f3397 100644
--- a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
+++ b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.js
@@ -15,8 +15,8 @@ const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
       borderRight: `1px solid ${lightBorderColor}`,
       borderBottom: `1px solid ${lightBorderColor}`,
       ...theme.applyStyles('dark', {
-        borderRightColor: darkBorderColor,
-        borderBottomColor: darkBorderColor,
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
       }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {
diff --git a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
index a1a88c376a44..c629a45f3397 100644
--- a/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
+++ b/docs/data/data-grid/cell-selection/CellSelectionRangeStyling.tsx
@@ -15,8 +15,8 @@ const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
       borderRight: `1px solid ${lightBorderColor}`,
       borderBottom: `1px solid ${lightBorderColor}`,
       ...theme.applyStyles('dark', {
-        borderRightColor: darkBorderColor,
-        borderBottomColor: darkBorderColor,
+        borderRightColor: `${darkBorderColor}`,
+        borderBottomColor: `${darkBorderColor}`,
       }),
     },
     [`& .${gridClasses.cell}.Mui-selected`]: {

From 8275ef11d29257e343501ee65987fea70e43e9ee Mon Sep 17 00:00:00 2001
From: Lukas Tyla <llukas.tyla@gmail.com>
Date: Thu, 15 Aug 2024 15:17:42 +0300
Subject: [PATCH 08/12] Update
 packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com>
---
 .../src/components/panel/filterPanel/GridFilterForm.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 2cbf3d056ba7..c30e5af630d0 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -467,8 +467,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
               : {
                   visibility: 'hidden',
                 },
-            baseFormControlProps.sx || {},
-            logicOperatorInputProps.sx || {},
+            baseFormControlProps.sx,
+            logicOperatorInputProps.sx,
           ]}
           className={clsx(
             classes.logicOperatorInput,

From 6de185613a4b754525ffbcc8d8950213c9a5800f Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 20 Aug 2024 20:31:18 +0200
Subject: [PATCH 09/12] use style object callback signature

---
 .../src/components/GridGroupingColumnLeafCell.tsx         | 8 ++++----
 .../src/components/GridGroupingCriteriaCell.tsx           | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
index 33174070c941..30f29b060b8a 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
@@ -14,11 +14,11 @@ function GridGroupingColumnLeafCell(props: GridRenderCellParams) {
           ? {
               ml: 1,
             }
-          : {
-              ml: (theme) =>
-                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-            },
+          : (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 494439978468..07a397c1a0b4 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
@@ -80,11 +80,11 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
           ? {
               ml: 0,
             }
-          : {
-              ml: (theme) =>
-                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
-            },
+          : (theme) => ({
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
+            }),
       ]}
+      style={{ '--depth': rowNode.depth } as any}
     >
       <div className={classes.toggle}>
         {filteredDescendantCount > 0 && (

From 697dc1ecca24874ad7dc3937acd35c875a29ac76 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 20 Aug 2024 21:22:59 +0200
Subject: [PATCH 10/12] migrate more code to support pigmentcss

---
 .../CustomDateRangePickerDay.js               | 45 +++++++++---------
 .../CustomDateRangePickerDay.tsx              | 46 ++++++++++---------
 .../modules/components/overview/Keyboard.tsx  |  6 +--
 .../ResponsiveChartContainerPro.tsx           | 10 +++-
 .../ChartsAxisHighlight.tsx                   |  8 +---
 .../x-charts/src/Gauge/GaugeContainer.tsx     | 12 +++--
 .../src/LineChart/LineHighlightElement.tsx    | 18 ++++++--
 .../x-charts/src/LineChart/MarkElement.tsx    | 15 +++---
 .../ResizableContainer.tsx                    |  8 ++--
 .../ResponsiveChartContainer.tsx              | 10 +++-
 10 files changed, 106 insertions(+), 72 deletions(-)

diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
index 2bc8af2bb52c..7d61206f6173 100644
--- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
+++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
@@ -7,33 +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 (
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/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
index 3d9fe387525c..5639160e3890 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-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
index e7a1f932174b..cd5f039c9c3b 100644
--- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
+++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
@@ -22,7 +22,15 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
     useResponsiveChartContainerProProps(props, ref);
 
   return (
-    <ResizableContainer {...resizableChartContainerProps}>
+    <ResizableContainer
+      {...resizableChartContainerProps}
+      style={
+        {
+          '--width': resizableChartContainerProps.ownerState.width,
+          '--height': resizableChartContainerProps.ownerState.height,
+        } as React.CSSProperties
+      }
+    >
       {hasIntrinsicSize ? <ChartContainerPro {...chartContainerProProps} /> : null}
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ResizableContainer>
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
index fb9b4d2f74de..842ae657bad1 100644
--- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
+++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -41,9 +41,7 @@ export const ChartsAxisHighlightPath = styled('path', {
   pointerEvents: 'none',
   variants: [
     {
-      props: {
-        axisHighlight: 'band',
-      },
+      props: ({ ownerState }) => ownerState.axisHighlight === 'band',
       style: {
         fill: 'white',
         fillOpacity: 0.1,
@@ -53,9 +51,7 @@ export const ChartsAxisHighlightPath = styled('path', {
       },
     },
     {
-      props: {
-        axisHighlight: 'line',
-      },
+      props: ({ ownerState }) => ownerState.axisHighlight === 'line',
       style: {
         strokeDasharray: '5 2',
         stroke: '#ffffff',
diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
index 48e61b403238..cd8c9e6331dd 100644
--- a/packages/x-charts/src/Gauge/GaugeContainer.tsx
+++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -25,9 +25,9 @@ export interface GaugeContainerProps
 const ResizableContainer = styled('div', {
   name: 'MuiGauge',
   slot: 'Container',
-})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ ownerState, theme }) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
+})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ theme }) => ({
+  width: 'var(--width, 100%)',
+  height: 'var(--height, 100%)',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -77,6 +77,12 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
       aria-valuenow={value === null ? undefined : value}
       aria-valuemin={valueMin}
       aria-valuemax={valueMax}
+      style={
+        {
+          '--width': inWidth,
+          '--height': inHeight,
+        } as React.CSSProperties
+      }
       {...other}
     >
       {width && height ? (
diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx
index 4bb282b55f60..a3ade5908780 100644
--- a/packages/x-charts/src/LineChart/LineHighlightElement.tsx
+++ b/packages/x-charts/src/LineChart/LineHighlightElement.tsx
@@ -43,11 +43,11 @@ const HighlightElement = styled('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: LineHighlightElementOwnerState }>(({ ownerState }) => ({
-  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
-  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: ownerState.color,
-}));
+})<{ ownerState: LineHighlightElementOwnerState }>({
+  transform: `translate(var(--x)px, var(--y)px)`,
+  transformOrigin: `var(--x)px var(--y)px`,
+  fill: 'var(--color)',
+});
 
 export type LineHighlightElementProps = LineHighlightElementOwnerState &
   Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>;
@@ -82,6 +82,14 @@ function LineHighlightElement(props: LineHighlightElementProps) {
       cx={0}
       cy={0}
       r={other.r === undefined ? 5 : other.r}
+      style={
+        {
+          ...other.style,
+          '--x': x,
+          '--y': y,
+          '--color': color,
+        } as React.CSSProperties
+      }
       {...other}
     />
   );
diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
index 137f44f252b7..7a9ceb4733d4 100644
--- a/packages/x-charts/src/LineChart/MarkElement.tsx
+++ b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -54,9 +54,9 @@ const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: MarkElementOwnerState }>(({ ownerState, theme }) => ({
+})<{ ownerState: MarkElementOwnerState }>(({ theme }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  stroke: ownerState.color,
+  stroke: 'var(--color)',
   strokeWidth: 2,
 }));
 
@@ -120,10 +120,13 @@ function MarkElement(props: MarkElementProps) {
   return (
     <MarkElementPath
       {...other}
-      style={{
-        transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-        transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
-      }}
+      style={
+        {
+          transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+          transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
+          '--color': color,
+        } as unknown as React.CSSProperties
+      }
       ownerState={ownerState}
       className={classes.root}
       d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
index 2ea1f0f81c9a..e319b40fff66 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
@@ -9,9 +9,9 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 export const ResizableContainer = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container',
-})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>(({ ownerState }) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
+})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>({
+  width: 'var(--width, 100%)',
+  height: 'var(--height, 100%)',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -23,4 +23,4 @@ export const ResizableContainer = styled('div', {
     width: '100%',
     height: '100%',
   },
-}));
+});
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index 5293e22ae886..38208e40b381 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -24,7 +24,15 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai
     useResponsiveChartContainerProps(props, ref);
 
   return (
-    <ResizableContainer {...resizableChartContainerProps}>
+    <ResizableContainer
+      {...resizableChartContainerProps}
+      style={
+        {
+          '--width': resizableChartContainerProps.ownerState.width,
+          '--height': resizableChartContainerProps.ownerState.height,
+        } as React.CSSProperties
+      }
+    >
       {hasIntrinsicSize ? <ChartContainer {...chartContainerProps} /> : null}
     </ResizableContainer>
   );

From be69a13249c5bcf3d97520d47d4a9187d71b8ef6 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Wed, 21 Aug 2024 12:31:41 +0300
Subject: [PATCH 11/12] scripts

---
 .../date-range-calendar/CustomDateRangePickerDay.js         | 1 -
 docs/src/modules/components/overview/Keyboard.tsx           | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
index 7d61206f6173..6f1dbf791830 100644
--- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
+++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js
@@ -37,7 +37,6 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
     },
   ],
 }));
-
 export default function CustomDateRangePickerDay() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
index 5639160e3890..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.applyStyles("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.applyStyles("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.applyStyles("dark", { fill: theme.palette.text.primary }),
+  ...theme.applyStyles('dark', { fill: theme.palette.text.primary }),
 }));
 
 type KeyboardSvgProps = {

From 0b2a17a4eff883e74bf36f7d74b86ebe1158e814 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Wed, 21 Aug 2024 12:55:31 +0300
Subject: [PATCH 12/12] Revert start of PigmentCSS support

---
 .../ResponsiveChartContainerPro.tsx            | 10 +---------
 .../ChartsAxisHighlight.tsx                    |  8 ++++++--
 packages/x-charts/src/Gauge/GaugeContainer.tsx | 12 +++---------
 .../src/LineChart/LineHighlightElement.tsx     | 18 +++++-------------
 .../x-charts/src/LineChart/MarkElement.tsx     | 15 ++++++---------
 .../ResizableContainer.tsx                     |  8 ++++----
 .../ResponsiveChartContainer.tsx               | 10 +---------
 7 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
index cd5f039c9c3b..e7a1f932174b 100644
--- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
+++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
@@ -22,15 +22,7 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
     useResponsiveChartContainerProProps(props, ref);
 
   return (
-    <ResizableContainer
-      {...resizableChartContainerProps}
-      style={
-        {
-          '--width': resizableChartContainerProps.ownerState.width,
-          '--height': resizableChartContainerProps.ownerState.height,
-        } as React.CSSProperties
-      }
-    >
+    <ResizableContainer {...resizableChartContainerProps}>
       {hasIntrinsicSize ? <ChartContainerPro {...chartContainerProProps} /> : null}
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ResizableContainer>
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
index 842ae657bad1..fb9b4d2f74de 100644
--- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
+++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -41,7 +41,9 @@ export const ChartsAxisHighlightPath = styled('path', {
   pointerEvents: 'none',
   variants: [
     {
-      props: ({ ownerState }) => ownerState.axisHighlight === 'band',
+      props: {
+        axisHighlight: 'band',
+      },
       style: {
         fill: 'white',
         fillOpacity: 0.1,
@@ -51,7 +53,9 @@ export const ChartsAxisHighlightPath = styled('path', {
       },
     },
     {
-      props: ({ ownerState }) => ownerState.axisHighlight === 'line',
+      props: {
+        axisHighlight: 'line',
+      },
       style: {
         strokeDasharray: '5 2',
         stroke: '#ffffff',
diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
index cd8c9e6331dd..48e61b403238 100644
--- a/packages/x-charts/src/Gauge/GaugeContainer.tsx
+++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -25,9 +25,9 @@ export interface GaugeContainerProps
 const ResizableContainer = styled('div', {
   name: 'MuiGauge',
   slot: 'Container',
-})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ theme }) => ({
-  width: 'var(--width, 100%)',
-  height: 'var(--height, 100%)',
+})<{ ownerState: Pick<GaugeContainerProps, 'width' | 'height'> }>(({ ownerState, theme }) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -77,12 +77,6 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
       aria-valuenow={value === null ? undefined : value}
       aria-valuemin={valueMin}
       aria-valuemax={valueMax}
-      style={
-        {
-          '--width': inWidth,
-          '--height': inHeight,
-        } as React.CSSProperties
-      }
       {...other}
     >
       {width && height ? (
diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx
index a3ade5908780..4bb282b55f60 100644
--- a/packages/x-charts/src/LineChart/LineHighlightElement.tsx
+++ b/packages/x-charts/src/LineChart/LineHighlightElement.tsx
@@ -43,11 +43,11 @@ const HighlightElement = styled('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: LineHighlightElementOwnerState }>({
-  transform: `translate(var(--x)px, var(--y)px)`,
-  transformOrigin: `var(--x)px var(--y)px`,
-  fill: 'var(--color)',
-});
+})<{ ownerState: LineHighlightElementOwnerState }>(({ ownerState }) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color,
+}));
 
 export type LineHighlightElementProps = LineHighlightElementOwnerState &
   Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>;
@@ -82,14 +82,6 @@ function LineHighlightElement(props: LineHighlightElementProps) {
       cx={0}
       cy={0}
       r={other.r === undefined ? 5 : other.r}
-      style={
-        {
-          ...other.style,
-          '--x': x,
-          '--y': y,
-          '--color': color,
-        } as React.CSSProperties
-      }
       {...other}
     />
   );
diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
index 7a9ceb4733d4..137f44f252b7 100644
--- a/packages/x-charts/src/LineChart/MarkElement.tsx
+++ b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -54,9 +54,9 @@ const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: MarkElementOwnerState }>(({ theme }) => ({
+})<{ ownerState: MarkElementOwnerState }>(({ ownerState, theme }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  stroke: 'var(--color)',
+  stroke: ownerState.color,
   strokeWidth: 2,
 }));
 
@@ -120,13 +120,10 @@ function MarkElement(props: MarkElementProps) {
   return (
     <MarkElementPath
       {...other}
-      style={
-        {
-          transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-          transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
-          '--color': color,
-        } as unknown as React.CSSProperties
-      }
+      style={{
+        transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+        transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
+      }}
       ownerState={ownerState}
       className={classes.root}
       d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
index e319b40fff66..2ea1f0f81c9a 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx
@@ -9,9 +9,9 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 export const ResizableContainer = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container',
-})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>({
-  width: 'var(--width, 100%)',
-  height: 'var(--height, 100%)',
+})<{ ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'> }>(({ ownerState }) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
   flexGrow: 1,
@@ -23,4 +23,4 @@ export const ResizableContainer = styled('div', {
     width: '100%',
     height: '100%',
   },
-});
+}));
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index 38208e40b381..5293e22ae886 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -24,15 +24,7 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai
     useResponsiveChartContainerProps(props, ref);
 
   return (
-    <ResizableContainer
-      {...resizableChartContainerProps}
-      style={
-        {
-          '--width': resizableChartContainerProps.ownerState.width,
-          '--height': resizableChartContainerProps.ownerState.height,
-        } as React.CSSProperties
-      }
-    >
+    <ResizableContainer {...resizableChartContainerProps}>
       {hasIntrinsicSize ? <ChartContainer {...chartContainerProps} /> : null}
     </ResizableContainer>
   );