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

Question

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.

Answer 1

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;
}