Ant Design Theme Package

Custom theme configuration for Ant Design components.

Installation

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

Usage

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>;

/* 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 |