okp4/ui

import { ArgsTable, Meta, Story, Canvas, Preview, Props } from '@storybook/addon-docs'
import { ThemeProvider } from 'ui/atoms/theme/ThemeProvider'
import { ThemeSwitcher } from 'ui/atoms/theme/ThemeSwitcher'
import themes from 'ui/styles/_exports.module.scss'
import { useTheme } from 'hook/useTheme'

import './themeStory.scss'

<Meta
  title="Atoms/Brand Identity/Theming"
  component={ThemeSwitcher}
  parameters={{ actions: { argTypesRegex: '^on.*' }, sidebar: { disable: true } }}
/>

# Theming

> OKP4 theming that offers the user the ability to fully utilize the color palette.

[![stability-unstable](https://img.shields.io/badge/stability-unstable-yellow.svg)](https://github.com/emersion/stability-badges#unstable)

## Description

OKP4 design system provides simple and intuitive theme management, including offering a ready-to-use `<ThemeSwitcher />` component in any user interface.  
This component can be integrated anywhere in the application, and allows you to automatically change all the colors associated with the other UI components offered by OKP4.

<Story
  name="Theming"
  decorators={[
    Story => (
      <ThemeProvider>
        <Story />
      </ThemeProvider>
    )
  ]}
>
  {args => {
    const { theme } = useTheme()
    return (
      <div className="theme-story-main">
        <ThemeSwitcher {...args} />
      </div>
    )
  }}
</Story>

## Properties

<ArgsTable story="Theming" />

## Usage

OKP4 theming comes with a built-in UI `<ThemeSwitcher />` component, designed to be easily used in user interfaces.

### Prerequisites

Before any use of the `<ThemeSwitcher />` component, it is first mandatory to inject the OKP4 `<ThemeProvider/>` at the highest level in the application.
This will allow in particular to activate the reactivity linked to the theme change by the user.

##### **`main.ts`**

```tsx
<React.StrictMode>
  <ThemeProvider>
    <App />
  </ThemeProvider>
</React.StrictMode>
```

### Theme Switcher

The `<ThemeSwitcher />` component can be invoked anywhere in your application.
As an example, you could insert it in your header component to display it near toolbar actions:

##### **`header.tsx`**

```tsx
<>
  <ThemeSwitcher />
  <Header />
  {...}
</>
```

### Utilities

OKP4 provides a `useTheme` hook which allows at any time in the application to retrieve the value of the `theme`.  
Optionally, you may also want to force its change by invoking the `setTheme` method which, currently, only takes `light | dark` as argument.

As an example, if you want to retrieve the theme value to inline style your component :

##### **`example.tsx`**

```tsx
import { useTheme } from '@okp4/ui'
import themes from '@okp4/ui/lib/scss/_exports.module.scss' // the theme object

export const MyExampleComponent: React.FC = ({ title }: string) => {
  const { theme, setTheme } = useTheme()
  return <div style={{ color: themes[`${theme}-highlighted-text`] }}>{title}</div>
}
```