RTB.Blazor.Theme 1.0.4

🎨 RTB.Blazor.Theme

<div align="center"> <strong>Dynamic theming system for Blazor applications</strong><br> <em>Part of the RTB.BlazorUI ecosystem</em> </div>

<div align="center">

</div>

🌟 About

RTB.Blazor.Theme provides a robust theming system for Blazor applications with automatic theme discovery, persistence, and dynamic switching capabilities. It seamlessly integrates with the RTB.BlazorUI component library to provide consistent theming across your entire application.

✨ Key Features

• 🔍 Auto-Discovery - Automatically discovers theme classes implementing ITheme
• 💾 Persistence - Saves theme preferences to localStorage
• ⚡ Dynamic Switching - Change themes at runtime without page refresh
• 🎯 Type-Safe - Strongly-typed theme system with generic constraints
• 🏷️ Attribute-Based - Mark default themes with [Theme(IsDefault = true)]
• 🔧 Easy Setup - Simple dependency injection registration

📦 Installation

<PackageReference Include="RTB.Blazor.Theme" Version="1.0.2" />

🚀 Quick Start

1. Define Your Theme Interface

public interface IMyAppTheme : ITheme
{
    string PrimaryColor { get; }
    string SecondaryColor { get; }
    string BackgroundColor { get; }
}

2. Create Theme Implementations

[Theme(IsDefault = true)]
public class LightTheme : IMyAppTheme
{
    public string Name => "Light";
    public string PrimaryColor => "#0066cc";
    public string SecondaryColor => "#6c757d";
    public string BackgroundColor => "#ffffff";
}

public class DarkTheme : IMyAppTheme
{
    public string Name => "Dark";
    public string PrimaryColor => "#4dabf7";
    public string SecondaryColor => "#adb5bd";
    public string BackgroundColor => "#212529";
}

3. Register the Service

In your Program.cs:

builder.Services.UseRTBTheme(typeof(IMyAppTheme));

4. Add Theme Context

Wrap your app with the theme context in App.razor:

<RTBThemeContext TTheme="IMyAppTheme">
    <Router AppAssembly="@typeof(App).Assembly">
        
    </Router>
</RTBThemeContext>

5. Use Themes in Components

@inject IThemeService<IMyAppTheme> ThemeService

@code {
    [CascadingParameter] private IMyAppTheme Theme { get; set; } = default!;
}

<div style="background-color: @Theme(Service.Current).BackgroundColor; 
           color: @Theme(Service.Current).PrimaryColor">
    <h1>Hello, @Theme(Service.Current).Name Theme!</h1>
    
    <button @onclick="SwitchTheme">Switch Theme</button>
</div>

@code {
    private async Task SwitchTheme()
    {
        var nextTheme = ThemeService.Themes
            .SkipWhile(t => t != ThemeService.Current)
            .Skip(1)
            .FirstOrDefault() ?? ThemeService.Themes.First();
            
        await ThemeService.SetThemeAsync(nextTheme);
    }
}

🏗️ Architecture

Core Components

Theme Discovery

The theme service automatically discovers all classes that:

• Implement your theme interface
• Are concrete classes (not abstract)
• Have a parameterless constructor
• Are loaded in the current AppDomain

Persistence

Themes are automatically persisted to the browser's localStorage using the key "rtbtheme". The theme is restored when the application loads.

Theme-Aware Components

Create components that automatically respond to theme changes:

@implements IDisposable
@inject IThemeService<IMyAppTheme> ThemeService

<div class="themed-component" style="@GetThemedStyles()">
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    
    protected override void OnInitialized()
    {
        ThemeService.OnThemeChanged += StateHasChanged;
    }
    
    private string GetThemedStyles()
    {
        var theme = ThemeService.Current;
        return $"background: {theme.BackgroundColor}; color: {theme.PrimaryColor};";
    }
    
    public void Dispose()
    {
        ThemeService.OnThemeChanged -= StateHasChanged;
    }
}

🔧 API Reference

ITheme

public interface ITheme
{
    string Name { get; }
}

IThemeService<T>

public interface IThemeService<TTheme> where TTheme : ITheme
{
    TTheme Current { get; }
    TTheme Default { get; }
    event Action? OnThemeChanged;
    ValueTask SetThemeAsync(TTheme theme);
    IList<TTheme> Themes { get; }
}

ThemeAttribute

[AttributeUsage(AttributeTargets.Class)]
public class ThemeAttribute : Attribute
{
    public bool IsDefault { get; set; } = false;
}

📄 License

RTB.Blazor.Theme is released under the MIT License.

<p align="center"> <i>Part of the RTB.BlazorUI ecosystem - Crafted with ❤ by a developer who refused to brew</i> </p>