How to get a scrollbar like youtube in MUIv5?

Question

I want to get a similar scrollbar to youtube in MUI v5 that supports both light and dark themes. I have seen several answers for this but I am confused how to do it for all browsers and in the best possible way. Some answers only work for certain browsers or use MUI v4.

There was one answer on StackOverflow that showed almost what I wanted, but the issue with this is it is hard-coding the colors into the code - which means it is the same in dark and light mode. I want it to be dynamic based on the theme and look like the youtube scrollbar (with a transparent background)

Please tell me the best possible way to do this in MUI v5.

I found another answer which did support theme aware scrollbar, but I am not sure how to integrate that into my code. The way I am doing theming is I first create a base theme with all the style changes/overrides then I create two themes based on that: light and dark (I am not sure if this is the best way to handle it - if not, please feel free to correct my code below).

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          scrollbarColor: "#6b6b6b #2b2b2b",
          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
            backgroundColor: "#2b2b2b",
          },
          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
            borderRadius: 8,
            backgroundColor: "#6b6b6b",
            minHeight: 24,
            border: "3px solid #2b2b2b",
          },
          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus":
            {
              backgroundColor: "#959595",
            },
          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active":
            {
              backgroundColor: "#959595",
            },
          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover":
            {
              backgroundColor: "#959595",
            },
          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
            backgroundColor: "#2b2b2b",
          },
        },
      },
    },
  },
});

const lightTheme = createTheme({ ...theme, palette: { mode: "light" } });
const darkTheme = createTheme({ ...theme, palette: { mode: "dark" } });

export { lightTheme, darkTheme };

Again, the issue with my code above is that it is not theme aware