Customization - LumexUI

LumexUI provides a flexible, CSS-first theming system that lets you customize component styling through global CSS variables. These variables can be overridden globally or scoped to specific themes using selectors such as classes or data attributes.

Global theme

To override the default design tokens globally, define your CSS variables inside the :root selector. These values will apply to the entire application.

CSS variables inside the :root selector represent the light theme.

globals.css

:root {
    --lumex-default: var(--color-zinc-950);
    --lumex-default-foreground: var(--color-white);
    --lumex-radius-medium: .25rem;
}

.dark {
    --lumex-default: var(--color-zinc-200);
    --lumex-default-foreground: var(--color-black);
}

Custom themes

Custom themes can be defined using CSS selectors such as classes or data attributes. Components within elements that match these selectors will automatically use the overridden variables.

As an example, a custom theme named orange can be created by defining these CSS variables:

orange.css

.theme-orange {
    --lumex-primary: var(--color-orange-600);
    --lumex-primary-foreground: var(--color-white);
    --lumex-focus: var(--color-orange-600);
}

.theme-orange:is(.dark *) {
    --lumex-primary: var(--color-orange-500);
    --lumex-primary-foreground: var(--color-white);
    --lumex-focus: var(--color-orange-500);
}

Applying a theme at runtime can be done by toggling the class on a wrapper element like <html> or <body>.

App.razor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="app.css" rel="stylesheet" />
</head>
<body class="theme-orange">
    <!-- Some content -->
</body>
</html>

Global theme

Custom themes

On this page