AathifMahir.Maui.MauiTheme.BlazorHybrid 0.1.0-preview

Prefix Reserved
This is a prerelease version of AathifMahir.Maui.MauiTheme.BlazorHybrid.
There is a newer version of this package available.
See the version list below for details.
dotnet add package AathifMahir.Maui.MauiTheme.BlazorHybrid --version 0.1.0-preview                
NuGet\Install-Package AathifMahir.Maui.MauiTheme.BlazorHybrid -Version 0.1.0-preview                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="AathifMahir.Maui.MauiTheme.BlazorHybrid" Version="0.1.0-preview" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add AathifMahir.Maui.MauiTheme.BlazorHybrid --version 0.1.0-preview                
#r "nuget: AathifMahir.Maui.MauiTheme.BlazorHybrid, 0.1.0-preview"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install AathifMahir.Maui.MauiTheme.BlazorHybrid as a Cake Addin
#addin nuget:?package=AathifMahir.Maui.MauiTheme.BlazorHybrid&version=0.1.0-preview&prerelease

// Install AathifMahir.Maui.MauiTheme.BlazorHybrid as a Cake Tool
#tool nuget:?package=AathifMahir.Maui.MauiTheme.BlazorHybrid&version=0.1.0-preview&prerelease                

Maui Theme Blazor Hybrid

MauiTheme Blazor Hybrid is Extension of Vanilla MauiTheme Library Where it Provides Access the MauiTheme Without Any Maui Artifacts Inside a Razor Class Library

Disclaimer: You need to have MauiTheme Library Installed on Your Maui Project and InitializeTheme() Method is Called in App.xaml.cs

Get Started

In Order to Initialize the MauiTheme Blazor Hybrid, You need to call UseMauiThemeHybrid() in program.cs like below example

using MauiTheme.BlazorHybrid;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        // Initializing MauiTheme on Blazor Hybrid Project by Sharing the Instance of MauiTheme
        builder.Services.UseMauiThemeHybrid(MauiTheme.Default);

        return builder.Build();
    }
}

If your using WebAssembly or Any Other Blazor Hosting Model, Where your sharing a razor class library within those and Blazor Hybrid

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.UseMauiThemeBlazor();

Theme

When it comes to Switching Theme, You can change the CurrentTheme Property to Switch the Theme Like Below Example

@inject IMauiThemeHybrid MauiThemeHybrid

// Dark
MauiThemeHybrid.CurrentTheme = MauiAppTheme.Dark;

// Light
MauiThemeHybrid.CurrentTheme = MauiAppTheme.Light;

// System
MauiThemeHybrid.CurrentTheme = MauiAppTheme.UnSpecified;

Resources

When it comes to Switching Resource, You can use CurrentResource Property to Swap the Resources Like Below Example, Make sure to Note that Resources is Applied Using The Key that you have passed into InitializeTheme Resources Property


@inject IMauiThemeHybrid MauiThemeHybrid

// Pass in your resource key that assigned in Maui Project
MauiThemeHybrid.CurrentResource = "Blue";

Listening to Theme or Resource Changes

This is mainly useful when listening to Theme or Resource Changes from External Sources for Instance from Maui, as you can see in the below example, we are invoking StateChanged() method in MauiThemeContext, Basically What that Says is Refresh the Razor Component Whenever Theme Changes


@inject IMauiThemeHybrid MauiThemeHybrid
@implements IDisposable

<title>Theme</title>

<h3>Theme</h3>
<InputRadioGroup Name="Theme" TValue="MauiAppTheme" @bind-Value="MauiThemeHybrid.CurrentAppTheme">
    @foreach (var item in (MauiAppTheme[])Enum.GetValues(typeof(MauiAppTheme)))
    {
        <InputRadio Name="Theme" TValue="MauiAppTheme" value="@item"/>
         @item
        <br/>
    }
</InputRadioGroup>

<br />

<h3>Color</h3>
<InputRadioGroup TValue="string" @bind-Value="MauiThemeHybrid.CurrentResource">
    <InputRadio TValue="string" value="Blue"/>Blue<br/>
    <InputRadio TValue="string" value="Purple"/>Purple<br/>
    <InputRadio TValue="string" value="Yellow"/>Yellow<br/>
    <InputRadio TValue="string" value="Green"/>Green<br />
</InputRadioGroup>


@code{
    MauiThemeContext? themeContext;

    protected override void OnInitialized()
    {
        themeContext = MauiThemeContext.Create(MauiThemeHybrid, () => StateHasChanged());

        base.OnInitialized();
    }

    public void Dispose()
    {
        themeContext?.Dispose();
    }
}

License

MauiTheme is Licensed Under MIT License.

Contribute and Credit

Credits for @taublast for Helping with Resource Creation.

If you wish to contribute to this project, please don't hesitate to create an issue or request. Your input and feedback are highly appreciated. Additionally, if you're interested in supporting the project by providing resources or becoming a sponsor, your contributions would be welcomed and instrumental in its continued development and success. Thank you for your interest in contributing to this endeavor.

For More Information and Complete Docs, Visit the repo
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.5.0 197 1/21/2024
0.1.0-preview 121 1/16/2024

v0.1.0-preview
• Blazor Hybrid Support