mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
4e467c4026
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com> Co-authored-by: Madison Kennedy <madison@Madisons-MacBook-Pro.local> Co-authored-by: BilalG1 <bg2002@gmail.com>
62 lines
2.1 KiB
Plaintext
62 lines
2.1 KiB
Plaintext
---
|
|
title: Dark Mode
|
|
---
|
|
|
|
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)):
|
|
|
|
1. Install next-themes:
|
|
|
|
```bash
|
|
npm install next-themes
|
|
```
|
|
|
|
2. Add the `ThemeProvider` to your `layout.tsx` file:
|
|
|
|
```jsx
|
|
import { ThemeProvider } from 'next-themes'
|
|
|
|
export default function Layout({ 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>
|
|
)
|
|
}
|
|
```
|
|
|
|
3. 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>
|
|
)
|
|
}
|
|
```
|
|
|
|
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.
|