How to add Theme(css files) while using Blazor component as a module in Orchard Core Cms

[hamna-python]

Hi Orchard Community,

I have created an orchard core website with blazor integration, I am using blazor component as a module but I am not able to use theme while using blazor as a module, maybe blazor files overwriting the theme files. kindly check and help us in this regard.

I want to change background color of this page which created from dashboard and want to add styling here, here I am using blazor compoenent as a module, as you can see counter here PFA

Let me kindly let me know if you need more details in this

`using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.DependencyInjection.Extensions;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Options;

namespace OrchardSkills.OrchardCore.OrchardCMS
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddOrchardCms();
        services.TryAddEnumerable(ServiceDescriptor.Singleton<IPostConfigureOptions<StaticFileOptions>, BlazorConfigureStaticFilesOptions>());
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();
        app.UseOrchardCore();
    }
}

}
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;
using Microsoft.Extensions.Options;
using System;
using System.IO;

namespace OrchardSkills.OrchardCore.OrchardCMS
{
public class BlazorConfigureStaticFilesOptions : IPostConfigureOptions
{
private readonly IWebHostEnvironment _environment;
private readonly IHttpContextAccessor _httpContextAccessor;
private const string TenantName = "hamna"; // Name of your tenant

    public BlazorConfigureStaticFilesOptions(IWebHostEnvironment environment, IHttpContextAccessor httpContextAccessor)
    {
        _environment = environment;
        _httpContextAccessor = httpContextAccessor;
    }

    public void PostConfigure(string name, StaticFileOptions options)
    {
        if (name != Options.DefaultName)
        {
            return;
        }

        options.ContentTypeProvider = options.ContentTypeProvider ?? new FileExtensionContentTypeProvider();

        if (IsHamnaTenant())
        {
            var tenantSpecificPath = Path.Combine(_environment.WebRootPath, "Tenants", TenantName);
            if (Directory.Exists(tenantSpecificPath))
            {
                options.FileProvider = new PhysicalFileProvider(tenantSpecificPath);
            }
        }
        else
        {
            options.FileProvider = options.FileProvider ?? _environment.WebRootFileProvider;
            var provider = new ManifestEmbeddedFileProvider(typeof(IServerSideBlazorBuilder).Assembly);
            options.FileProvider = new CompositeFileProvider(provider, options.FileProvider);
        }
    }

    private bool IsHamnaTenant()
    {
        var httpContext = _httpContextAccessor.HttpContext;
        if (httpContext != null)
        {
            var requestPath = httpContext.Request.Path.Value;

            // Check if the URL path contains "hamna" anywhere
            return requestPath.Contains("/hamna", StringComparison.OrdinalIgnoreCase);
        }
        return false;
    }




}

}
`

[ns8482e]

@hamna-python little old sample but should wok on .NET 6 https://github.com/surevelox/OrchardCore.Samples/tree/ns8482e/blazor-wasm/MultiTenantBlazorWasm

[hamna-python]

Hi @ns8482e Thanks for sharing the link.
this is the example of single page application, I was also able to implement blazor with theme for the single page. the issue occurs when i try to implement the blazor module on multi page .
Do you have any example by which we can implement blazor module on multi page application with multi tenants.

[ns8482e]

Theme rendered on serer side and WSAM renders in browser like SPA.
You can render you razor components in multi page application. - however you might need to include blazor js in your Layout.cshtml