Theming

Stable

Omnira UI uses CSS custom properties for theming. Switch between dark and light mode with a single data attribute.

How It Works

Theme is controlled by a data-theme attribute on the HTML element. All CSS custom properties automatically switch values based on this attribute.

html
<!-- Dark mode (default) -->
<html data-theme="dark">

<!-- Light mode -->
<html data-theme="light">

Theme Provider

Use the built-in React Context provider to manage theme state. It persists the user's preference in localStorage.

tsx
// lib/theme-context.tsx
import { useTheme } from "@/lib/theme-context";

function MyComponent() {
    const { theme, toggleTheme, setTheme } = useTheme();

    return (
        <button onClick={toggleTheme}>
            Current: {theme}
        </button>
    );
}

Smooth Transitions

All themed properties include a 0.4s transition for smooth switching between modes. This is applied globally on the body element.

css
body {
    transition: background 0.4s ease, color 0.4s ease;
}