Hooks

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

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

Parameters

ValueBehavior
'light'Force light mode
'dark'Force dark mode
'system'Follow prefers-color-scheme media query
nullDisable - c15t won't manage color scheme
undefinedNo-op

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.