👁 Image
MudBlazor.ThemeManager 4.0.0

Theme Manager / Generator for MudBlazor

👁 GitHub
👁 Twitter
👁 Nuget version
👁 Discord

Blazor Theme Manager component for MudBlazor library. Can be used live or during development to fast and easy try out different theme settings.

This component is currently not suitable for production applications, be ready for performance issues, bugs and missing features. Feel free to help improve it.

Workflow

Prerequisites

• MudBlazor Installed and configurated.

Installation

Install Package

dotnet add package MudBlazor.ThemeManager

Add the following to _Imports.razor

@using MudBlazor.ThemeManager

Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml/App.razor depending on whether you're running WebAssembly or Server.

<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />

Add the components in your MainLayout.razor and inside <MudLayout>

<MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
<MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" IsDarkMode="@_isDarkMode" />

Add the following inside your @code for MainLayout.razor

private ThemeManagerTheme _themeManager = new ThemeManagerTheme();
private bool _themeManagerOpen = false;
private bool _isDarkMode;

void OpenThemeManager(bool value)
{
 _themeManagerOpen = value;
}

void UpdateTheme(ThemeManagerTheme value)
{
 _themeManager = value;
 StateHasChanged();
}

protected override void OnInitialized()
{
 StateHasChanged();
}

Dark Mode Support

If you need dark mode support, make sure to bind the IsDarkMode parameter to a variable that controls whether your application is in dark mode. This allows the Theme Manager to adjust and display the appropriate palette (light or dark) when you're customizing themes.

The _isDarkMode variable should be synchronized with your MudThemeProvider's IsDarkMode to ensure consistent dark mode behavior across your application:

<MudThemeProvider Theme="_themeManager.Theme" @bind-IsDarkMode="@_isDarkMode" />

Connect the ThemeManagerTheme with MudThemeProvider to control all the theme colors. You can also connect MudAppBar and MudDrawer directly.

<MudThemeProvider Theme="_themeManager.Theme" />
<MudAppBar Elevation="_themeManager.AppBarElevation">
<MudDrawer @bind-Open="_drawerOpen" ClipMode="_themeManager.DrawerClipMode" Elevation="_themeManager.DrawerElevation">