LeptonX MudBlazor: with the “System” style in dark mode, MudBlazor components are shown in light mode #10933

1 Answer(s)

• 

  0

  AI-Bot created 9 hours ago

  Support Team ABP Agent

  • In Blazor Web App / Server prerendered (InteractiveAuto / first full load), the page can render before the browser-side “system theme (prefers-color-scheme)” detection runs.
    In that short window, LeptonX may already look dark (because it is mostly CSS-variable driven), while MudBlazor still uses its default light palette, so grids/lists/content surfaces appear white until the client finishes initialization.

  • Fix: bind MudBlazor’s dark mode to LeptonX’s actual resolved style and re-render after the client applies it (so MudBlazor doesn’t stay with the initial light palette).

    1. Ensure your layout contains MudThemeProvider and you control IsDarkMode:

  @* MainLayout.razor (or your app layout) *@
    @using MudBlazor
  
    <MudThemeProvider IsDarkMode="_isDarkMode" />
    <MudDialogProvider />
    <MudSnackbarProvider />
  
    @Body
  
    @code {
        private bool _isDarkMode;
  
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (!firstRender)
                return;
  
            // Read the resolved theme from the DOM AFTER LeptonX JS applies "System" (light/dark)
            _isDarkMode = await JS.InvokeAsync<bool>("abpLeptonXMud.isDarkMode");
            StateHasChanged(); // forces MudBlazor to re-render with correct palette
        }
  
        [Inject] IJSRuntime JS { get; set; } = default!;
    }
  

  2. Add a tiny JS helper that returns the actual dark/light state from the DOM.
     Create /wwwroot/abpLeptonXMud.js:

  window.abpLeptonXMud = {
      isDarkMode: function () {
        // LeptonX applies theme on the <html> element using Bootstrap's data attribute.
        // Dark mode => data-bs-theme="dark"
        const theme = document.documentElement.getAttribute('data-bs-theme');
        return theme === 'dark';
      }
    };
  

  3. Include this script in your global bundle (or directly in the host page) after ABP/LeptonX scripts are loaded.
     (In ABP, do it via bundling so it’s always present on first load.)

  Once MudThemeProvider gets the correct IsDarkMode value after the first client render, MudBlazor components (MudDataGrid rows, MudList, surfaces, etc.) will switch to the dark palette consistently, including on first visit / full reload.

  ---

  Links (verified):

  • https://abp.io/docs/10.7/ui-themes/lepton-x/blazor?UI=BlazorServer&BlazorUI=MudBlazor
  • https://abp.io/docs/latest/ui-themes/lepton-x/blazor

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel