DOCSEARCHbyAlgolia
Submit Docs

MudBlazor.ThemeManager

repository·main·Indexed 43 days ago

https://github.com/mudblazor/thememanager

A development tool for MudBlazor applications providing a visual interface to live-test and customize theme settings, including colors, elevations, and dark mode. It includes components like MudThemeManagerButton and MudThemeManager for prototyping theme configurations.

Tokens
994
Snippets
3
Records
3
Agent score
5%

What's inside MudBlazor ThemeManager

  1. Install MudBlazor.ThemeManager

    main

    To use the Theme Manager in your Blazor project, follow these installation steps:

    1. Install the NuGet package via the .NET CLI:
      dotnet add package MudBlazor.ThemeManager
    2. Add the namespace to your _Imports.razor file:
      @using MudBlazor.ThemeManager
    3. Include the required Google Fonts and the Theme Manager CSS in your HTML <head> section (e.g., index.html, _Layout.cshtml, _Host.cshtml, or App.razor):
      <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" />
    dotnet add package MudBlazor.ThemeManager

  2. Sync Theme Manager with MudThemeProvider and Dark Mode

    main

    To ensure the Theme Manager actually updates your application's appearance, you must bind its properties to your MudBlazor components.

    Dark Mode Synchronization

    Bind the IsDarkMode parameter of the MudThemeManager to a variable that is also bound to your MudThemeProvider. This ensures that when you toggle dark mode in the manager, the entire application responds correctly.

    Theme and Component Binding

    Connect the ThemeManagerTheme object to your MudThemeProvider to control colors, and bind specific properties like AppBarElevation, DrawerClipMode, and DrawerElevation to your MudAppBar and MudDrawer components.

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

<MudAppBar Elevation="_themeManager.AppBarElevation">

<MudDrawer @bind-Open="_drawerOpen" ClipMode="_themeManager.DrawerClipMode" Elevation="_themeManager.DrawerElevation">

  3. Implement the Theme Manager in MainLayout.razor

    main

    To enable the theme customization UI, add the MudThemeManagerButton and MudThemeManager components inside your <MudLayout> in MainLayout.razor. You must manage the state for the manager's visibility, the current theme configuration, and dark mode status in your @code block.

    Note: This component is intended for development/prototyping and is currently not recommended for production applications due to potential performance issues and bugs.

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

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