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

2. Add the ThemeProvider to your layout.tsx file:

1
import { ThemeProvider } from 'next-themes'
2
3
export default function Layout({ children }) {
4
  return (
5
    <ThemeProvider>
6
      <StackTheme>
7
        {children}
8
      </StackTheme>
9
    </ThemeProvider>
10
  )
11
}

3. Build a color mode switcher component:

1
'use client';
2
import { useTheme } from 'next-themes'
3
4
export default function ColorModeSwitcher() {
5
  const { theme, setTheme } = useTheme()
6
  return (
7
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
8
      Toggle theme
9
    </button>
10
  )
11
}

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.