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 (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):

Install next-themes:

npm install next-themes

Create a client-side provider component:

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>
  )
}

Use the provider in your layout.tsx file:

app/layout.tsx

import Providers from './components/providers'

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}

Build a color mode switcher component:

'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.

'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> ) }

import Providers from './components/providers' export default function Layout({ children }) { return ( <html lang="en"> <body> <Providers> {children} </Providers> </body> </html> ) }

'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> ) }

Dark Mode

Stack Auth AI

How can I help?

Dark Mode

Stack Auth AI

How can I help?