How to Change Block Cursor Color (Vim Mode)

Help
1

Hey guys,

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

this one:

cursor
cursor1920×1080 26.2 KB

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
2

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
3

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

4

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!

2 Likes
5

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

cursor-regular
cursor-regular1920×1080 42.1 KB

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:

cursor-visual
cursor-visual1920×1080 42.6 KB

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!

6

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;
}
4 Likes
7

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
8

Has anyone been able to make the width of the cursor same as the width of each character (not hard-coding the width)? This would be helpful for using non monospaced fonts.

1 Like
9

Perhaps this is what you need, but not sure if you are refering to something else

Meta Post - Common CSS Hacks - #9 by rsdimitrov

hope that helps!

11

Got you, that’s an interesting point. I also for the most part use a mono space font when using vim-mode. I don’t know how to make the cursor adapt to non-monospaced fonts, but that’s an interesting idea, sorry I can’t be of more help with that.

1 Like
12

That worked for me perfectly until the recent Live Preview update. Is it still working for you guys?

13

A selector that currently works is

.ͼo.cm-focused .cm-fat-cursor {
      /* ... set styles here ... */
}

This is for the focussed cursor. The cursor in an unfocussed pane, or if you’re tabbed out, can be selected with .ͼo:not(.cm-focused) .cm-fat-cursor

Best,
Ben

3 Likes