mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
13fccd32b6
Some checks failed
all-good: Did all the other checks pass? / all-good (push) Has been cancelled
Ensure Prisma migrations are in sync with the schema / check_prisma_migrations (22.x) (push) Has been cancelled
DB migration compat / Check if migrations changed (push) Has been cancelled
Docker Server Build and Push / Docker Build and Push Server (push) Has been cancelled
Docker Server Build and Run / docker (push) Has been cancelled
Runs E2E API Tests (Local Emulator) / E2E Tests (Local Emulator, Node ${{ matrix.node-version }}) (22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (mock, 22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (prod, 22.x) (push) Has been cancelled
Runs E2E API Tests with custom port prefix / build (22.x) (push) Has been cancelled
Lint & build / lint_and_build (latest) (push) Has been cancelled
Dev Environment Test With Custom Base Port / restart-dev-and-test-with-custom-base-port (push) Has been cancelled
Dev Environment Test / restart-dev-and-test (push) Has been cancelled
Run setup tests with custom base port / setup-tests-with-custom-base-port (push) Has been cancelled
Run setup tests / setup-tests (push) Has been cancelled
TOC Generator / TOC Generator (push) Has been cancelled
DB migration compat / Back-compat — Current branch migrations with ${{ needs.check-migrations-changed.outputs.base_branch }} branch code (push) Has been cancelled
DB migration compat / Forward-compat — Current branch code with ${{ needs.check-migrations-changed.outputs.base_branch }} branch migrations (push) Has been cancelled
DB migration compat / No migration changes (skipped) (push) Has been cancelled
85 lines
2.8 KiB
Plaintext
85 lines
2.8 KiB
Plaintext
---
|
|
title: Dark Mode
|
|
description: Enable light and dark mode support for Stack Auth components.
|
|
---
|
|
|
|
Stack components support light and dark mode out of the box. All UI components automatically adapt their colors, shadows, and contrast levels based on the selected theme.
|
|
|
|
You can switch between light and dark mode using [next-themes](https://github.com/pacocoursey/next-themes) (or any other library that changes the `data-theme` or `class` to `dark` or `light` attribute of the `html` element).
|
|
|
|
Here is an example of how to set up next-themes with Stack (find more details in the [next-themes documentation](https://github.com/pacocoursey/next-themes)):
|
|
|
|
<Steps>
|
|
<Step title="Install next-themes">
|
|
```bash
|
|
npm install next-themes
|
|
```
|
|
</Step>
|
|
|
|
<Step title="Create a client-side provider component">
|
|
```jsx title="components/providers.jsx"
|
|
'use client';
|
|
import { ThemeProvider } from 'next-themes'
|
|
import { StackTheme } from '@stackframe/stack'
|
|
|
|
export default function Providers({ children }) {
|
|
return (
|
|
{/*
|
|
ThemeProvider enables theme switching throughout the application.
|
|
defaultTheme="system" uses the user's system preference as the default.
|
|
attribute="class" applies the theme by changing the class on the html element.
|
|
*/}
|
|
<ThemeProvider defaultTheme="system" attribute="class">
|
|
{/* StackTheme ensures Stack components adapt to the current theme */}
|
|
<StackTheme>
|
|
{children}
|
|
</StackTheme>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
```
|
|
</Step>
|
|
|
|
<Step title="Use the provider in your layout.tsx file">
|
|
```jsx title="app/layout.tsx"
|
|
import Providers from './components/providers'
|
|
|
|
export default function Layout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<body>
|
|
<Providers>
|
|
{children}
|
|
</Providers>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
</Step>
|
|
|
|
<Step title="Build a color mode switcher component">
|
|
```jsx
|
|
'use client';
|
|
import { useTheme } from 'next-themes'
|
|
|
|
export default function ColorModeSwitcher() {
|
|
// useTheme hook provides the current theme and a function to change it
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
{/* Display different text based on current theme */}
|
|
{theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
|
|
</button>
|
|
)
|
|
}
|
|
```
|
|
</Step>
|
|
</Steps>
|
|
|
|
Now if you put the `ColorModeSwitcher` component in your app, you should be able to switch between light and dark mode. There should be no flickering or re-rendering of the page after reloading.
|