---
title: "Dark & Light Themes"
description: "Built-in theme providers with system preference detection and accessible color contrasts."
order: 2
category: "Customization"
updated: "2026-10-13"
---

# Dark & Light Themes

AuthSetu comes with tailored light and dark themes designed for high contrast and accessibility.

## Using `@authsetu/themes`

```tsx
import { AuthProvider } from '@authsetu/nextjs';
import { darkTheme } from '@authsetu/themes';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider
      publishableKey={process.env.NEXT_PUBLIC_AUTHSETU_PUBLISHABLE_KEY!}
      appearance={{ baseTheme: darkTheme }}
    >
      {children}
    </AuthProvider>
  );
}
```