Theme

Small tutorial on how to use themes and styling in LuminX efficiently.

LuminXProvider

The LuminXProvider is the main component that allows you to use themes and styling in LuminX. It is a wrapper that takes a theme prop and passes it to the components that need it.

import { LuminXProvider } from "@luminx/core";

export function Demo() {
    return (
        <LuminXProvider>
            <App />
        </LuminXProvider>
    );
}

Theme Configuration

The theme prop can currently be one of two values: "dark" or "light".

import { LuminXProvider } from "@luminx/core";

const theme = "dark"; // "dark" or "light"

export function Demo() {
    return (
        <LuminXProvider theme={theme}>
            <App />
        </LuminXProvider>
    );
}

Theme Autosave

The theme prop is automatically saved to the browser's local storage and loaded on page load. Only works when the value is true. Default value is true.

import { LuminXProvider } from "@luminx/core";

const theme = "dark"; // "dark" or "light"
const autosave = true; // true or false

export function Demo() {
    return (
        <LuminXProvider theme={theme} themeAutoSave={autosave}>
            <App />
        </LuminXProvider>
    );
}

Light Colors Opacity

The light colors opacity of colors. Default is set to 0.6.

import { LuminXProvider } from "@luminx/core";

const theme = "dark"; // "dark" or "light"
const lightVariantOpacity = 0.6; // 0-1

export function Demo() {
    return (
        <LuminXProvider
            theme={theme}
            lightVariantOpacity={lightVariantOpacity}
        >
            <App />
        </LuminXProvider>
    );
}

Styling

className prop

The key to efficient styling with LuminX is the prop named className. It is used to apply styles to the component using Tailwind CSS classes.

import { Button } from "@luminx/core";

export function Demo() {
    return (
        <Button className="bg-[var(--luminx-blue-5)]">
            Click me
        </Button>
    );
}