# @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
```
### 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);
}
```
# @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
```
### 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);
}
```