How to avoid initial "flash" before theme getting set.

[nhwilly]

I am doing some theme work and I think I have it all figured out for my app's needs. However, I noticed that there is a "flash" of the white page before the theme can be set.

It appears that BitThemeManager isn't ready to go until the OnAfterRenderAsync is called. And that makes sense, since it needs JS and things need to settle down before I can use that.

I came to BitUi from FluentUi and they had a solution for it. Here's how they solved it. If you look at #4 on this page you can see they are simply running the routine immediately.

It works well, but I don't know how any of that would work with BitUi.

I'm already creating a custom version of both the light and dark themes.

I tried an alternative to create a "hidden" theme and set that as the default in the HTML attribute, then in my OnAfterRenderAsync apply theme the user wants to see. I still see the flashing.

Any ideas on how I could solve this?

[msynk]

@nhwilly thanks for contacting us and explaining this issue.
currently, we don't have any specific feature developed for this problem, but one simple thing that you can do is to always use dark theme as the default theme with prerendering enabled, in this way even when switching to light mode at start the flash is less noticeable.

[msynk]

if you don't provide the init call, the BitTheme will use the light theme by default and init the theme. if you don't want to use the BitTheme.init({ ... }) js api, you can use the bit-theme-default html attribute to change the default theme to dark.

[nhwilly]

Ah.

I try to do as little JavaScript as possible. I don't have much confidence there.

I'm not entirely sure where I would make that init call. The Blazor rendering pipeline is confusing to me still.

I'll try the 'bit-theme-default' approach.

At one point I had 'app.razor' inject the theme provider and set it there, but I'm pretty sure I still had the flash.

I took the hiding logic out as you suggested.

Thanks for the pointers.

[nhwilly]

OK, I dug into your examples and then into some AI suggestions.

And I thought I would give the JS approach a try.

Would this be done in App.razor OnInitializedAsync or some other place?

[ysmoradi]

I'm not sure about the right answer, but these are the ways I search in stuffs related to bitplatform:

https://wiki.bitplatform.dev/search/the-cofounder-of-the-project-i_6b2eacef-b6ac-4d5d-ab57-ff002a9e104e

https://grep.app/search?f.repo=bitfoundation%2Fbitplatform&q=BitTheme.init

[msynk]

if you're not happy using js to init the BitTheme it's ok, just go with the html element attribute in the app.razor file (the bit-theme-default). for your needs these two ways have the same result.
but if you're curious about the right place to put this js call, it should be after the bit.blazorui.js script tag in the app.razor. you could open a new script tag and call it right there in the app.razor like this:

<script>
    BitTheme.init({
        default: 'dark',
        ...
    });
</script>

or similar to our own approach put it in a separate file (like app.ts)