# monaco-themes

> Themes for monaco editor in web browser

Latest version **0.4.8** (published 2025-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install monaco-themes
pnpm add monaco-themes
yarn add monaco-themes
bun add monaco-themes
```

## Health

**Score 70/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.8 |
| Published | 2025-11-25 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 1 |
| Unpacked size | 408.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 515 |
| Author | Brijesh |
| Maintainers | brijeshb42 |
| Keywords | monaco, editor, themes |

## Links

- npm: https://www.npmjs.com/package/monaco-themes
- Repository: https://github.com/brijeshb42/monaco-themes
- Homepage: https://editor.bitwiser.in/
- Issues: https://github.com/brijeshb42/monaco-themes/issues
- npm.io page: https://npm.io/package/monaco-themes

## Dependencies (1)

- [fast-plist](https://npm.io/package/fast-plist.md) ^0.1.3

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.4.8 (latest) — 2025-11-25
- 0.2.4 (beta) — 2018-08-15
- 0.4.7 — 2025-08-30
- 0.4.6 — 2025-07-21
- 0.4.5 — 2025-05-05
- 0.4.4 — 2023-03-20
- 0.4.3 — 2022-11-08
- 0.4.2 — 2022-05-07
- 0.4.1 — 2022-04-06
- 0.4.0 — 2021-10-28
- 0.3.3 — 2019-06-30
- 0.3.2 — 2019-06-29
- 0.3.1 — 2019-06-29
- 0.3.0 — 2019-06-28
- 0.2.5 — 2018-08-19
- … 6 more at https://npm.io/package/monaco-themes/versions

## README

## monaco-themes

See extended demo at [https://editor.bitwiser.in](https://editor.bitwiser.in)

A list of theme definitions to be used with [monaco-editor](https://microsoft.github.io/monaco-editor/) in browser. See [minimal demo](https://bitwiser.in/monaco-themes/)

### Installation

```sh
npm install monaco-themes
# or
pnpm add monaco-themes
# or
yarn add monaco-themes
```

### Usage

#### API

##### Using ESM (Recommended)

```js
import { parseTmTheme } from 'monaco-themes';

const tmThemeString = /* read using FileReader */
const themeData = parseTmTheme(tmThemeString);
monaco.editor.defineTheme('mytheme', themeData);
monaco.editor.setTheme('mytheme');
```

##### Using CommonJS

```js
const { parseTmTheme } = require('monaco-themes');

const tmThemeString = /* read using FileReader */
const themeData = parseTmTheme(tmThemeString);
monaco.editor.defineTheme('mytheme', themeData);
monaco.editor.setTheme('mytheme');
```

##### Using `<script>` tag (IIFE/UMD)

```html
<script
  type="text/javascript"
  src="https://unpkg.com/monaco-themes/dist/monaco-themes.js"
></script>
<script type="text/javascript">
  var tmThemeString = /* read using FileReader */
  var themeData = MonacoThemes.parseTmTheme(tmThemeString);
  monaco.editor.defineTheme('mytheme', themeData);
  monaco.editor.setTheme('mytheme');
</script>
```

#### Directly using themes

##### With modern bundlers (Vite, Webpack, etc.)

```js
const monaco =
  /* import monaco */

  import('monaco-themes/themes/Monokai.json').then((data) => {
    monaco.editor.defineTheme('monokai', data.default || data);
    monaco.editor.setTheme('monokai');
  });
```

##### Using fetch

Download this [repository](https://github.com/brijeshb42/monaco-themes/archive/master.zip) and extract and save the `themes` directory in your project.

```js
/* load monaco */

fetch('/themes/Monokai.json')
  .then((data) => data.json())
  .then((data) => {
    monaco.editor.defineTheme('monokai', data);
    monaco.editor.setTheme('monokai');
  });
```

### Development

This project uses modern tooling:

- **pnpm** for package management
- **Vite** for local development server
- **tsdown** for building the library
- **TypeScript** for type safety
- **Node.js v22+** with native TypeScript support

#### Setup

```sh
pnpm install
```

#### Available Scripts

```sh
# Start development server with Vite
pnpm dev

# Build the library (ESM, CJS, and IIFE formats)
pnpm build

# Download theme files from source repositories
pnpm download

# Generate Monaco-compatible theme JSON files
pnpm generate
```

#### Building

The library is built with tsdown and outputs:

- **ESM** (`dist/index.js`) - ES Module format
- **CJS** (`dist/index.cjs`) - CommonJS format
- **IIFE** (`dist/monaco-themes.js`) - Browser-ready UMD-like format

All builds include TypeScript declarations and source maps.

### License

MIT

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