0

I've been experimenting around a lot with the MudBlazor Library lately. I'm pretty happy with it and considering to use it in my next project. But currently I have a issue that confuses me.

To make the issue easier replicable, I created a new and clean demo solution in Blazor WASM ('ASP.NET Core Hosted' checkbox checked). In the client sided project, I installed the default MudBlazor Package and made all relevant code additions according to the documentation to make the library work.

I added the relevant MudTheme-Code to the MainLayout.razor-File, which in simplified terms currently looks like this:

@using MudBlazor;

@inherits LayoutComponentBase

<MudThemeProvider @ref="@_mudThemeProvider" IsDarkMode="true" />

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private MudThemeProvider _mudThemeProvider;
}

Now the issue is that the DarkMode of the MudTheme works as intended, but only for the content inside the MainBody. The top-row (which I want to use as a header row for additional features) doesn't initially get applied after loading the page:

enter image description here

So I've tried to comment out the background-color line in the .top-row class of the MainLayout.razor.css-File, which doesn't seem to change anything, even after restarting the application.

enter image description here

Only when changing a line in the MainLayout.razor.css-File (even if it is just a comment) while the background-color line is also removed, then the top-row will also be in the dark-mode. enter image description here

I can only guess why the application behaves like that. I've tried several ideas and googled around, but I wasn't able to find a solution for this.

So my two questions here are:

  1. Why does the dark-theme have a conflict with the white background color in the css of the top-row, but not the rest of the application (body content of all pages)?
  2. Why does the dark-theme not get applied to the top-row, unless I make a change in the MainLayout's css-File, even if it just a comment? What can I do to get the dark theme working after the initial rendering?

Let me know if you need any additional files or code from the solution.

Thanks!

Stefan
  • 25
  • 4

1 Answers1

1

This seems to me a cache problem.
You have several options:

RafBorrelli
  • 196
  • 6
  • You're right, when loading the page in another browser such as Chrome, or in the incognito mode of my main browser (Firefox), it works perfectly fine. It turns out one of my Extensions caused this issue. Thank you! – Stefan Feb 14 '23 at 18:11