Question: I am trying to figure out how I can **change the colors in a Blazor application which uses MatBlazor** to create a Blazor application using Google's Material Design.

I have created a new project in Visual Studio using the Blazor WebAssembly project. I've added the MatBlazor NuGet package, made the necessary changes to add the MAtBlazor css and js files.

Then I replaced the content of Index.razor to include a MatBlazor component:

```
@page "/"

<MatAppBarContainer>
    <MatAppBar Class="main-app-bar" Fixed="true">
        <MatAppBarRow>
            <MatAppBarSection>
                <MatIconButton Icon="menu"></MatIconButton>
                <MatAppBarTitle>MatBlazor - Material Design components for Blazor</MatAppBarTitle>
            </MatAppBarSection>
            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
                <MatIconButton Icon="favorite"></MatIconButton>
            </MatAppBarSection>
        </MatAppBarRow>
    </MatAppBar>

    <MatAppBarContent>
        Content
    </MatAppBarContent>
</MatAppBarContainer>

```

Now as an exercise I want to change the background and text color of the MatAppBar:

```
.main-app-bar {
    background-color: red;
    color: gold;
}

```

or

```
.mdc-top-app-bar {
    background-color: red;
    color: gold;
}

```

I've added these CSS class definitions to both app.css as well as MainLayout.razor.css and NavMenu.razopr.css to no avail.

**How can I set CSS properties for MatBlazor components?**

Answer: 
There is no need for css editing, you can simply use the MatThemeProvider service:
<https://www.matblazor.com/Themes>

This will change the color scheme for your entire app, which is recommended since you are using Material design.
I have found 2 ways to make this happen:

Include the .mdc-XXX settings in the .razor file as a element:

```
<style>
.mdc-top-app-bar {
    background-color: red;
    color: gold;
}
</style>

```

or

create a new CSS file and include it last in index.html.