useColorScheme

useColorScheme() manages the color scheme preference for c15t components. It sets up the appropriate CSS class and media query listeners.

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

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

Parameters

Provider-Level Configuration

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

<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.