Add support CSS variables

docs/pages/experiments/material-ui/image-list-item-bar.tsx

@@ -0,0 +1,98 @@
+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 ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import ImageListItemBar from '@mui/material/ImageListItemBar';
+import ListSubheader from '@mui/material/ListSubheader';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+
+const itemData = [
+  {
+    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    title: 'Breakfast',
+    author: '@bkristastucchio',
+    rows: 2,
+    cols: 2,
+    featured: true,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
+    title: 'Burger',
+    author: '@rollelflex_graphy726',
+  },
+];
+
+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 FormControlLabelCssVars() {
+  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',
+            },
+          }}
+        >
+          <ImageList>
+            <ImageListItem key="Subheader" cols={2}>
+              <ListSubheader component="div">December</ListSubheader>
+            </ImageListItem>
+            {itemData.map((item) => (
+              <ImageListItem key={item.img}>
+                <img
+                  src={`${item.img}?w=248&fit=crop&auto=format`}
+                  srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+                  alt={item.title}
+                  loading="lazy"
+                />
+                <ImageListItemBar title={item.title} subtitle={item.author} />
+              </ImageListItem>
+            ))}
+          </ImageList>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

packages/mui-material/src/ImageListItemBar/ImageListItemBar.js

@@ -72,7 +72,7 @@ const ImageListItemBarTitleWrap = styled('div', {
   return {
     flexGrow: 1,
     padding: '12px 16px',
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     overflow: 'hidden',
     ...(ownerState.position === 'below' && {
       padding: '6px 0 12px',