Theming

X-UI provides a powerful theming system with dark/light mode support and CSS variables.

ThemeProvider

Wrap your app with ThemeProvider to enable theming. It handles theme persistence automatically.

tsx

import { ThemeProvider } from '@xdev-asia/x-ui-react';

function App() {
    return (
        <ThemeProvider 
            defaultTheme="dark"
            storageKey="my-app-theme"
        >
            <YourApp />
        </ThemeProvider>
    );
}

Props

Prop	Type	Default
`defaultTheme`	'light' \| 'dark'	'light'
`storageKey`	string	'x-ui-theme'
`children`	ReactNode	-

useXTheme Hook

Access and control the current theme using the useXTheme hook.

tsx

import { useXTheme } from '@xdev-asia/x-ui-react';

function ThemeToggle() {
    const { mode, toggleMode, setMode } = useXTheme();

    return (
        <div>
            <p>Current: {mode}</p>
            
            {/* Toggle between light/dark */}
            <button onClick={toggleMode}>
                Toggle Theme
            </button>
            
            {/* Set specific mode */}
            <button onClick={() => setMode('dark')}>
                Dark Mode
            </button>
        </div>
    );
}

Returns

themeThemeConfig object with colors and glass tokens
modeCurrent theme mode ('light' | 'dark')
setModeFunction to set specific theme mode
toggleModeFunction to toggle between light/dark

CSS Variables

X-UI uses CSS custom properties for theming. You can use these in your own styles.

css

.my-component {
    /* Colors */
    background: rgb(var(--x-background));
    color: rgb(var(--x-foreground));
    border-color: rgb(var(--x-border));

    /* Primary color */
    accent-color: rgb(var(--x-primary));

    /* Glassmorphism */
    background: var(--x-glass-bg);
    border: 1px solid var(--x-glass-border);
    backdrop-filter: blur(16px);
}

Mode-Specific Styles

Target specific theme modes using CSS class selectors.

css

/* Light mode specific */
.light .my-element {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode specific */
.dark .my-element {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

Navigation