Theming

Customize the look and feel with dark mode and color tokens.

Dark mode

The design system supports light, dark, and system-preference themes out of the box. We use next-themes for theme management.

Setting up dark mode

Wrap your app with the ThemeProvider:

// app/layout.tsx
import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

CSS variables

Colors are defined as CSS variables, making it easy to customize the theme. The format uses HSL values without the hsl() wrapper for better composability with Tailwind's opacity utilities.

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --primary: 142 76% 36%;
  --primary-foreground: 0 0% 100%;
  /* ... */
}

.dark {
  --background: 0 0% 4%;
  --foreground: 0 0% 100%;
  --primary: 151 100% 50%;
  --primary-foreground: 0 0% 0%;
  /* ... */
}

Using theme colors

Use Tailwind classes with semantic color names:

{/* Semantic colors - adapt to theme */}
<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground" />
<div className="bg-muted text-muted-foreground" />
<div className="bg-accent text-accent-foreground" />

{/* Brand colors - consistent across themes */}
<div className="bg-sourceful-green-500" />
<div className="text-sourceful-yellow-400" />

Customizing colors

Override CSS variables to customize the theme:

/* In your globals.css */
:root {
  /* Change the primary color */
  --primary: 200 100% 50%;

  /* Change the accent color */
  --accent: 30 100% 50%;
}