React MaterialUIHueOverlay

comp.ts

const useOverlayStyles = makeStyles((theme) => {
  return {
    blended: {
      mixBlendMode: 'hue',
      backgroundColor: theme.palette.primary.main,
      position: 'absolute',
      top: -4, // To include the border
      right: 0,
      bottom: 0,
      left: 0,
      content: ' ',
      zIndex: theme.zIndex.tooltip,
    },
  };
});

export function ThemeOverlay() {
  const classes = useOverlayStyles();
  const theme = useTheme();

  if (theme.name !== 'Caspar') {
    return <Box className={classes.blended} />;
  }

  return null;
}