viniciusmiguel/thememanager

ThemeManager built to showcase MudBlazor theming.

Theme Manager / Generator for MudBlazor

Blazor Theme Manager component for MudBlazor. You can use it to try out different theme settings during development quickly and easily.

Use in production at your own risk. 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 index.html (client-side) or _Host.cshtml (server-side) in the head

<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" />

Add the following inside your @code for MainLayout.razor

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

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

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

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

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"></MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" ClipMode="_themeManager.DrawerClipMode" Elevation="_themeManager.DrawerElevation"></MudDrawer>