Customize Theme

Overview

In LumexUI, the theme system provides flexibility with two sub-themes: Light and Dark. Both sub-themes share the same structure, allowing you to seamlessly customize your application’s appearance.

Each sub-theme consists of 2 key configurations:

• Layout Configuration
• Colors Configuration

Customizing Layout

The layout configuration allows you to control typography, border radius, shadows, and opacities for various states like hover, focus, and disabled.

Suppose you require a smaller border radius, and more opaque disabled elements across all themes. You can achieve this by overriding the default LayoutConfig.

record MyTheme : LumexTheme
{
    public MyTheme()
    {
        var layoutConfig = new LayoutConfig()
        {
            DisabledOpacity = 0.4,
            Radius = new BaseScale()
            {
                Sm = "0.125rem",
                Md = "0.25rem",
                Lg = "0.375rem"
            }
        };

        Light = new ThemeConfigLight
        {
            Layout = layoutConfig
        };

        Dark = new ThemeConfigDark
        {
            Layout = layoutConfig
        };
    }
}

As LumexUI components employ LayoutConfig properties, the modifications will be reflected across all components that utilize them.

For instance, the Button component exposes the Radius parameter to set the border radius and the Disabled parameter to set the appropriate opacity and disable interactions when it is disabled.

<div class="flex flex-col gap-4">
    <LumexButton Radius="@Radius.Medium">
        Custom
    </LumexButton>

    <LumexButton Radius="@Radius.Medium"
                 Disabled="@true">
        Custom
    </LumexButton>
</div>

Customizing Colors

The colors configuration allows you to control semantic colors.

Now, let's say you wish to modify the primary and focus colors of the light theme. You can achieve this by overriding the default ThemeColors.

record MyTheme : LumexTheme
{
    public MyTheme()
    {
        Light = new ThemeConfigLight()
        {
            Colors = new ThemeColorsLight()
            {
                Primary = new ColorScale( Colors.Orange ),
                Focus = new ColorScale( Colors.Orange["500"] ) // #f97316
            }
        };
    }
}

Just like with the layout, the modifications will be reflected across all components that utilize them.

For instance, the Button component exposes the Color parameter to set the background color when its variant is set to Solid.

<div class="flex flex-col gap-4">
    <LumexButton Color="@ThemeColor.Primary">
        Custom
    </LumexButton>

    <LumexButton Color="@ThemeColor.Primary"
                 Variant="@Variant.Outlined">
        Custom
    </LumexButton>
</div>