Customization

Dark/Light Mode

Stack components support light and dark mode out of the box. You can switch between light and dark mode using 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):

  1. Install next-themes:
$npm install next-themes
  1. Add the ThemeProvider to your layout.tsx file:
1import { ThemeProvider } from 'next-themes'
2
3export default function Layout({ children }) {
4 return (
5 <ThemeProvider>
6 <StackTheme>
7 {children}
8 </StackTheme>
9 </ThemeProvider>
10 )
11}
  1. Build a color mode switcher component:
1'use client';
2import { Button } from '@stackframe/stack'
3import { useTheme } from 'next-themes'
4
5export default function ColorModeSwitcher() {
6 const { theme, setTheme } = useTheme()
7 return (
8 <Button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
9 Toggle theme
10 </Button>
11 )
12}

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.