import { Meta } from "@storybook/addon-docs";
import { Preview } from "@stories/components";

<Meta
    title="Features/Color schemes"
    id="color-schemes"
/>

# Color schemes

Orbit supports by default a *light* and a *dark* color scheme for all components and [tokens](?path=/story/tokens--page) where applicable.

## Apply a color scheme

A color scheme can either be enforced by providing a specific `light` or `dark` value to a [theme provider](?path=/story/theme-provider--default-story):

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

or be selected according to the [user's operating system setting](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) by providing the `system` value:

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

> When the `system` value is provided, an additional *fallback* color scheme must be specified to `defaultColorScheme` in case the theme provider is not able to access the user setting.

## Changing the color scheme

To manage the color scheme in your application, Orbit exposes a `ColorSchemeContext` and a `useColorSchemeValue` hook.

### Context

The `ColorSchemeContext` of the closest [theme provider](?path=/story/theme-provider--default-story) can be accessed using the `useColorSchemeContext` hook. Once you have a hold on the context, you can access the current color scheme or update the value with `setColorScheme`.

<Preview filePath="color-schemes/ColorSchemeToggle" features />

## useColorSchemeValue

Some features requires the usage of custom colors. Those colors aren't like Orbit [tokens](?path=/story/tokens--page) and will not support color schemes out of the box.

To help with that, Orbit offer the `useColorSchemeValue` hook which will return the value matching the current color scheme of the closest [theme provider](?path=/story/theme-provider--default-story).

```jsx
import { useColorSchemeValue } from "@sharegate/orbit-ui";

const color = useColorSchemeValue("#fff", "#000");
const backgroundColor = useColorSchemeValue("#ff9048", "#fee2bb");

return (
    <Button
        color={color}
        backgroundColor={backgroundColor}
    >
        Cutoff
    </Button>
);
```
