Input Components: Add Color property for theming

Feature request type

Enhance component

Component name

MudTextField & MudThemeProvider

Is your feature request related to a problem?

I am working on a form that needs to be customizable, I need to be able to change the color of the --mud-palette-primary so that when i focus on the textfield it has the appropriate color. This works fine for my first buy form: But there is another form for selling where i want to set the colors to red and they are both in the same component. I initially tried changing this using css only by setting the --mud-palette-primary variable to the color I wanted in my :root and it works perfect, so I used this approach on my second form using the MudTextField Style property to change the variable value but this leaves my label the original color on focus.

<MudTextField Value="@Limit" T="string" ValueChanged="LimitChanged" Label="Limit" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" Immediate="true" Style=":root{--mud-palette-primary: #c90000 !important;}" />

Then i tried editing the pseudoCSS for focus and active to try and hit the label color but that didnt work either, I am guessing that the label is set using the DOM or something i dont know.

.mud-input:focus .mud-input-text:focus {
    color: var(--green-text); /* Your desired style for focused placeholder */
}
.mud-input:focus .mud-input-text:active {
    color: var(--green-text); /* Your desired style for focused placeholder */
}

So then I moved on to themes...I defined my theme as follows:

public class SellTheme : MudTheme
{
    public Palette palette => new Palette
    {
        Primary = "#c90000",  // Adjust primary color as needed
        Secondary = "#c90000", // Adjust secondary color as needed
        TextPrimary = "#c90000",        // Set desired text color here
        TextSecondary = "#c90000",      // Adjust secondary text color
    };
}

and here is my declaration, it is right above where i placed my textfields in the markup:

<MudThemeProvider Theme="@sellTheme"/>

and here is my initialization:

    MudTheme sellTheme = new SellTheme();

I checked to see if the Theme was even working by removing the Style tag from my declaration, and it is still green, so i think there is something wrong with my theme to begin with and I dont know what. I tried changing from Palette to PaletteLight and it doesnt change it. But the fastest option would be if there is some pseudoclass that i am missing that i should edit to get the focused label color to change, or if the label text color is a varariable that i can pass in my Style tag. Other than that, I would really like to be able to use themes in the future...can you see what i am doing wrong here? There has to be a way to do this. If there isnt, id be willing to do a pull request and implement the feature myself. Thank you!

Describe the solution you'd like

I want to be able to change the color of the textfield theme, especially the label, and i want to successfully implement the themeProvider.

Have you seen this feature anywhere else?

no

Describe alternatives you've considered

only other thing i can think of is to use MatTextField instead

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct