---
description: Theme context.
labels: ["context"]
---

import { Theme } from "./theme"
import { ThemeProvider } from "./theme-provider"
import { MockComponent } from "./theme.composition"

## React Theme Context

This is a simple [React Context](https://reactjs.org/docs/context.html) shared as a Bit component.
Use this component to apply a theme as a context to set on it's children.

### Component usage

```tsx
() => {
import React, { useContext } from 'react';
import { ThemeProvider } from './theme-provider';
import { Theme } from './theme';

<ThemeProvider color="blue">
  // My lovely children now get a theme!
  <MockComponent />
</ThemeProvider>;
```

### Using props to customize the theme

Change the color to see the text change:

```tsx live
;() => {
  return (
    <ThemeProvider color="red">
      <MockComponent />
    </ThemeProvider>
  )
}
```