Theme provider

import { ThemeProvider } from '@raystack/apsara';

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

import { ThemeProvider } from '@raystack/apsara';

<ThemeProvider
  defaultTheme="dark"
  storageKey="my-app-theme"
  style="modern"
  accentColor="indigo"
  grayColor="slate"
>
  {/* Your app */}
</ThemeProvider>

<ThemeProvider
  themes={['light', 'dark', 'custom']}
  defaultTheme="light"
  enableSystem={false}
>
  {/* Your app */}
</ThemeProvider>

import { ThemeProvider, ThemeSwitcher } from '@raystack/apsara';

function App() {
  return (
    <ThemeProvider>
      <header>
        <ThemeSwitcher size={24} />
      </header>
      {/* Your app content */}
    </ThemeProvider>
  );
}

import { useTheme } from '@raystack/apsara';

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

  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Resolved theme: {resolvedTheme}</p>
      <p>System theme: {systemTheme}</p>
      
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
      <button onClick={() => setTheme('system')}>System</button>
    </div>
  );
}

<ThemeProvider forcedTheme="dark">
  {/* This section will always use dark theme */}
</ThemeProvider>

<ThemeProvider disableTransitionOnChange>
  {/* Theme changes will not trigger CSS transitions */}
</ThemeProvider>