import { ArgsTable, Meta } from "@storybook/addon-docs";
import { ComponentInfo, Tagline } from "@stories/components";
import { ThemeProvider, InnerThemeProvider } from "@components/styling"

<Meta
    title="Components/ThemeProvider"
    id="theme-provider"
/>

# ThemeProvider

<Tagline>Container used to define the theme and color scheme to use.</Tagline>

<ComponentInfo
    usage={"import { ThemeProvider, ThemeContext, useThemeContext, ColorSchemeContext, useColorSchemeContext } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/styling/src"
/>

## Usage

Orbit components rely on the `ThemeProvider` to define the [theme](?path=/docs/theming--page) and [color scheme](?path=/docs/color-schemes--page) they need to render accurately. We recommended you declare a theme provider at the root of your application but if you prefer, you can declare them as needed instead.

```jsx
<ThemeProvider theme={ShareGateTheme} colorScheme="system" defaultColorScheme="light">
    <Button variant="secondary">Cutoff</Button>
</ThemeProvider>
```

## API

### ThemeProvider

<ComponentInfo
    usage={"import { ThemeProvider } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerThemeProvider.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerThemeProvider} sort="alpha" />
