Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Configuration and Theme customization in Blazor material UI


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

BlazormaterialUI

In this blog, we will learn how to integrate MudBlazor within the Blazor WebAssembly app, and thus create a Material UI Blazor project. We won't just learn about Blazor WebAssembly itself. If you're not familiar with Blazor WebAssembly, we strongly suggest reading our Blazor WebAssembly series article. There, you can learn everything you need to develop the great Blazor WebAssembly app.

If you would like to learn more about Blazor WebAssembly, we strongly recommend visiting the articles in our Blazor WebAssembly series, where you can also read about Blazor WebAssembly Development, Authentication, Authorization, JSInterop, and other topics.

Table of Content

Blazor Material UI Project Creation and Mudblazor Installation

Let's create a new Blazor WebAssembly standalone project and start with the name BlazorMaterialUI:

ai-Hiring-banner

Figure: Project Template

Once the creation is complete, we will install the Mudblazor library required for content UI components:

PM> Install-Package MudBlazor -Version 5.0.6

As soon as the installation is finished, we must add the required using the directive inside the _Imports.razor file:

@using MudBlazor

Mudblazor also relies on predefined CSS and fonts, we've to add these references within the index.html file:


<head>
    ...
    <link href="BlazorMaterialUI.styles.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:200,500,600,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head>


In addition, to support components that require JavaScript functionality, we must add a reference to the MudBlazor.min.js file in the index html:

In the documentation, we found a recommendation to remove the bootstrap.min.css file and also all the styles from the app.css file. This should be done if we create a new blazor project, which we do.

   

That said, let's take away the Bootstrap folder - since it alone contains bootstrap.min.css file - From the wwwroot folder:

Also, we have safely removed the bootstrap.min.css reference from our index.html file since we don’t need it anymore:


<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />


Adding service registration and base theme component

All we want to do now is register all the necessary services for Mudblazor components. We can do this in the program class:


public static async Task Main (string [] args)
{
    var build= WebAssemblyHostBuilder.CreateDefault(args);
build.RootComponents.Add<app>(&quot;#app&quot;);
build.Services.AddScoped(sp =&gt; new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    build.Services.AddServices();
    await builder.Build().RunAsync();
}
</app>

For this method, we need to add a new one using the directive:

using MudBlazor.Services;

As you'll see, we can only register all the required services by calling the AddServices method. This method includes registration of all other essential services for MudBlazorDialog, MudBlazorSnackbar, etc. We can see this in the implementation of the method:

public static IServiceCollection AddServices(this IServiceCollection services, MudServicesConfiguration configuration = null)
{
    if (configuration == null)
        configuration = new MudServicesConfiguration();
    return services
        .AddMudBlazorDialog()
        .AddMudBlazorSnackbar(configuration.SnackbarConfiguration)
        .AddMudBlazorResizeListener(configuration.ResizeOptions)
        .AddMudBlazorScrollManager()
        .AddMudBlazorScrollListener()
        .AddMudBlazorDom();
}

In addition, we can see that the service configuration is set by default, but if we want, we can use another overload of this method to add our own custom configuration:

For the purpose of this project, we will leave the default configuration using only the parameterless AddServices method.

To complete the configuration process, we will be going to modify the MainLayout.razor component by adding the base theme component provider at the end of the file:

MudThemeProvider />

We are only using the MudThemeProvider component as it is required for Mudblazor. Of course, there are additional component providers such as or , but we'll include this as soon as we need them.

Creating a home component and using Mudtext, MudPaper, and Mudlink parts

The first issue we will be going to do is to create a new Components folder within the new Home.razor .

Now, let's modify the Home.razor file to create our home page:


<MudText Align="Align.Center" Typo="Typo.h4" Color="Color.Primary">
   Welcome to Code-Maze Shop
    <br /> Blazor UI Material design.
</MudText>
<MudPaper Elevation="3" Class="my-5 py-5">
    <MudText Align="Align.Center">
        Feel free to
        <MudLink Href="https://www.redbubble.com/people/vpecanac/works/44764889-code-maze-merch?asc=u" 
                 Target="_blank" Typo="Typo.h5">
            visit our shop
        </MudLink>
        any time you want.
    </MudText>
</MudPaper>
<p style="text-align:center;" >
    <img src="/assets/CodeMazeShopImage.png" alt="products image for the Home component" />
</p>
@code {
}

Let's explain this code.

First, we have to use the MudText component to show our welcome text on the page. In that component, we use some attributes. With the align attribute, we focus our text on the page. Using the Typo attribute, we specify that we want to render this text as the H4 element. Also, with the color attribute, we specify the color of the text. On the official typography documents, you can read more about Typo and align values.

After that, we use the MudPaper component, which represents the single box because of the wrapper around the material. With the elevation attribute, we specify the shadow around the box, and with the class attribute, we will add our classes. In this example, we use predefined distance classes for margin-top and bottom (my) and padding-top and bottom (py). Both are set to 20px. you'll read the documents for a lot of clarification about colors, elevation, and distance. We also use the MudLink component, to show a link on the page.

 

Looking to Hire Dedicated ASP.Net Developer ?

Contact Now.

 

Theme customization with Blazor Material UI

If you remember, in order to make the MudThemeProvider components work properly, we use the MudBlazor component in the MainLayout.razor file. This theme supplier provides all default colors, sizes, shapes, and shadows for content elements. Also, we can use it to create a custom theme in our project.

To do that, we will modify our MainLayout.razor file:


@inherits LayoutComponentBase
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <div class="main">
        <div class="top-row px-3">
            @if (_isLightMode)
            {
                <MudIconButton Icon="@Icons.Material.Filled.Brightness4" OnClick="@ToggleTheme" />
            }
            else
            {
                <MudIconButton Icon="@Icons.Material.Filled.Brightness5" OnClick="@ToggleTheme" />
            }
        </div>
        <div class="content px-3">
            @Body
        </div>
    </div>
</div>
<MudThemeProvider Theme="_currentTheme" />

Here, we conditionally render the icons using the MudIconButton component. To select an icon, we use the icon property, and we also use the OnClick event to trigger theme switching.

Finally, we have modified the MudThemeProvider part by adding a value for the theme property.

Instead, let's add the @code part to the same file:

@code {
    private bool _lightMode = true;
    private MudTheme _currentTheme = new MudTheme();
    private void ToggleTheme()
    {
        _lightMode = !_lightMode ;
        if(!_lightMode )
        {
            _currentTheme = GenerateDarkTheme();
        }
        else
        {
            _currentTheme = new MudTheme();
        }
    }
    private MudTheme GenerateDarkTheme() => 
        new MudTheme
        {
            Palette = new Palette()
            {
                Black = "#27282f",
                Background = "#32343d",
                BackgroundGrey = "#27282f",
                Surface = "#373840",
                TextPrimary = "#ffffffb2",
                TextSecondary = "rgba(255,255,255, 0.50)"
            }
        };
}

First, we state that the default mode is the light mode and the current theme is the default theme. Then, within the ToggleTheme method, we change the present value of the _lightMode variable. If the value is incorrect, we generate a dark theme setting for the _currentTheme variable, otherwise, we set its value to the default theme. In the GeneratedDark theme method, we create a new dark theme configuration.

Conclusion

So, in this article, we learned how to integrate Mudblazor with the new Blazor WebAssembly app to create a material UI design for our app. In addition, we've learned more about the different content components and how to use the MudThemeProvider provider to customize content themes.

Configuration and Theme customization in Blazor material UI

BlazormaterialUI

In this blog, we will learn how to integrate MudBlazor within the Blazor WebAssembly app, and thus create a Material UI Blazor project. We won't just learn about Blazor WebAssembly itself. If you're not familiar with Blazor WebAssembly, we strongly suggest reading our Blazor WebAssembly series article. There, you can learn everything you need to develop the great Blazor WebAssembly app.

If you would like to learn more about Blazor WebAssembly, we strongly recommend visiting the articles in our Blazor WebAssembly series, where you can also read about Blazor WebAssembly Development, Authentication, Authorization, JSInterop, and other topics.

Table of Content

Blazor Material UI Project Creation and Mudblazor Installation

Let's create a new Blazor WebAssembly standalone project and start with the name BlazorMaterialUI:

ai-Hiring-banner

Figure: Project Template

Once the creation is complete, we will install the Mudblazor library required for content UI components:

PM> Install-Package MudBlazor -Version 5.0.6

As soon as the installation is finished, we must add the required using the directive inside the _Imports.razor file:

@using MudBlazor

Mudblazor also relies on predefined CSS and fonts, we've to add these references within the index.html file:


<head>
    ...
    <link href="BlazorMaterialUI.styles.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:200,500,600,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head>


In addition, to support components that require JavaScript functionality, we must add a reference to the MudBlazor.min.js file in the index html:

In the documentation, we found a recommendation to remove the bootstrap.min.css file and also all the styles from the app.css file. This should be done if we create a new blazor project, which we do.

   

That said, let's take away the Bootstrap folder - since it alone contains bootstrap.min.css file - From the wwwroot folder:

Also, we have safely removed the bootstrap.min.css reference from our index.html file since we don’t need it anymore:


<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />


Adding service registration and base theme component

All we want to do now is register all the necessary services for Mudblazor components. We can do this in the program class:


public static async Task Main (string [] args)
{
    var build= WebAssemblyHostBuilder.CreateDefault(args);
build.RootComponents.Add<app>(&quot;#app&quot;);
build.Services.AddScoped(sp =&gt; new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    build.Services.AddServices();
    await builder.Build().RunAsync();
}
</app>

For this method, we need to add a new one using the directive:

using MudBlazor.Services;

As you'll see, we can only register all the required services by calling the AddServices method. This method includes registration of all other essential services for MudBlazorDialog, MudBlazorSnackbar, etc. We can see this in the implementation of the method:

public static IServiceCollection AddServices(this IServiceCollection services, MudServicesConfiguration configuration = null)
{
    if (configuration == null)
        configuration = new MudServicesConfiguration();
    return services
        .AddMudBlazorDialog()
        .AddMudBlazorSnackbar(configuration.SnackbarConfiguration)
        .AddMudBlazorResizeListener(configuration.ResizeOptions)
        .AddMudBlazorScrollManager()
        .AddMudBlazorScrollListener()
        .AddMudBlazorDom();
}

In addition, we can see that the service configuration is set by default, but if we want, we can use another overload of this method to add our own custom configuration:

For the purpose of this project, we will leave the default configuration using only the parameterless AddServices method.

To complete the configuration process, we will be going to modify the MainLayout.razor component by adding the base theme component provider at the end of the file:

MudThemeProvider />

We are only using the MudThemeProvider component as it is required for Mudblazor. Of course, there are additional component providers such as or , but we'll include this as soon as we need them.

Creating a home component and using Mudtext, MudPaper, and Mudlink parts

The first issue we will be going to do is to create a new Components folder within the new Home.razor .

Now, let's modify the Home.razor file to create our home page:


<MudText Align="Align.Center" Typo="Typo.h4" Color="Color.Primary">
   Welcome to Code-Maze Shop
    <br /> Blazor UI Material design.
</MudText>
<MudPaper Elevation="3" Class="my-5 py-5">
    <MudText Align="Align.Center">
        Feel free to
        <MudLink Href="https://www.redbubble.com/people/vpecanac/works/44764889-code-maze-merch?asc=u" 
                 Target="_blank" Typo="Typo.h5">
            visit our shop
        </MudLink>
        any time you want.
    </MudText>
</MudPaper>
<p style="text-align:center;" >
    <img src="/assets/CodeMazeShopImage.png" alt="products image for the Home component" />
</p>
@code {
}

Let's explain this code.

First, we have to use the MudText component to show our welcome text on the page. In that component, we use some attributes. With the align attribute, we focus our text on the page. Using the Typo attribute, we specify that we want to render this text as the H4 element. Also, with the color attribute, we specify the color of the text. On the official typography documents, you can read more about Typo and align values.

After that, we use the MudPaper component, which represents the single box because of the wrapper around the material. With the elevation attribute, we specify the shadow around the box, and with the class attribute, we will add our classes. In this example, we use predefined distance classes for margin-top and bottom (my) and padding-top and bottom (py). Both are set to 20px. you'll read the documents for a lot of clarification about colors, elevation, and distance. We also use the MudLink component, to show a link on the page.

 

Looking to Hire Dedicated ASP.Net Developer ?

Contact Now.

 

Theme customization with Blazor Material UI

If you remember, in order to make the MudThemeProvider components work properly, we use the MudBlazor component in the MainLayout.razor file. This theme supplier provides all default colors, sizes, shapes, and shadows for content elements. Also, we can use it to create a custom theme in our project.

To do that, we will modify our MainLayout.razor file:


@inherits LayoutComponentBase
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <div class="main">
        <div class="top-row px-3">
            @if (_isLightMode)
            {
                <MudIconButton Icon="@Icons.Material.Filled.Brightness4" OnClick="@ToggleTheme" />
            }
            else
            {
                <MudIconButton Icon="@Icons.Material.Filled.Brightness5" OnClick="@ToggleTheme" />
            }
        </div>
        <div class="content px-3">
            @Body
        </div>
    </div>
</div>
<MudThemeProvider Theme="_currentTheme" />

Here, we conditionally render the icons using the MudIconButton component. To select an icon, we use the icon property, and we also use the OnClick event to trigger theme switching.

Finally, we have modified the MudThemeProvider part by adding a value for the theme property.

Instead, let's add the @code part to the same file:

@code {
    private bool _lightMode = true;
    private MudTheme _currentTheme = new MudTheme();
    private void ToggleTheme()
    {
        _lightMode = !_lightMode ;
        if(!_lightMode )
        {
            _currentTheme = GenerateDarkTheme();
        }
        else
        {
            _currentTheme = new MudTheme();
        }
    }
    private MudTheme GenerateDarkTheme() => 
        new MudTheme
        {
            Palette = new Palette()
            {
                Black = "#27282f",
                Background = "#32343d",
                BackgroundGrey = "#27282f",
                Surface = "#373840",
                TextPrimary = "#ffffffb2",
                TextSecondary = "rgba(255,255,255, 0.50)"
            }
        };
}

First, we state that the default mode is the light mode and the current theme is the default theme. Then, within the ToggleTheme method, we change the present value of the _lightMode variable. If the value is incorrect, we generate a dark theme setting for the _currentTheme variable, otherwise, we set its value to the default theme. In the GeneratedDark theme method, we create a new dark theme configuration.

Conclusion

So, in this article, we learned how to integrate Mudblazor with the new Blazor WebAssembly app to create a material UI design for our app. In addition, we've learned more about the different content components and how to use the MudThemeProvider provider to customize content themes.