Theming

Dark mode

Adding dark mode support to the application.

Global dark mode

LumexUI supports both light and dark modes. To enable dark mode globally, simply add the dark class to a wrapper element such as html or body.

App.razor
<!DOCTYPE html>
<html class="dark">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="app.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/LumexUI/js/LumexUI.js" type="module"></script>
    <!-- other scripts -->
</body>
</html>

Theme toggling

LumexUI offers a simple theme-switching mechanism made up of two key parts:

  • A theme provider component that sets the initial theme on first load.
  • A theme service that enables dynamic theme changes at runtime.

Add the theme provider

Insert the LumexThemeProvider into your MainLayout.razor file:

MainLayout.razor
<LumexThemeProvider @rendermode="@InteractiveWebAssembly" />

Add a mode toggle

Add a mode toggle to the UI for switching between light and dark modes.

@using LumexUI.Shared.Icons

@inject ThemeService ThemeService

<LumexDropdown Placement="@PopoverPlacement.BottomEnd"
               Class="min-w-32">
    <LumexDropdownTrigger>
        <LumexButton Variant="@Variant.Outlined"
                     Class="min-w-10 w-10 h-10 p-0">
            <MoonIcon Size="20" class="hidden dark:block" />
            <SunIcon Size="20" class="dark:hidden" />
        </LumexButton>
    </LumexDropdownTrigger>
    <LumexDropdownMenu Variant="@MenuVariant.Flat">
        <LumexDropdownItem OnClick="@(async () => await ThemeService.SetThemeAsync( Theme.Light ))">
            Light
        </LumexDropdownItem>
        <LumexDropdownItem OnClick="@(async () => await ThemeService.SetThemeAsync( Theme.Dark ))">
            Dark
        </LumexDropdownItem>
        <LumexDropdownItem OnClick="@(async () => await ThemeService.SetThemeAsync( Theme.System ))">
            System
        </LumexDropdownItem>
    </LumexDropdownMenu>
</LumexDropdown>
An unhandled error has occurred. Reload 🗙