Styled Components & ThemeProvider

This guide explains how to set up and use a styled-components ThemeProvider with the Camp Design System.

When do you need this?

You need to set up a ThemeProvider if you’re using:

Any @camp/ai-* components (ActiveIntelligence components)
Themed @camp/* components (check individual component docs)

Overview

styled-components

Styled-components is a popular library for React that enables developers to write “CSS-in-JS.” This is our chosen solution for theming and light/dark mode support in our system.

Component Coverage

Component Type	ThemeProvider Required	Default Themed Behavior
`@camp/ai-*`	✅ Always	`themed={true}` (dark mode enabled)
`@camp/*` (themed)	✅ Required	`themed={false}` (light mode only)
`@camp/*` (standard)	❌ Not needed	No theming support

Note: If a @camp/* component requires a ThemeProvider, it will be noted in the component’s documentation.

Setup

1. Wrap Your App with ThemeProvider

Wrap your application (or the section where you’ll use themed components) with the ThemeProvider:


// Using the shared provider from AC Frontend
import { ThemeProvider } from '@ac/shared/data-access/provider';
import { Tabs } from '@camp/tabs';
 
function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
      <Tabs>{/* Tabs content */}</Tabs>
    </ThemeProvider>
  );
}

Real-world example: See this setup in action in AC Frontend’s agent app .

Using themed components outside of AC Frontend? Reach out to us in Slack at #help-design-systems to get started!

2. Verify Setup

After setup, your themed components should work correctly. If you see styling issues, ensure:

The ThemeProvider wraps your component
You’re using a component that supports theming
The themed prop is set correctly (see Usage section below)

Usage

Understanding the `themed` prop

The themed prop controls whether a component responds to theme changes:

themed={true}: Component responds to theme changes (light/dark mode)
themed={false}: Component uses light mode styling only

Component-Specific Behavior

`@camp/ai-*` Components (AI Components)

AI components default to themed={true} for automatic light/dark mode support:


import { AiButton } from '@camp/ai-button';
 
// ✅ Default behavior - supports light/dark mode
<AiButton>Click me</AiButton>
 
// ✅ Explicitly enable theming (same as default)
<AiButton themed={true}>Click me</AiButton>
 
// ❌ Disable theming - light mode only
<AiButton themed={false}>Click me</AiButton>

`@camp/*` Components (Standard Components)

Standard components default to themed={false} for light mode only:


import { Tabs } from '@camp/tabs';
 
// ✅ Default behavior - light mode only
<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>
 
// ✅ Enable theming - supports light/dark mode
<Tabs themed={true}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>
 
// ❌ Explicitly disable theming (same as default)
<Tabs themed={false}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>

Complete Example

Here’s a complete example showing both component types working together:


import { ThemeProvider } from '@ac/shared/data-access/provider';
import { Tabs } from '@camp/tabs';
import { AiButton } from '@camp/ai-button';
 
function MyApp() {
  return (
    <ThemeProvider>
      <div>
        {/* Standard component - enable theming */}
        <Tabs themed={true}>
          <Tabs.List>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
          </Tabs.List>
        </Tabs>
 
        {/* AI component - theming enabled by default */}
        <AiButton>AI Action</AiButton>
      </div>
    </ThemeProvider>
  );
}

Troubleshooting

Common Issues

Components not responding to theme changes

Problem: Your themed components aren’t switching between light and dark modes.

Solutions:

Ensure ThemeProvider wraps your component
Check that you are using the latest version of the component
Check that the component supports the themed prop
Verify themed={true} is set for @camp/* components
Confirm your app’s theme context is properly configured

Styling appears broken

Problem: Components look unstyled or have incorrect colors.