# ThemeProvider

![npm](https://img.shields.io/npm/dt/@asphalt-react/theme-provider?style=flat-square)
[![npm version](https://badge.fury.io/js/@asphalt-react%2Ftheme-provider.svg)](https://badge.fury.io/js/@asphalt-react%2Ftheme-provider)

ThemeProvider allows you to theme your app. You can even nest ThemeProviders to apply a theme on just a section of your app as well.

> ⚠️ ThemeProvider only works in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)

## Usage

```jsx
import { ThemeProvider } from "@asphalt-react/theme-provider"
import { Button } from "@asphalt-react/button"

const customTheme = {
  // your theme tokens
}

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button>Click me</Button>
    </ThemeProvider>
  )
} 
```

[comment]: # "ThemeProvider Props"

## Props

### children

React node or node tree to apply theme to.

| type | required | default |
| ---- | -------- | ------- |
| node | true     | N/A     |

### theme

Asphalt Theme object.

| type   | required | default         |
| ------ | -------- | --------------- |
| object | false    | legacyVariables |

### as

Html element/React component to render as container.

| type        | required | default |
| ----------- | -------- | ------- |
| elementType | false    | "div"   |