C15T Logo

Color Scheme (Light/Dark Mode)

Manage your components light, dark, and system color schemes.

tocOn this page

Overview

c15t provides built-in support for managing color schemes for your components, allowing you to implement light mode, dark mode, or system-based preferences with minimal configuration. By default, c15t detects your theme by checking if you have a .dark class on the root element.

Usage

<ConsentManagerProvider
  options={{
    // ... rest of your config
    react: {
      colorScheme: 'light',
    },
  }}
>
  <CookieBanner />
  <ConsentManagerDialog />
</ConsentManagerProvider>

CSS Classes

The color scheme is decided based on two classes:

  • .dark - By default, c15t checks for this class on the root element to determine the color scheme if none is provided.
  • .c15t-dark - This class is automatically added/removed based on the color scheme.