Any input while in dark mode UI breaks when autofilled

[felixduque]

Basically, when you autofill an input it will change the background to white for that input while in dark mode.

I added the following code to my style.css and it fixed the issue, but just wanted to share. I am not sure if I used the right variables, but it was tested with default theme and dark theme.

Keep in mind this will only fix single line autocomplete, since I am using 50px. Also, maybe use a different color so the user knows what fields were autofilled.

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px var(--mud-palette-surface) inset;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
}

//*** Credit to the original author who suggested that using the box shadow would fix the problem.
https://stackoverflow.com/questions/58263122/google-chrome-autofill-background-color-change

[henon]

Is that something we could/should fix in the main library (MudBlazor)?

[JonBunator]

Is it maybe related to #16
It has already been fixed, but we didn't publish a new release yet

[felixduque]

Is it maybe related to #16 It has already been fixed, but we didn't publish a new release yet

I don't think it is, because in this case the agent css is overriding the components css. Thus, looking like the image I posted in my original post. I don't know if you are considering in fixing it, but I do think this is an issue whenever someone uses your components, and the user uses autofill, it looses the look and feel of dark mode. I am one of those users, because I honestly like your components a lot. I was able to fix it, and here is how I did it. Since I don't have access to be able to add a variable for dark mode and light mode, and keep in mind those are the only two themes I am using, I had to extend your MudThemeProvider.

public class CustomMudThemeProvider : MudThemeProvider
{
    protected override void GenerateTheme(StringBuilder theme)
    {
        base.GenerateTheme(theme);

        if (base.IsDarkMode == true)
        {
            //*** Background color for dark mode autofilled fields. It makes it a little bit darker.
            theme.AppendLine($"--mud-palette-autofill: rgba(0, 0, 0, 0.8);");
        }
        else
        {
            //*** Default background color for autofilled fields
            theme.AppendLine($"--mud-palette-autofill: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4));");
        }
    }
}

Then on the MainLayout.razor I changed it from the MudThemeProvider to CustomMudThemProvider.

<CustomMudThemeProvider @bind-IsDarkMode="_isDarkMode" />

Finally on the css I used that defined color variable for the autofill in the site.css, since it is an issue everywhere. Keep in mind that it only works with autofill fields, which are mostly one line so I used 50px for the box shadow. I couldn't find any other way to use the background-color, it just wouldn't work.

/* Fix autofill agent override */
input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px var(--mud-palette-autofill) inset;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
}

Maybe you can find a more elegant fix, but setting the background-color to something else doesn't work, unsetting the background doesn't work. The box shadow was the only way I could figure out how to override it.

From what I found this only happens in Chrome and Edge.

Thank you!