diff --git a/docs/pages/experiments/material-ui/fab.tsx b/docs/pages/experiments/material-ui/fab.tsx
new file mode 100644
index 00000000000000..cd2647ef28402c
--- /dev/null
+++ b/docs/pages/experiments/material-ui/fab.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+import Fab from '@mui/material/Fab';
+import Stack from '@mui/material/Stack';
+
+const ColorSchemePicker = () => {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+    >
+      {mode === 'light' ? <Moon /> : <Sun />}
+    </Button>
+  );
+};
+
+export default function CssVarsTemplate() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <Stack spacing={2} direction="row">
+            <Fab />
+            <Fab color="secondary" />
+            <Fab color="success" />
+            <Fab color="error" />
+            <Fab color="info" />
+            <Fab color="warning" />
+            <Fab color="inherit" />
+          </Stack>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
index acc3a359041116..acc10ea5a7771c 100644
--- a/packages/mui-material/src/Fab/Fab.js
+++ b/packages/mui-material/src/Fab/Fab.js
@@ -50,28 +50,30 @@ const FabRoot = styled(ButtonBase, {
     minWidth: 0,
     width: 56,
     height: 56,
-    zIndex: theme.zIndex.fab,
-    boxShadow: theme.shadows[6],
+    zIndex: (theme.vars || theme).zIndex.fab,
+    boxShadow: (theme.vars || theme).shadows[6],
     '&:active': {
-      boxShadow: theme.shadows[12],
+      boxShadow: (theme.vars || theme).shadows[12],
     },
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
+    color: theme.vars
+      ? theme.vars.palette.text.primary
+      : theme.palette.getContrastText?.(theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
     '&:hover': {
-      backgroundColor: theme.palette.grey.A100,
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette.grey[300],
+        backgroundColor: (theme.vars || theme).palette.grey[300],
       },
       textDecoration: 'none',
     },
     [`&.${fabClasses.focusVisible}`]: {
-      boxShadow: theme.shadows[6],
+      boxShadow: (theme.vars || theme).shadows[6],
     },
     [`&.${fabClasses.disabled}`]: {
-      color: theme.palette.action.disabled,
-      boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.action.disabledBackground,
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
     },
     ...(ownerState.size === 'small' && {
       width: 40,
@@ -112,14 +114,14 @@ const FabRoot = styled(ButtonBase, {
   ({ theme, ownerState }) => ({
     ...(ownerState.color !== 'inherit' &&
       ownerState.color !== 'default' &&
-      theme.palette[ownerState.color] != null && {
-        color: theme.palette[ownerState.color].contrastText,
-        backgroundColor: theme.palette[ownerState.color].main,
+      (theme.vars || theme).palette[ownerState.color] != null && {
+        color: (theme.vars || theme).palette[ownerState.color].contrastText,
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
         '&:hover': {
-          backgroundColor: theme.palette[ownerState.color].dark,
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
-            backgroundColor: theme.palette[ownerState.color].main,
+            backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
           },
         },
       }),