Using and customizing themes

You can pick from a few pre-defined themes to match your branding.

There are 3 built-in theme functions:

  • SYSTEM (default)
  • DARK
  • LIGHT

You can pass one of the IdentityKitTheme values to the IdentityKitProvider’s theme prop.

import { IdentityKitProvider } from "@nfid/identitykit/react"
import { IdentityKitTheme } from "@nfid/identitykit/react"
 
export const App = () => (
  <IdentityKitProvider theme={IdentityKitTheme.DARK} {...etc}>
    <YourApp />
  </IdentityKitProvider>
)