How to Change Block Cursor Color (Vim Mode)

Hey guys,

I’m trying to change the color of the block cursor when activating Vim-mode

this one:

I’ve been able to modify a few things from my vim cursor such as:

  • the width of my vim cursor
  • stopping it from blinking

There are a few different posts on how to modify the cursor such as:

I’ve played with a lot of code as well as trying to find it with the inspector, but I can’t figure it out.

I appreciate any help! Thanks!

1 Like

I’m not an expert, but I think it might be .cm-fat-cursor .CodeMirror-cursor

Edit: After testing my self, this is indeed the right selector. I’ll move this to #resolved-help, let me know if it didn’t work for you and I’ll bring it back!

1 Like

Hey @argentum thanks for the help, unfortunately it’s not working

I tried the following:

.cm-fat-cursor .CodeMirror-cursor {
  color: #ff0000;
  }

I tried it in my theme, as well as in an empty obsidian.css and it’s not changing the vim cursor color, not sure why

Not sure if it’s something with your theme (I don’t know enough CSS for this!), but you might try adding !important after your colour.

I also found the cursor for visual mode: .cm-animate-fat-cursor.

This is how it looks like for me:
Peek 2020-10-23 19-34

I’ll move it back to #help in the meantime!

1 Like

Appreciate the help,

It’s not working, I’m testing it on an empty obsidian.css to make sure my theme isn’t interfering.

I’m testing both of the following codes adding !important and removing it (it doesn’t change things for me)

Side note: I’m testing things with #ff0000; which is a bright red.

Here’s the first one:

  .cm-fat-cursor .CodeMirror-cursor {
  color: #ff0000 !important;
  }

but it’s still not changing the cursor color


Visual Mode

I tried .cm-animate-fat-cursor as well to see if that one is working

I used this code:

.cm-animate-fat-cursor
{
  color: #ff0000 !important;
	}

It changes only the text under it, like so:


I’m on linux Manjaro version 0.9.6 intalled with .AppImage I don’t think linux should be the reaon for this not to work,

most likely there’s something I’m missing to make the code work

Thanks!

Woops! I should’ve pasted my full code, that would have been more helpful! You need to change the background-color

.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--nord4);
  opacity: 0.5;
  width: 5px;
}

.cm-animate-fat-cursor {
  background-color: var(--nord4);
  opacity: 0.5;
  width: 5px;
}
3 Likes

Perfect, thank you so much, that was it! That solves it for me

just for the sake of others who might find this post.

Aparrently it’s also possible to define it like this:

  .CodeMirror-cursor {
  background-color: #ff0000 !important;
  opacity: 60% !important;
  }

in the case of this code it’s needed to put !important like you said!

Thanks a lot for the help!

Update:

this code would change the cursor even when it’s not in vim-mode

to keep in only in vim mode the .cm-fat-cursor .CodeMirror-cursor is needed

1 Like