# @replit/codemirror-css-color-picker

> Enables a color picker input next to css colors

Latest version **6.3.0** (published 2024-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @replit/codemirror-css-color-picker
pnpm add @replit/codemirror-css-color-picker
yarn add @replit/codemirror-css-color-picker
bun add @replit/codemirror-css-color-picker
```

## Health

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

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

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.3.0 |
| Published | 2024-11-05 |
| First published | 2021-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 66.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Faris Masad |
| Maintainers | sareini, krishatreplit, mikewesthad, replitdstewart, ryanweingast, theflowingsky, jonesit-replit, szymon_k, jackyzha0, jamesaustinreplit, lopezhoracio, bradymaddenreplit, ryantm, alexisreplit, ink404, brianpool, tobyho, brenoafb, masad-frost, stkenned, cbrewster, ltazmin_replit, moudy, lhchavez |

## Links

- npm: https://www.npmjs.com/package/@replit/codemirror-css-color-picker
- Repository: https://github.com/replit/Codemirror-CSS-color-picker
- Homepage: https://github.com/replit/Codemirror-CSS-color-picker#readme
- Issues: https://github.com/replit/Codemirror-CSS-color-picker/issues
- npm.io page: https://npm.io/package/@replit/codemirror-css-color-picker

## Recent versions

- 6.3.0 (latest) — 2024-11-05
- 6.2.0 — 2024-07-15
- 6.1.1 — 2024-04-05
- 6.1.0 — 2023-09-07
- 6.0.0 — 2022-06-23
- 0.20.0 — 2022-04-22
- 0.19.7 — 2022-03-25
- 0.19.6 — 2022-03-21
- 0.19.4 — 2021-10-18
- 0.19.3 — 2021-09-26
- 0.19.2 — 2021-09-26
- 0.19.1 — 2021-09-25
- 0.19.0 — 2021-09-25

## README

# CodeMirror Color Picker

<span><a href="https://replit.com/@util/Codemirror-CSS-color-picker" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/Codemirror-CSS-color-picker" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-css-color-picker" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-css-color-picker?color=blue" alt="NPM version badge" /></a></span>

A CodeMirror extension that adds a color picker input next to CSS color values.

![preview](https://replit.com/cdn-cgi/image/width=3840,quality=80/https://storage.googleapis.com/replit/images/1632627522442_46320608eaa3f0c58bebd5fe4a10efc2.gif)

### Usage

```ts
import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { css } from '@codemirror/lang-css';
import { colorPicker, wrapperClassName } from '@replit/codemirror-css-color-picker';

new EditorView({
  parent: document.querySelector('#editor'),
  state: EditorState.create({
    doc: '.wow {\n  color: #fff;\n}',
    extensions: [
      basicSetup,
      css(),
      colorPicker,
      EditorView.theme({
        [`.${wrapperClassName}`]: {
          outlineColor: 'transparent',
        },
      }),
    ],
  }),
});
```

### Todos

- Investigate solutions for alpha values. `input[type="color"]` doesn't support alpha values, we could show another number input next to it for the alpha value.

---
_Source: https://npm.io/package/@replit/codemirror-css-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._