Options to modify cursor style

Share & showcase
64

yeah i’m having lots of trouble with the sizing and positioning trying to use block cursor in live preview mode sadly. thank you anyway! will just have to wait a while for it to be supported.

65

Here’s my prototype CSS snippet for making the Vim “fat cursor” an underline instead of a block:

/* this removes the styles for the block-shaped cursor */
.ͼo.cm-focused > .cm-scroller > .cm-cursorLayer > .cm-fat-cursor {
    background: unset;
    color: unset;
}
.ͼo.cm-focused > .cm-scroller > .cm-cursorLayer > .cm-fat-cursor:before {
    content: "";
    background: var(--interactive-accent);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

In my case, I discarded this because an underline cursor doesn’t look very good on a variable (non-monospace) font.

But it may be a good reference for tweaking caret shape for the fat cursor and maybe the normal cursor too.

Using a pseudo-element (:before, :after) was pretty helpful for getting this (mostly) right.

67

For people like me, who only want to change the caret (cursor) color, this is all you need:

Edit: Nope, looks like after a reload it doesn’t work anymore.

.obsidian/snippets/caret.css:

.cm-editor {
  caret-color: black;
}
68

The following works:

.mod-cm6 .cm-line {
caret-color: red;
}

69

There’s a variable as well, --caret-color, for ease of use. e.g.

.theme-light {
    --caret-color: olive;
}

.theme-dark {
    --caret-color: hotpink;    
}
1 Like