×

iFour Logo

Configuration and Theme customization in Blazor material UI

Kapil Panchal - April 15, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
 Configuration and Theme customization in Blazor material UI

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:

blazor image

Figure: Project Template

Want to build scalable applications for your business? Hire React developer from us right now.

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:


 ...
				
				

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:



				 
				 

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");
build.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
build.Services.AddServices();
await builder.Build().RunAsync();
}
				
				

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)
onfiguration = 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:



Welcome to Code-Maze Shop
    
Blazor UI Material design.



Feel free to

visit our shop

any time you want.


products image for the Home component

@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.

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
@if (_isLightMode) { } else { }
@Body

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 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 1. Blazor Material UI Project Creation and Mudblazor Installation 2. Adding service registration and base theme component 3. Creating a home component and using Mudtext, MudPaper, and Mudlink parts 4. Theme customization with Blazor Material UI 5. Conclusion Blazor Material UI Project Creation and Mudblazor Installation Let's create a new Blazor WebAssembly standalone project and start with the name BlazorMaterialUI: Figure: Project Template Want to build scalable applications for your business? Hire React developer from us right now. Reach out us 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: ... 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: 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"); build.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); build.Services.AddServices(); await builder.Build().RunAsync(); } 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) onfiguration = new MudServicesConfiguration(); return services .AddMudBlazorDialog() AddMudBlazorSnackbar(configuration.SnackbarConfiguration) .AddMudBlazorResizeListener(configuration.ResizeOptions) .AddMudBlazorScrollManager() .AddMudBlazorScrollListener() .AddMudBlazorDom(); } Read More: What Is Blazor Web Assembly? 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: Welcome to Code-Maze Shop Blazor UI Material design. Feel free to visit our shop any time you want. @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 ASP.Net Developer? ? Enquire Today 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 @if (_isLightMode) { } else { } @Body 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.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

MySQL vs Azure SQL Database: Cost, Security, and Compatibility Considerations
MySQL vs Azure SQL Database: Cost, Security, and Compatibility Considerations

This blog is a continuation of MySQL vs Azure SQL Database – Part 1 , where we compared MySQL and Azure SQL databases. We learned how important it is to identify and evaluate client...

Is It Worth Using Azure With Power Platforms For Financial Business?
Is It Worth Using Azure With Power Platforms For Financial Business?

The era of traditional software development is fading; Azure Cloud and Power Platform services are taking charge to run businesses of the new age. When it comes to Financial business,...

Microsoft Power BI And PowerApps Development: Transforming The Healthcare Sector
Microsoft Power BI And PowerApps Development: Transforming The Healthcare Sector

If someone had told you just a few years ago that you’d soon develop mobile apps without writing a single line of code, you might not have believed them. Yes, or no? Today, over 7...