# 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`    | ![](https://3183040354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYuewee9BpHHd2p9bSo45%2Fuploads%2F7gCnufcDnOGJJBcS6x9C%2FScreen%20Shot%202022-10-24%20at%204.58.20%20PM.png?alt=media\&token=181350ae-bc0f-4d4f-ac5a-709d3474fa02) |
| `dark`     | ![](https://3183040354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYuewee9BpHHd2p9bSo45%2Fuploads%2FUAPx7OacCW7eIdwGaTNY%2FScreen%20Shot%202022-10-24%20at%205.13.31%20PM.png?alt=media\&token=951f3e48-d17e-44dd-9bbe-4e39685f12de) |
| `auto`     | Sets `dark` vs `light` automatically to match system preferences of the user.                                                                                                                                                                                |