---
title: useColorScheme
description: Manage light/dark mode preferences for consent components.
---
`useColorScheme()` manages the color scheme preference for c15t components. It sets up the appropriate CSS class and media query listeners.

```tsx
import { useColorScheme } from '@c15t/nextjs';

function ThemeManager() {
  useColorScheme('system'); // Follow system preference
}
```

## Parameters

| Value       | Behavior                                  |
| ----------- | ----------------------------------------- |
| `'light'`   | Force light mode                          |
| `'dark'`    | Force dark mode                           |
| `'system'`  | Follow `prefers-color-scheme` media query |
| `null`      | Disable - c15t won't manage color scheme  |
| `undefined` | No-op                                     |

## Provider-Level Configuration

You can also set the color scheme on the provider without using this hook:

```tsx
<ConsentManagerProvider
  options={{
    colorScheme: 'system',
    // ...
  }}
>
```

## System Preference Detection

When set to `'system'`, the hook listens for changes to the `prefers-color-scheme` media query and updates automatically when the user changes their OS theme.