# Eduzz UI: Antd Theme

[![version](https://img.shields.io/npm/v/@eduzz/ui-antd-theme)](https://www.npmjs.com/package/@eduzz/ui-antd-theme)
[![size](https://img.shields.io/bundlephobia/min/@eduzz/ui-antd-theme)](https://www.npmjs.com/package/@eduzz/ui-antd-theme)

Tema de antd ajustado aos padrões de UI da Eduzz.

### Instalação

Para adicionar o tema no seu projeto, pasta rodar:
```bash
pnpm add @eduzz/ui-antd-theme
```

## Utilização

```tsx
import { ThemeProvider } from '@eduzz/ui-antd-theme';

function App() {
  return (
    <ThemeProvider>
      <section>
        <Typography.Title level={1}>H1 - Roboto</Typography.Title>
        <Typography.Title level={2}>H2 - Roboto</Typography.Title>
        <Typography.Title level={3}>H3 - Roboto</Typography.Title>
        <Typography.Title level={4}>H4 - Roboto</Typography.Title>
        <Typography.Title level={5}>H5 - Roboto</Typography.Title>

        <Typography.Paragraph>Paragraph - Roboto</Typography.Paragraph>
      </section>
    </ThemeProvider>
  );
}

export default App;
```

### Parâmetros

Aceita todas as props do [ConfigProvider](https://ant.design/components/config-provider) do Antd e mais:

| Propriedade      | Tipo          | Obrigatório | Padrão      | Descrição                                                                                                                                                                               |
|------------------|---------------|-------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|                                                                                                                   |
| mode             | `light\|dark` | `false`     | `'light'`   | Modo do tema (dark/light), troca automaticamente com o [ModeSwitcher do @eduzz/ui-layout](https://github.com/eduzz/eduzz-ui/blob/master/apps/layout/README.md#topbarmodeswitcher-props) | 

### useTheme

Hook para ler e alterar o modo do tema (`light` / `dark`). Deve ser usado dentro de um `ThemeProvider`.

> Se estiver utilizando @eduzz/ui-layout, utilize o useTheme do @eduzz/ui-layout.

```tsx
import { useTheme } from '@eduzz/ui-antd-theme';

function ThemeToggle() {
  const { theme, toggle, setTheme } = useTheme();

  return (
    <>
      <button onClick={toggle}>Tema atual: {theme}</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
    </>
  );
}
```