MWC Snackbar: CSS variable for background color

[maicol07]

Is your feature request related to a problem? Please describe.
Can't change the background color of a snackbar.
For example, the standard snackbar is great for dark themes, but not on light ones

Describe the solution you'd like
Support snackbar theming (css variable for background color)

Describe alternatives you've considered
It's possible to do this only with JS at the moment

[dfreedm]

Thanks for the issue!

[veller]

@maicol07 out of curiosity: how are you handling it with JS?

[maicol07]

@veller at the moment you have only two possibilities:

• Extending the webcomponent and then add the background color (recommended):

import {Snackbar as MWCSnackbar} from '@material/mwc-snackbar`;
import {css} from 'lit';

class Snackbar extends MWCSnackbar {
	static styles = [MWCSnackbar.styles, css`.mdc-snackbar__surface { background-color: white }`]
}
window.customElements.define('snack-bar', Snackbar);
// ^^ You can choose any element tag you like

• Traverse the shadow root to change the color manually (might not work):

document.getElementsByTagName('mwc-snackbar')[0].shadowRoot.firstElementChild.firstElementChild.style['background-color'] = 'white'