Skip to content

Built in way to handle dark / light mode on prerender #477

Description

@andrewbabbittdev

I may be missing a doc page or something, but I could not find a built in way to do this.

Is there any way to apply the users preferred theme on a prerender / first load?

If the default is light mode, but the user has swapped to dark mode on a previous session; the page will briefly flash light mode before swapping to dark mode after everything is loaded (Blazor Server global rendering).

I saw the readme had a link to a render mode guide:

Important: A routed page's layout inherits the page's render mode. If you use per-page interactivity (e.g. because some auth pages must stay static for HttpContext), MainLayout renders statically — so buttons, theme toggles, and providers placed in it won't respond. In that case, render the interactive layout chrome (and BbPortalHost / BbToastProvider / BbDialogProvider) as interactive islands with @rendermode. See the Render Modes guide for the full pattern.

However the link is dead.

So the question ends up being:

How do I get it to prerender with the users preferred theme, the ideal way would be using HttpContext with a cookie; but the theme value is stored in local storage. It would be nice to have a built in way to handle this / documentation on it.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions