Not able to change primary text color.

[kunalpgithub]

I want to change text color of my heading in blazorise component using theme.

It looks like colors are getting override by boostrap mixing scss.

Here is my code for theme and usage of heading component.

<Blazorise.ThemeProvider Theme="@theme">
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</Blazorise.ThemeProvider>

@code{

    private Theme theme = new Theme
    {
        
        BackgroundOptions = new ThemeBackgroundOptions {
            Primary = "#212336",
            // #FF4A57
        },

        TextColorOptions = new ThemeTextColorOptions {
            Primary = "#FF4A57",
        },
        
    };
}

Here is usage of my theme colors

<Heading Size="HeadingSize.Is1" Color="TextColor.Primary" >
        Skill Sets
    </Heading>

But in browser I don't see this color getting applied, instead if picks up default primary blue color.

I would like to see color applied in theme variable instead of default.

I have also tried overriding class in component css and in global css file, but still its picking default blue color.

Let me know if I am doing anything wrong.

[stsrki]

It seems like a missing !important flag. Should be an easy fix.

[kunalpgithub]

Tried adding important as well, but its not working. Do you mean to add important in theme class, that is also not working.

    private Theme theme = new Theme
    {
        
        BackgroundOptions = new ThemeBackgroundOptions {
            Primary = "#212336",
            // #FF4A57
        },

        TextColorOptions = new ThemeTextColorOptions {
            Primary = "#FF4A57 !important",
        },
        
    };

[stsrki]

Adding it there would not work. It needs to be built with ThemeGenerator.

[kunalpgithub]

is there good document around it, on how to use theme generator?

[stsrki]

ThemeGenerator is not something to be used directly. It is an internal builder that creates CSS styles based on the Theme options. Every Blazorise provider has its own theme generator with its own rules.

[wflouw]

Having the exact same issue. I implemented a Theme using the ThemeProvider as explained in the documentation. I set the Primary value for the TextColorOptions and I get the same behaviour as @kunalpgithub.

private Theme CustomTheme = new Theme
{
    ColorOptions = new ThemeColorOptions
    {
        Primary = ThemeColors.Red.Shades["400"].Value,
        Secondary = ThemeColors.Blue.Shades["400"].Value
    },
    BackgroundOptions = new ThemeBackgroundOptions
    {
        Primary = ThemeColors.Red.Shades["400"].Value,
        Secondary = ThemeColors.Blue.Shades["400"].Value
    },
    TextColorOptions = new ThemeTextColorOptions
    {
        Primary = ThemeColors.Orange.Shades["400"].Value,
        Secondary = ThemeColors.Yellow.Shades["400"].Value
    }
};

I check the values in the developer console (Chrome) and I can clearly see that the value I defined in the ThemeTextColorOptions is correct but is striked through and overridden by the default value.

I could solve the issue by adding the !important value in my app.css but it feels dirty and I think it should work via the the ThemeProvider as described in the documentation.

.text-primary {
    color: #FFA726 !important;
}

[kunalpgithub]

@wflouw in my case, even important is also not working. Difference I see is , you are using material and I am using bootstrap.

[nvassell]

@stsrki How should we include the !important in the theme CSS? I can't get the important tag.

[kunalpgithub]

@nvassell adding style in my index.html with important worked for me. You can try that.

 <style>
        .text-primary {
            color: #FF4A57 !important;
        }
        .nav-link {
            color: #FDFDFD !important;
        }
    </style>

[nvassell]

@kunalpgithub Oh interesting! I haven't tried that yet!

[stsrki]

@nvassell As a workaround use the @kunalpgithub example. In the meantime, I will fix it in the code.