cunningham/packages/react/src/docs/theming.mdx

import { Meta, Source } from '@storybook/addon-docs';

<Meta title="Getting Started/Theming"/>

# Theming

Cunningham has a built-in theming feature available. You can customize themes already provided or add your own themes !

## Included themes

Cunningham natively has a `default` theme ( aka light theme ) and a `dark` theme.

You can switch between these two themes by clicking on the button in the top-bar and visualize all the components in their
different versions. ✨

<div style={{textAlign: "center"}}>
  <img src="switch-theme.gif"/>
</div>

## Code implementation

No panic it's easy. You can switch the current theme by using the prop `theme` of `CunninghamProvider`, here is an example
with a `MyApp` component.

<Source dark={true} code={`

import {
  Button,
  CunninghamProvider
} from "@openfun/cunningham-react";

export const MyApp = () => {
  const [theme, setTheme] = useState("default");
  return (
    <CunninghamProvider theme={theme}>
      <Button onClick={() => setTheme(theme === "default" ? "dark" : "default"}>Switch theme</Button>
    </CunninghamProvider>
  );
};

`}></Source>

> You can find a fully working example [here](https://github.com/openfun/cunningham/blob/main/apps/demo/src/App.tsx) in the demo app.

## What about CSS variables ?

It's seamless ! You can still use variables in CSS like this

<Source dark={true} code={`

.myClass {
  background-color: var(--c--contextuals--background--semantic--neutral--secondary);
}

`}></Source>

The variable will be automatically switched across the DOM when switching theme via `CunninghamProvider`.

## Customizing themes

As you have see in the previous sections you can customize the design tokens by editing `cunningham.ts`, you may have noticed
that in all the examples you had to wrap the modifications inside the following fields:

<Source dark={true} code={`
// cunningham.ts
import { DefaultTokens } from "@openfun/cunningham-react";

const config: DefaultTokens = {
  themes: {
    default: {
      ...
    },
  },
};

export default config;

`}></Source>

In reality in this case you are editing the theme called `default` ( which refer to the light theme ), if you want to edit
the dark theme you have to provide the `dark` key accordingly

<Source dark={true} code={`
// cunningham.ts
import { DefaultTokens } from "@openfun/cunningham-react";

const config: DefaultTokens = {
  themes: {
    default: {
      ...
    },
    dark: {
      ...
    },
  },
};

export default config;

`}></Source>

## Creating your theme

The logic is the same as what we saw previously. Just add a new key inside the `themes` object.

> ⚠️ All themes extends the `default` theme by default, that's why it is named `default` and not `light`. A consequence is that you don't have to provide all existing design tokens when creating a new theme, you can just customize the one you want.

<Source dark={true} code={`
// cunningham.ts
import { DefaultTokens } from "@openfun/cunningham-react";

const config: DefaultTokens = {
  themes: {
    default: {
      ...
    },
    dark: {
      ...
    },
    pink: {
      globals: {
        colors: {
          "brand-100": "pink",
          ...
        }
      }
    },
  },
};

export default config;

`}></Source>