Theme Provider

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Overview

Theme manages the application color scheme (light, dark, or system) by setting data-pm-theme on the document root and persisting the preference in localStorage. All Paramanu components use light-dark() CSS function for automatic adaptation.

Usage

HTML

import { setTheme, getTheme } from "@paramanu/utilities-js"

setTheme("dark")
console.log(getTheme()) // "dark"

React

import { Theme, useTheme } from "@paramanu/utilities-react"

<Theme defaultMode="system">
  <App />
</Theme>

// Inside a component:
const { mode, setMode } = useTheme()

Guidelines

• Wrap your app root with Theme for consistent theming
• Use "system" as default to respect user OS preference
• The useTheme hook provides read/write access to the current mode
• Theme preference persists across page reloads via localStorage

API

Prop	Type	Default	Description
defaultMode	"light" | "dark" | "system"	"system"	Initial color scheme
storageKey	string	"pm-theme"	localStorage key for persistence