ThemeProvider

Component

Context provider for theme management with dark/light mode support and localStorage persistence.

Installation & Usage

Basic Usage

import { ThemeProvider, useTheme } from 'dotti'

// Wrap your app
<ThemeProvider defaultTheme="light">
  <App />
</ThemeProvider>

// Use in components  
const { themeName, toggleTheme } = useTheme()

Examples

Basic Setup

Wrap your app with ThemeProvider to enable theming.

ThemeProvider should wrap your entire application at the root level.

Current theme: Server-side

Code

import { ThemeProvider } from 'dotti'
import 'dotti/styles.css'

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

Custom Theme

Set a default theme or enable system theme detection.

Options:

defaultTheme - Set initial theme
enableSystem - Follow system preferences
storageKey - Custom localStorage key

Code

<ThemeProvider 
  defaultTheme="dark"
  enableSystem={true}
  storageKey="my-app-theme"
>
  <App />
</ThemeProvider>

Using the Theme Hook

Access theme context in any component with useTheme hook.

The useTheme hook provides access to:

theme

Theme object with colors

themeName

Current theme name

setTheme

Change theme function

toggleTheme

Toggle light/dark

Code

import { useTheme } from 'dotti'

function ThemeControls() {
  const { theme, themeName, setTheme, toggleTheme } = useTheme()
  
  return (
    <div>
      <p>Current: {themeName}</p>
      <button onClick={toggleTheme}>
        Toggle Theme
      </button>
      <button onClick={() => setTheme('dark')}>
        Dark Theme
      </button>
    </div>
  )
}

Props

TypeScript Support

All components are fully typed with TypeScript. Check your IDE for prop suggestions and documentation.