Surface palette is used in Card and Input labels

[MihailsKuzmins]

Hello, guys.
Thank you for the awesome material design library.

I'm struggling with theming at the moment. I try to make my cards stand out in comparison to the background and managed to do it with these lines of code:

private readonly MudTheme _light = new()
{
	Palette = new Palette
	{
		Background = "#f2f2f2",
		BackgroundGrey = "#f2f2f2"
	}
};

But I encountered a problem that a label in my input fields don't have the same background as the window background.

Then I set Surface to the same color as the background color of the window and after it <MudCard> had the same color as the background.

private readonly MudTheme _light = new()
{
	Palette = new Palette
	{
		Background = "#f2f2f2",
		BackgroundGrey = "#f2f2f2",
		Surface = "#f2f2f2"
	}
};

Is it possible to make the background color of a <MudCard> different than the window background and keep the input label background the same as the window without writing custom CSS?

[JonBunator]

No that's not possible without css.
But what I suggest is that you change the background color of your container in order to make the card stand out. See example in the docs:

You just have to apply:

background-color: var(--mud-palette-background-grey);

to your container.

[MihailsKuzmins]

even if it possible for the light theme, I would say that the correct solution would be to do something with a Palette of the MudThemeProvider. I am not sure that using the same resource for both Cards and Labels is right

[JonBunator]

I am not sure that using the same resource for both Cards and Labels is right

Well, there is always a tradeoff. If you give every component a property to change the color, it would give you full control to change the colors to your liking. But it also makes it hard to create a new theme because you have to change the color of every component. But I agree with you. In the future we want to change the api in a way that you don't have to rely on css so much.