open-index/open-npm huggingface dataset:
npm package: @mskcc/theme-antd
Description: Ant Design theme configuration package
Latest version: 1.0.5

# Ant Design Theme Package

Custom theme configuration for Ant Design components.

## Installation

```bash
npm install @mskcc/theme-antd @mskc/tokens
```

## Usage

```typescript
import { ConfigProvider } from 'antd';
import { getDsmTheme } from '@mskcc/theme-antd';

// Configure theme
const theme = getDsmAntdTheme(); // optional: 'light' or 'dark' or leave blank for default
// Use with ConfigProvider
<ConfigProvider theme={theme, 'consumer'}>
  <App />
</ConfigProvider>;
```

```css
/* Main css file */
@import '@mskcc/tokens/css/consumer.css';
@import '@mskcc/theme-antd/dist/styles/theme.css';
```

## References

### Theme Functions

| Function                            | Description                        | Property | type                | default    |
| ----------------------------------- | ---------------------------------- | -------- | ------------------- | ---------- |
| `getDsmTheme(role, theme)`          | CSS variables version of DSM theme | role     | 'consumer' or 'pro' | 'consumer' |
|                                     |                                    | theme    | 'light' or 'dark'   | 'light'    |
| `getDsmThemeComponent(role, theme)` | CSS-in-JS version of DSM theme     | role     | 'consumer' or 'pro' | 'consumer' |
|                                     |                                    | theme    | 'light' or 'dark'   | 'light'    |

### Stylesheets

| Import                                              | Description                                             |
| --------------------------------------------------- | ------------------------------------------------------- |
| `@import '@mskcc/theme-antd/dist/styles/theme.css'` | Main theme stylesheet to be paired with `@mskcc/tokens` |