React component for theme switching and management

import { Provider } from "./theme";

function App() {
  return (
    <Provider defaultTheme="light" storageKey="my-theme">
      {/* Your app */}
    </Provider>
  );
}
Copy

The Provider automatically saves the selected theme to localStorage and restores it on page load.

By default, the Provider applies the theme name to the data-theme attribute on the root element. You can customize this with the attribute prop:

// Default: applies data-theme="light" or data-theme="dark"
<Provider defaultTheme="light">
  <App />
</Provider>

// Custom attribute: applies class="light" or class="dark"
<Provider defaultTheme="light" attribute="class">
  <App />
</Provider>

// Custom data attribute
<Provider defaultTheme="light" attribute="data-color-scheme">
  <App />
</Provider>
Copy

This is useful if you want to use CSS attribute selectors or integrate with other systems that use different attribute names.