I'm searching for an idea to overwrite the css filepath in the "_Host" file to make it dynamically (belongs to which domain was used to come to the Blazor Web page).
Using Server Side Blazor with dotnet core 3.0
Has anyone an idea how to overwrite the CSS while runtime?
Thx!
See the commented example code below. Basically, in the code (inline in _host.cshtml or better in a helper class) determine, which css file you want to use based on current URL. Then link the corresponding css stylesheet in <head>.
_Host.cshtml:
@page "/"
@namespace TestServerSideBlazor20191125.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
// sniff the domain, adjust as needed
string domainName = Request.Host.Host;
// determine the name of the css file based on the domain
string cssFile = domainName switch
{
"my.domain.com" => "StyleBlue.css",
"localhost" => "StyleGreen.css",
_ => "StyleDefault.css"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TestServerSideBlazor20191125</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
@*link the css file using the cssFile variable defined earlier*@
<link href="css/@cssFile" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Edit Oct 14, 2020: .NET 5 (Release Candidate now) will have a support for controlling the content of the head element. See https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/#influencing-the-html-head-in-blazor-apps
