From 13d8ba07744e3c539e826e3bd0fe1e6da4ff3f00 Mon Sep 17 00:00:00 2001
From: DiegoAndai <diego@mui.com>
Date: Fri, 20 Dec 2024 16:14:59 -0300
Subject: [PATCH] Fix examples

---
 .../css-theme-variables/configuration.md        | 17 +++++++++--------
 .../customization/css-theme-variables/usage.md  |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
index 161e6f417f6b89..61b3d935a07be7 100644
--- a/docs/data/material/customization/css-theme-variables/configuration.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -136,26 +136,27 @@ If you have such a condition, replace it with the [`theme.applyStyles()` functio
  function App() {
    return (
      <Card
--       sx={(theme) => ({
+-      sx={(theme) => ({
 -        backgroundColor: theme.palette.mode === 'dark' ? '#000' : '#fff',
 -        '&:hover': {
 -          backgroundColor: theme.palette.mode === 'dark' ? '#333' : '#f5f5f5',
 -        },
 -      })}
-+       sx={(theme) => [
-+          {
-+            backgroundColor: '#fff',
-+            '&:hover': {
-+              backgroundColor: '#f5f5f5',
-+            },
++      sx={[
++        {
++          backgroundColor: '#fff',
++          '&:hover': {
++            backgroundColor: '#f5f5f5',
 +          },
++        },
++        (theme) =>
 +          theme.applyStyles('dark', {
 +            backgroundColor: '#000',
 +            '&:hover': {
 +              backgroundColor: '#333',
 +            },
 +          }),
-+        ]}
++      ]}
      />
    );
  }
diff --git a/docs/data/material/customization/css-theme-variables/usage.md b/docs/data/material/customization/css-theme-variables/usage.md
index b421d5e402dba2..fffc1c2b67e96d 100644
--- a/docs/data/material/customization/css-theme-variables/usage.md
+++ b/docs/data/material/customization/css-theme-variables/usage.md
@@ -62,7 +62,7 @@ import Card from '@mui/material/Card';
     }),
     (theme) =>
       theme.applyStyles('dark', {
-        backgroundColor: theme.vars.palette.grey[50],
+        backgroundColor: theme.vars.palette.grey[900],
       }),
   ]}
 />;