[Skeleton] Invisible against a dark background

[mattmcdonald-uk]

• [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.

[oliviertassinari]

@mattmcdonald-uk I would recommend customizing the CSS in userland in such a case.

[mattmcdonald-uk]

OK - perhaps this is a fairly niche use case.

[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.

[albertocevallos]

@oliviertassinari running to the same issue, is there an official work around this (besides using a spinner 🙃) ?

Couldn't find anything in the other issues reporting the same.

What classes would I use to customize this?

[albertocevallos]

Update:

This fixed it: https://material-ui.com/customization/components/#overriding-styles-with-classes

[oliviertassinari]

@Sinan-private Do you have a visual illustration? I don't understand the case we are considering. If the theme in the context is dark, the Skeleton will adapt accordingly.

[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

[the-wrong-guy]

maybe you should add this in the API docs, also there is no mention of the prop sx in the docs, why?

[oliviertassinari]

@the-wrong-guy Adding a new demo for this sounds great. Do you want to do so? :) The sx prop is documented under the system section.

[the-wrong-guy]

@the-wrong-guy Adding a new demo for this sounds great. Do you want to do so? :) The sx prop is documented under the system section.

Well, I don't how to add a new demo to the official docs, if you can lead me I can follow.

And when I tested the sx prop which you showed in your demo didn't work for me, I am using @material-ui/core": "^4.11.0 and @material-ui/lab": "^4.0.0-alpha.57", it only works for the alpha versions, not for the stable versions i.e. up to Ver: 14.11.3

[oliviertassinari]

@the-wrong-guy the sx prop is a v5 only feature. Regarding contributing, you should get all you need in https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md.

[the-wrong-guy]

@the-wrong-guy the sx prop is a v5 only feature. Regarding contributing, you should get all you need in https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md.

Should I add an issue regarding the intensity of the pulses of the skeleton? It would be good if you add a prop to control the intensity and color of the pulses

[oliviertassinari]

@the-wrong-guy this is unrelated, it's a generic customization question.

[the-wrong-guy]

@the-wrong-guy this is unrelated, it's a generic customization question.

Yeah, but i can't able figure out how to apply styles to those skeletons to increase it's intensity and flashing color

[md-abdul-halim-rafi]

I did an workaround overriding MuiSkeleton-root like this:

import React from "react";

import { makeStyles } from "@material-ui/core/styles";
import { Skeleton } from "@material-ui/core";

const useStyles = makeStyles(({
    root: {
        "&.MuiSkeleton-root": {
            backgroundColor: "#9e9e9e",
        }
    }
}));

export default function LoadingSkeleton() {
    const classes = useStyles();

    return (
        <Skeleton
            variant="text"
            width={200}
            className={classes.root}
        />
    );
}

[oliviertassinari]

The new demo in the documentation: https://next.material-ui.com/components/skeleton/#color

[szuvi]

For anyone looking for a more visible animation in the Skeleton when changing background color and having a dark background, here is what worked for me:

listItemSkeleton: {
    bgcolor: 'grey.600',
    '&.MuiSkeleton-root:after': {
      background: (theme) => `linear-gradient(90deg,transparent,${theme.palette.grey[400]},transparent)`,
    },
  }