Oqtane MudBlazor Theme

[Sharafudeen]

Hi,

I'm trying to create a MudBlazor theme for Oqtane but it is not working. Please find the below code,

@namespace MudBlazor.Theme.Elegant
@inherits ThemeBase
@inject ISettingService SettingService

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

<MudLayout>
    <MudMainContent>
        <Pane Name="@PaneNames.Admin" />
        <Pane Name="Content" />
    </MudMainContent>
</MudLayout>

@code {
    public override string Name => "MudBlazor Default";
    public override string Panes => PaneNames.Admin + ", Content";
}

[leigh-pointer]

@Sharafudeen are you using the MudBlazor Templates from the Oqtane Marketplace. If not, I would suggest installing to you development environment. The MudBlazor Templates will scaffold Modules and Themes for Oqtane implementing the MudBlazor component.

[leigh-pointer]

Your markup has to be in the theme that you have created. When you build the theme you need to select it in your site settings so that the theme renders.

If you open the theme solution in the default.razor file is where you build your theme with menus and content panes.

[Sharafudeen]

@leigh-pointer

I've created subsite and set my custom mudblazor theme as shown in this screenshot.

My custom mudblazor theme project structure as show in this screenshot.

Any other changes or setup I've to do in my custom theme?

[Sharafudeen]

@leigh-pointer @sbwalker Html/Text module is not rendering MudBlazor's markup. I've created MudBlazor module for Oqtane and added to the page then it is working.

[Sharafudeen]

Theme.razor

@namespace GetAppGo.Theme.MudTheme
@using Oqtane.Shared
@using Oqtane.Themes
@using Oqtane.Themes.Controls
@using Oqtane.UI

@inherits ThemeBase

<MudThemeProvider Theme="_theme" IsDarkModeChanged="OnToggledChanged" DefaultScrollbar="true" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@MudBlazor.Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">GetAppGo</MudText>
        <MudSpacer />
        <MudToggleIconButton ToggledChanged="OnToggledChanged" Style="color: var(--mud-palette-text-primary) !important" Icon="@MudBlazor.Icons.Material.Filled.DarkMode" ToggledIcon="@MudBlazor.Icons.Material.Filled.LightMode" />
        <UserProfile /> <Login /> <ControlPanel />
    </MudAppBar>
    <MudDrawer Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        NavMenu
    </MudDrawer>
    <MudMainContent Class="px-0 mx-0">
        @if (!PageState.Page.Url.EndsWith("/mudblazor") && !PageState.Page.Url.EndsWith("/home") && !PageState.Page.Url.EndsWith("Home"))
        {
            <Pane Name="@PaneNames.Admin" />
        }
        else
        {
            <LandingPage />
        }
    </MudMainContent>
</MudLayout>

Theme.razor.cs (code-behind)

using Microsoft.AspNetCore.Components;
using MudBlazor;
using Oqtane.Services;
using Oqtane.Shared;
using Oqtane.Themes;

namespace GetAppGo.Theme.MudTheme;

public partial class Theme : ThemeBase
{
    [Inject] ISettingService SettingService { get; set; }

    public override string Name => "Theme";

    public override string Panes => PaneNames.Admin + ",Top Full Width,Top 100%,Left 50%,Right 50%,Left 33%,Center 33%,Right 33%,Left Outer 25%,Left Inner 25%,Right Inner 25%,Right Outer 25%,Left 25%,Center 50%,Right 25%,Left Sidebar 66%,Right Sidebar 33%,Left Sidebar 33%,Right Sidebar 66%,Bottom 100%,Bottom Full Width";

    private bool _login = true;
    private bool _register = true;

    protected override void OnParametersSet()
    {
        try
        {
            var settings = SettingService.MergeSettings(PageState.Site.Settings, PageState.Page.Settings);
            _login = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Login", "true"));
            _register = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Register", "true"));
        }
        catch
        {
            // error loading theme settings
        }
    }

    bool IsDarkMode = true;
    bool _drawerOpen = false;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
    public void OnToggledChanged(bool toggled)
    {
        IsDarkMode = !toggled;
    }

    MudBlazor.MudTheme _theme = new MudBlazor.MudTheme()
    {
        LayoutProperties = new LayoutProperties()
        {
            DefaultBorderRadius = $"12px"
        },
    };
}

@leigh-pointer MudIconButton OnClick="@((e) => DrawerToggle())" and change events such as MudToggleIconButton ToggledChanged="OnToggledChanged" and IsDarkModeChanged="OnToggledChanged" are not working.

[maurocavallin]

Seems your events are not wired: maybe you're using the wrong Render Mode? in case try change to Interactive.