[Skeleton] Invisible against a dark background

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Skeleton component only supports one rendering colour, and if placed over a dark background is invisible.

Motivation 🔦

I am using a text variant Skeleton on a dark grey background, but it can’t be viewed. It would be nice if it supported a light variant.

I’m not sure if this is best done through a dark/light toggle, or perhaps through the color property? In my use case it is a child of an AppBar so could perhaps support color="inherit" to
know that I’m using a dark AppBar as other child components do.

[Sinan-private]

I don’t think using a Mui Component in a dark theme is a niche use case. I am currently having the same issue.

[oliviertassinari]

A demo of how the customization can be done in v5:

import * as React from "react";
import Box from "@material-ui/core/Box";
import Skeleton from "@material-ui/core/Skeleton";

export default function Variants() {
  return (
    <Box sx={{ bgcolor: "#000", p: 8 }}>
      <Skeleton sx={{ bgcolor: "grey.900" }} variant="text" />
      <Skeleton
        sx={{ bgcolor: "grey.900" }}
        variant="circular"
        width={40}
        height={40}
      />
      <Skeleton
        sx={{ bgcolor: "grey.900" }}
        variant="rectangular"
        width={210}
        height={118}
      />
    </Box>
  );
}

https://codesandbox.io/s/variants-material-demo-forked-5xfd6?file=/demo.tsx:0-556