> ## Documentation Index > Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt > Use this file to discover all available pages before exploring further. # Dark Mode > How to customize and apply dark mode styles in your Sabo project. Sabo has full support for dark mode, built on top of **[next-themes](https://github.com/pacocoursey/next-themes)** and Tailwind CSS. ## How It Works The theme system is enabled in `src/app/layout.tsx`, where the `` component wraps your entire application. ```tsx src/app/layout.tsx theme={null} // ... import { ThemeProvider } from "@/components/theme-provider"; export default function RootLayout({ children }) { return ( {children} {/* ... */} ); } ``` * **`attribute="class"`**: This tells `next-themes` to toggle dark mode by adding or removing the `dark` class on the `` 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. Sabo's components are built with a semantic color system based on CSS variables. This means you use classes that describe a component's **purpose**, not its color, and the theme system handles the color switching automatically. For example, instead of specifying `bg-white dark:bg-black`, you should use `bg-card`: ```tsx CardComponent.tsx theme={null} export function CardComponent() { return (

This card automatically adapts to dark mode.

); } ``` This works because variables like `--card` are defined with different values for light and dark themes in `src/app/globals.css`. For one-off styles or unique components not covered by the semantic system, you can apply styles only for dark mode using the `dark:` prefix. ```tsx ThemedComponent.tsx theme={null} export function ThemedComponent() { return (

This component's background and text will invert in dark mode.

); } ``` This method should be used sparingly. This semantic approach is used for all themed components in Sabo. To learn more, see the **[Styling](/customization-guides/theme/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 `` 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: ```tsx src/components/shared/header.tsx theme={null} import { ThemeToggle } from "@/components/shared/theme-toggle"; // ... export function Header() { return (
{/* ... other header content */}
); } ``` The component handles all the state management for switching themes automatically.