How Change background Color in MudAppBar to Linear Background Color & how center MudText in MudAppBar

Question

How Change background Color in MudAppBar to Linear Background Color How center MudText in MudAppBar

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>

    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h4"  Class="ml-3">My Application</MudText>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Docked" Elevation="2">
        <NavMenu/>
    </MudDrawer>
    
    <MudMainContent>        
        <MudContainer MaxWidth="MaxWidth.ExtraLarge">
            @Body
        </MudContainer>
    </MudMainContent>

</MudLayout>
@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

How Change background Color in MudAppBar to Linear Background Color How center MudText in MudAppBar

Answer 1

To center MudText in MudAppBar:

<div class="d-flex justify-center" style="width: 100vw;">
    <MudText Width Typo="Typo.h4" Class="ml-3">My Application</MudText>
</div>

To change background color of MudAppBar:

<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider />
<MudSnackbarProvider />

@code {

    private MudTheme _currentTheme = new MudTheme()
    {
        Palette = new Palette
        {
            AppbarBackground = "#e43652",
        },
    };
}

Changing to linear gradient background for MudAppBar in MudBlazor theme is not available, instead we can use inline styling. Check out more about this issue at https://github.com/MudBlazor/MudBlazor/issues/4216#issuecomment-1075173555

<MudAppBar Elevation="1" Style="background-image: linear-gradient( 109.6deg,  rgba(0,182,255,1) 11.2%, rgba(102,51,153,1) 91.1% );">

Example Code:

@inherits LayoutComponentBase

<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    
    <MudAppBar Elevation="1" Style="background-image: linear-gradient( 109.6deg,  rgba(0,182,255,1) 11.2%, rgba(102,51,153,1) 91.1% );">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <div class="d-flex justify-center" style="width: 100vw;">
            <MudText Width Typo="Typo.h4" Class="ml-3">My Application</MudText>
        </div>
        <MudSpacer/>
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Docked" Elevation="2">
        <NavMenu/>
    </MudDrawer>

    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" class="mt-10 mb-10">
            @Body
        </MudContainer>
    </MudMainContent>

</MudLayout>

@code {

    private readonly MudTheme _currentTheme = new()
    {
    // Palette = new Palette
    // {
    //     AppbarBackground = "#e43652",
    // },
    };

    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

Output