# change blink cursor

**URL:** https://discuss.codemirror.net/t/change-blink-cursor/9646
**Category:** Uncategorized
**Created:** [January 9, 2026, 11:32am UTC](https://discuss.codemirror.net/t/change-blink-cursor/9646 "2026-01-09T11:32:36Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![markzzz](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/m/aca169/32.png) [@markzzz](https://discuss.codemirror.net/u/markzzz)
#### Post date: [January 9, 2026, 11:32am UTC](https://discuss.codemirror.net/t/change-blink-cursor/9646/1 "2026-01-09T11:32:36Z")

</div>

Hi,

trying to change the color of the cursor within the area, this way:

```auto
const theme = EditorView.theme({
	"&.cm-editor": {
		fontFamily: "Arial, sans-serif !important",
		fontWeight: "bold",
		background: "#2d3748",
		borderRadius: '8px',
		outline: "none",
		fontSize: "14px",
		padding: "6px",
		width: "700px",
		color: "#ffffff",
		caretColor: "#ffffff"
	},
	".cm-content": {
		fontFamily: "var(--bs-body-font-family) !important"
	},
	".cm-cursor": {
		borderLeft: "none",
		backgroundColor: "#ffffff",
		width: "2px"
	}
})

```

but nothing change: its always black. How can I change to white?

Here’s the version, I’m using bootstrap alongside it:

```auto
    "@codemirror/autocomplete": "^6.18.6",
    "@codemirror/commands": "^6.8.0",
    "@codemirror/language": "^6.10.8",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.36.4",
    "bootstrap": "^5.3.3",

```

Thanks

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [January 9, 2026, 11:54am UTC](https://discuss.codemirror.net/t/change-blink-cursor/9646/2 "2026-01-09T11:54:27Z")

</div>

I don’t know, that should work. Try to figure out with the browser devtools what the styles are doing.

---

<div class="post-metadata">

### Author: ![markzzz](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/m/aca169/32.png) [@markzzz](https://discuss.codemirror.net/u/markzzz)
#### Post date: [January 9, 2026, 1:11pm UTC](https://discuss.codemirror.net/t/change-blink-cursor/9646/3 "2026-01-09T13:11:25Z")

</div>

How can I intercept the cursor with devtool?

---

<div class="post-metadata">

### Author: ![markzzz](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/m/aca169/32.png) [@markzzz](https://discuss.codemirror.net/u/markzzz)
#### Post date: [January 12, 2026, 8:28am UTC](https://discuss.codemirror.net/t/change-blink-cursor/9646/4 "2026-01-12T08:28:02Z")

</div>

@marijn fixed it: I need to add this to the end of `EditorView.theme:` `}, { dark: true });`

Is that normal and desired?