---
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/react';

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.