Styling the CodeMirror 5 cursor for light and dark modes

How do you style the cursor in CodeMirror 5? Also, how can you do this for light and dark themes? Let's take a look.

Published on: 2022-04-01

Written by Schalk Neethling

This post was written when CodeMirror version 5 was still the main version used by websites. In version 6 there is a new way via the EditorView.theme function. You might still be able to use the method described here but, I thought I would mention this right out of the door.

With that said, let’s dig in.

You can style the cursor used by CodeMirror using the .CodeMirror-cursor class. I mean, that sounds simple enough right? I thought so to, until I ran into a bit of a problem. I needed to be able to style the cursor for, as the title suggests, both light and dark mode. Still seems simple right?

The cursor is black by default so, the following should do the trick:

.theme-dark {
  .CodeMirror-cursor {
    border-left: 1px solid #fff;
  }
}

But, for whatever reason(I have not dug into this too deeply), when I load up the editor and switch to dark mode, the cursor remains black. What!? I mean, the theme-dark class is on the body element and so, CodeMirror-cursor is a child of the body. It should work, but it doesn’t.

I started thinking of ways to inject this using JavaScript. I even considered creating an entire style block with JavaScript and injecting it into the DOM. Then it hit me. I am setting the color of the left border. What would happen if I set the color of the left border to white, and the right border to black. Can you even do that?

I decided to give it a try.

.CodeMirror-cursor {
  border-left: 1px solid white;
  border-right: 1px solid black;
}

Hey presto! It Works! When in dark mode the cursor is white, and when in light mode the cursor is black. Hopefully this will save some frustration for someone out there.