Llamachant.ExpressApp.Module.Blazor.UI 25.2.9.3

Llamachant.ExpressApp.Module.Blazor.UI

Part of the Llamachant Framework - a set of reusable modules for DevExpress eXpressApp Framework (XAF) applications.

Overview

Llamachant.ExpressApp.Module.Blazor.UI is a collection of UI specific elements including themes and custom components that are very custom.

Setup

Register the module in your Blazor.Server app's AddXaf(...) builder chain. Add a theme from the catalog (LlamachantUIThemes) to register its presets (plus the runtime custom accent) in the theme switcher — one switcher group per theme, no appsettings.json edits needed:

builder.Modules
    // ... your other modules ...
    .AddLlamachantFrameworkBlazorUIModule(o =>
    {
        o.Themes.Add(LlamachantUIThemes.SciFi, t => t.DefaultTheme = "Aqua");   // startup theme optional
    });

Or register a theme independently of the module options, anywhere you have the service collection (e.g. after AddXaf(...)):

builder.Services.AddLlamachantFrameworkBlazorUITheme(LlamachantUIThemes.SciFi, t => t.DefaultTheme = "Aqua");

Both merge with any theme groups already in appsettings.json. To configure the presets by hand instead, add a non-Fluent group whose items load _content/Llamachant.ExpressApp.Module.Blazor.UI/css/llamachant-sf/llamachant-sf.{core,overrides,hud,variant-*}.min.css.

Customizing the presets

Themes.Add(theme, configure) exposes a mutable Presets list (pre-filled with the theme's shipped variants — Aqua / Blue / Steel / Green for SciFi) and the GroupCaption. Rename items, recolor their swatches, reorder, remove, or replace them entirely:

.AddLlamachantFrameworkBlazorUIModule(o =>
{
    o.Themes.Add(LlamachantUIThemes.SciFi, t =>
    {
        t.GroupCaption       = "Acme Themes";    // rename the switcher group
        t.Presets[0].Caption = "Ocean";          // rename Aqua
        t.Presets.RemoveAt(3);                   // drop Green
        t.Presets.Add(new("Tennis", "#dfff4f")); // NEW colored theme — Color drives it, no CSS file
        t.DefaultTheme       = "Ocean";          // optional startup theme
    });
});

Adding a colored theme

To add a theme in a new color, register a preset with just a caption and a hex — no CSS file needed. The Color drives the entire theme: the accent engine reads it (carried as an ?accent= parameter on the theme stylesheet link) at page load, before first paint, and derives the full color ramp from it.

t.Presets.Add(new("Tennis", "#dfff4f"));   // VariantFile omitted => Color-driven

The derived theme normalizes the accent's lightness, so a very light/dark Color renders more saturated than the raw swatch (e.g. #dfff4f → roughly #c9e222). Pick the hex that matches the accent you want.

Pinning a baked stylesheet (optional). Set VariantFile to use a specific pre-built file instead — one of the shipped llamachant-sf.variant-{aqua|blue|steel|green}.min.css, or one you bake yourself with the included generator. A baked file renders its color even with JavaScript disabled (the color-driven path needs the accent script):

node tools/generate-variant.js "#dfff4f" tennis
# -> wwwroot/css/llamachant-sf/llamachant-sf.variant-tennis.min.css

t.Presets.Add(new("Tennis", "#dfff4f", "llamachant-sf.variant-tennis.min.css"));

The runtime accent picker

There is no dedicated "Custom" preset. Instead, when the theme's AllowThemeColorPicker is true the script injects a "Custom Color" picker into the theme-switcher flyout. Picking a color tints whichever theme is currently active and stores the choice in the lct-sf-accent cookie (so it survives reloads). Selecting any theme swatch clears the tint and shows that theme as-is.

llamachant-sf.variant-custom.min.css is the shared base that color-driven presets load (with ?accent= appended). It carries a full variable set baked from the picker's default hex (#8a6bff), so a color-driven preset still renders a coherent theme before the script runs. Keep this file — it is required whenever you use color-driven presets.

Requirements

• .NET 8.0 and higher
• DevExpress XAF v25.1 or later (Blazor)
• The DevExpress.Blazor.Themes.Fluent assets (standard in XAF Blazor templates)

License

This package is distributed under the MIT License. Note: While the NuGet package is free to use, the source code is not open source.

Support & Contact

Need help or want to learn more about our tools and services? Visit www.llamachant.com/docs or contact us.

Llamachant Technology Ltd. Expert consulting and solutions for DevExpress XAF developers.