Configuration and Theme customization in Blazor material UI

@using MudBlazor
				

 ...
				
				

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

using MudBlazor.Services;				
				

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

MudThemeProvider 
				

Welcome to Code-Maze Shop
    
Blazor UI Material design.



Feel free to

visit our shop

any time you want.




@code {
}
				
				

@inherits LayoutComponentBase



@if (_isLightMode)
{

}
else
{

}

@Body

@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)"
}
};
}			  
			  

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.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.