# @mskcc/themes

Latest version **2.7.3** (published 2025-02-05) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @mskcc/themes
pnpm add @mskcc/themes
yarn add @mskcc/themes
bun add @mskcc/themes
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.3 |
| Published | 2025-02-05 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 409.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jamesmsk, walee, chapmanm, informatix9, nierococ |

## Links

- npm: https://www.npmjs.com/package/@mskcc/themes
- npm.io page: https://npm.io/package/@mskcc/themes

## Dependencies (1)

- [@mskcc/colors](https://npm.io/package/@mskcc/colors.md) 2.7.3

## Recent versions

- 2.7.3 (latest) — 2025-02-05
- 2.7.0-beta.2 (beta) — 2024-08-05
- 2.7.2 — 2024-10-22
- 2.7.1 — 2024-08-22
- 2.7.0 — 2024-08-20
- 2.7.0-beta.1 — 2024-07-11
- 2.6.1 — 2024-07-03
- 2.7.0-beta.0 — 2024-05-06
- 2.6.0 — 2024-04-29
- 2.5.0 — 2024-04-24
- 2.4.5 — 2024-03-01
- 2.4.4 — 2024-02-01
- 2.4.3 — 2024-01-18
- 2.4.3-beta.0 — 2024-01-04
- 2.4.2 — 2023-11-28
- … 3 more at https://npm.io/package/@mskcc/themes/versions

## README

<img src="https://cdn.jsdelivr.net/npm/@mskcc/dsm-assets@latest/src/design-system-logo.svg" />

# @mskcc/themes

> Dark / light mode theming for MSK digital products.

## Installation

```bash
npm install @mskcc/themes
```

## Usage

Add the following to your application.

> Note: For explicit control on the dark and light theme, turn `$system-dark-mode` to `false`.
> `@use '@mskcc/themes' with ($system-dark-mode: false)`

```scss
@use '@mskcc/themes';
```

```css
@import '@mskcc/themes/dist/themes.css';
```

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mskcc/themes@latest/dist/themes.css"
/>
```

### JavaScript / TypeScript

```tsx
import { lightTheme, darkTheme } from '@mskcc/themes';

const style = {
  bg: lightTheme.colorBg,
};
```

### Using tokens

You can also use the tokens directly in your `scss` and `css` stylesheets.

```scss
@use '@mskcc/themes/tokens' as tk;

body {
  background-color: tk.$msk--color-bg;
}
```

```css
body {
  background-color: var(--msk-color-bg);
}
```

---
_Source: https://npm.io/package/@mskcc/themes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._