Skip to main content
Sabo has full support for dark mode, built on top of next-themes and Tailwind CSS.

​
How It Works

The theme system is enabled in src/app/layout.tsx, where the <ThemeProvider> component wraps your entire application.
src/app/layout.tsx
// ...
import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
        {/* ... */}
      </body>
    </html>
  );
}
  • attribute="class": This tells next-themes to toggle dark mode by adding or removing the dark class on the <html> element.
  • defaultTheme="system": The default theme is set to match the user’s operating system preference.
  • enableSystem: Allows the theme to sync with the system setting.

​
Applying Dark Mode Styles

Sabo offers two ways to apply dark mode styles. The recommended approach is to use the semantic color system, which handles theme changes automatically.
This semantic approach is used for all themed components in Sabo. To learn more, see the Styling guide.

​
Theme Toggle Component

Sabo includes a theme toggle component that allows users to switch between light, dark, and system themes.
  • Location: src/components/shared/theme-toggle.tsx
  • Usage: You can place the <ThemeToggle /> component anywhere in your application. In this boilerplate, it is located in the Footer component.
Here is an example of how you might use it in a Header component:
src/components/shared/header.tsx
import { ThemeToggle } from "@/components/shared/theme-toggle";
// ...
export function Header() {
  return (
    <header>
      {/* ... other header content */}
      <ThemeToggle />
    </header>
  );
}
The component handles all the state management for switching themes automatically.