Calling Javascript from a SSR Page Blazor .NET core – Blancer.com Tutorials and projects

I have a .NET 8 Core Blazor page with Authentication. My App.razor contains the following html and code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Macondo&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="" id="userStylesheet" data-permanent />
    <link rel="stylesheet" href="css/CardFlip.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/cutealert.css" />
    <link rel="stylesheet" href="css/fontawesome.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <HeadOutlet @rendermode="RenderModeForPage" />
</head>

<body>
    <Routes @rendermode="RenderModeForPage" />

    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="js/all.min.js"></script>
    <script src="js/Jquery.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/ShowModal.js"></script>
    <script src="js/cute-alert.js"></script>
    <script src="js/jspdf.min.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/html2pdf.bundle.min.js"></script>
    <script src="_framework/blazor.server.js"></script>

</body>

</html>

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

    private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
        ? null
        : InteractiveServer;
}

I have a global theme I am trying to apply to all of my pages and I do that with a javascript function.

function ChangeStyleSheet(newSheet) {
    var linkTag = document.getElementById('userStylesheet');
    linkTag.href = newSheet;
}

The problem is that I cannot seem to call this function when I am rendering in SSR. That is anytime I load in a page from /Account, it renders SSR. Other pages render in Interactive Server. I can easily call the javascript function using JSRuntime when rendered in Interactive server.

I found a microsoft page which discusses Javascript in SSR where it seems to create a component called PageScript and another js module which you create which I am unsure its purpose. Yet I still do not see in that example how I am supposed to call ChangeStyleSheet from an SSR page.

Does anyone have a solution? If I need to add more information, please let me know and I will certainly add it.