css variable diagram or explanation

Hi, I have found it confusing which variable affects which aspect of the toast container. The names are kind of explicit but my assumptions weren't always right. For instance, I want to change the background color but I am using a theme. Do I use `--toastify-color-dark` or `--toastify-toast-background`.

I think it would be super helpful to label an image with what is where or at least add some comments to https://fkhadra.github.io/react-toastify/how-to-style/#override-css-variables to generally explain what they affect. Or add the variables to the playground so we can fool with them there to see what they do?