> For the complete documentation index, see [llms.txt](https://docs.picketapi.com/picket-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.picketapi.com/picket-docs/reference/concepts/modal-themes.md).

# Modal Themes

*Themes is in beta. For early access email* [*team@picketapi.com*](mailto:team@picketapi.com)

The Picket Login Modal supports several themes. By default the login modal will use the `light` theme. However, you can set it to a different theme to best fit into your overall web experience.

You can set the theme when instantiating Picket

{% tabs %}
{% tab title="Javascript (picket-js)" %}

```typescript
import Picket from "@picketapi/picket-js"

const picket = new Picket("YOUR_PUBLISHABLE_KEY_HERE",{
  theme: "dark",
});
```

{% endtab %}

{% tab title="React (picket-react)" %}

<pre class="language-tsx"><code class="lang-tsx"><strong>import { PicketProvider } from "@picketapi/picket-react"
</strong>
function MyApp({ children }) {
  return (
    {/* sets theme to dark */}
    &#x3C;PicketProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE" theme="dark">
      {children}
    &#x3C;/PicketProvider>
  );
}
</code></pre>

{% endtab %}
{% endtabs %}

| Theme Name | Description / Image                                                           |
| ---------- | ----------------------------------------------------------------------------- |
| `light`    | ![](/files/FGsuKdtgIf4t1ylqzOB2)                                              |
| `dark`     | ![](/files/kHbOznzmPyjZ5HKxHCXa)                                              |
| `auto`     | Sets `dark` vs `light` automatically to match system preferences of the user. |