> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes & Settings

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

Dynamic offers beautiful themes in both light, dark, or auto themes with the ability to customize the colors and styles to your liking, all through your developer dashboard.

Simply go to the [design page](https://app.dynamic.xyz/dashboard/design) in your dashboard and toggle from the current list of settings (more customizations will be coming soon).

You can toggle between:

1. Themes
2. Light and dark theme
3. Your brand color
4. Subtle/Bold

## Light & Dark Modes

You can manage light and dark mode in three different ways depending on your use case:

### Using the dashboard

You can set your theme in our [Dashboard](https://app.dynamic.xyz/dashboard/design), under the "Style" heading, where you see the toggle for "Light" or "Dark".

### Using DynamicContextProvider

While you can set your theme in our [Dashboard](https://app.dynamic.xyz/dashboard/design), many sites support users switching between light and dark theme and it's important that our SDK updates to match the theme of the site.

You can update whether you want to show the Light or Dark theme to customers by passing a prop to DynamicContextProvider with `theme`:

```TypeScript theme={"system"}
<DynamicContextProvider
  theme='dark', <-- you can pass either 'dark' or 'light'
  settings={{
    environmentId: "<<sandboxEnvironmentId>>",
    appName: "<<projectName>>",
    appLogoUrl: "...",
  }}>
  <HomePage />
</DynamicContextProvider>
```

### Using CSS directly

The root element of your application (perhaps `body`) will have a data-dynamic-theme variable set. You can override this at any time to adjust the theme to light or dark mode. There is also an "auto" value which will adapt to whatever is set in [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).