How to use TextPrimary, TextSecondary color values in MudBlazor theme Palette

Viewed 403

I am using MudBlazor and it provides a way to manage themes by defining the MudTheme. e.g

MudTheme MyCustomTheme = new MudTheme()
{
  Palette = new Palette()
  {
     Primary = Colors.Blue.Default,
     Secondary = Colors.Blue.Default,
     AppbarBackground = "#FFFFFF",
     TextPrimary = "#000000",
     TextSecondary = "#FFFFFF",
  }
};

Setting TextPrimary color will set the provided value to scss variable --mud-palette-text-primary but not apply it to MudText component.

Problem: I am setting TextPrimary and TextSecondary in Palette but when I use the MudBlazor text component it doesn't apply the colors I provided.

<MudText Typo="Typo.h5">Application</MudText>

Note: MudText has a property Color which takes Color enum value but Color enum does't have a TextPrimary Value.

Color enum provided by MudBlazor

public enum Color
    {
        Default = 0,
        Primary = 1,
        Secondary = 2,
        Tertiary = 3,
        Info = 4,
        Success = 5,
        Warning = 6,
        Error = 7,
        Dark = 8,
        Transparent = 9,
        Inherit = 10,
        Surface = 11
    }

also if I set Color to primary like this

<MudText Typo="Typo.h5" Color="Color.Primary">Application</MudText>

it applies a css class .mud-primary-text or .mud-secondary-text based on parameter i passed, but inside these class they use --mud-palette-primary or --mud-palette-secondary scss variable instead of --mud-palette-primary-textor--mud-palette-secondary-text`

.mud-primary-text {
    color: var(--mud-palette-primary) !important; // it should use --mud-palette-primary-text 
}

.mud-secondary-text {
    color: var(--mud-palette-secondary) !important; // it should use --mud-palette-secondary-text 
}

At first, I thought by setting Color field to Primary MudText component will use TextPrimary value and other component will use Primary Value so I created a PR with a possible fix but they rejected it that it is like this by design. you can check it here https://github.com/MudBlazor/MudBlazor/pull/4451.

For now I have solved the problem by overriding the classes.

.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

now is it a bug or my misunderstanding? looks like a bug to me.

Note After debugging I found out that if you use HTML headings or paragraph tags it'll apply colors define in Palette but if use MudText component it'll not work because it applies .mud-primary-text class which set color to --mud-palette-primary so the way to solve this problem is to override the classes and set color to right scss variables, like i have showed above.

1 Answers

For now, I have solved it by the below line of css

.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}
Related