ThemeProvider

Theme

Context provider for theme management with dark mode, color scheme switching, and CSS variable injection

Basic Setup

Wrap your application with ThemeProvider at the root level.

import { ThemeProvider } from 'saha-ui';

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
      <YourAppContent />
    </ThemeProvider>
  );
}

export default App;

With Theme Toggle

Current Theme Demo

Try clicking the theme toggle button above!

Glass Card

This card demonstrates the glass morphism effect in both themes.

PrimarySuccessWarning

Bordered Card

Notice how colors adapt to the current theme automatically.

Using Theme in Components

Access theme state in your custom components using the useColorMode hook.

import { useColorMode } from 'saha-ui';

function MyComponent() {
  const { colorMode, setColorMode } = useColorMode();
  
  return (
    <div>
      <p>Current theme: {colorMode}</p>
      <button onClick={() => setColorMode('dark')}>
        Dark Mode
      </button>
      <button onClick={() => setColorMode('light')}>
        Light Mode
      </button>
    </div>
  );
}

Framework Integration

Next.js App Router

// app/layout.tsx
import { ThemeProvider } from 'saha-ui';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Vite + React

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'saha-ui';
import App from './App';

ReactDOM.createRoot(
  document.getElementById('root')!
).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Usage Guidelines

When to Use

App root
Theme management
Color scheme switching

Accessibility

Theme changes announced
Respects user preferences

Performance

CSS variables for theming
No re-renders for theme access

Common Mistakes

Not wrapping entire app
Multiple ThemeProviders

Frequently Asked Questions

ThemeProvider manages theme context with dark mode, color schemes, and CSS variable injection.

Yes, ThemeProvider can persist theme choice to localStorage.

View on GitHub

See the full source code on GitHub

Related Components

View all

ThemeToggle

Theme switcher component with light/dark/system modes and persistent storage