Options to modify cursor style

I’d love the option to stop my cursor blinking.

I also think it would be nice to have the option to change the cursor style (line, block, underscore, etc) in the options.

2 Likes

I think you can change cursor/caret colour in CSS, but not anything else:
https://www.w3schools.com/cssref/css3_pr_caret-color.asp

same. A block cursor is much easier to navigate especially on a high resolution monitor.

1 Like

You can use custom CSS to adjust the width of the cursor: https://discordapp.com/channels/686053708261228577/702656734631821413/715541084029321318

Stop blinking: https://discordapp.com/channels/686053708261228577/694233507500916796/715320851163250809

.CodeMirror-cursor, div.CodeMirror-cursor{
 visibility: visible !important
}
3 Likes

That works in the body of the editor, but not in the title lines in the file explorer or the main title line when viewing a file’s contents.

Would it not be beneficial to simply have a global setting for this?

That’s also a little hackier than I was thinking.

I don’t want the cursor to persist when obsidian doesn’t have focus, I want the cursor to only be solid when obsidian is in focus.

Its honestly a bit distracting otherwise.

Yes it would probably be better to have some global setting, this is what we have currently though.

Does this look like what you are after?
image

If you want to have that type of cursor, add this code to the end of your obsidian.css file:

.CodeMirror-cursor { 
  border-left-width: 0.5em;
}

You can adjust the value until you get the block width you like.
Hope this works for now!

1 Like

Yes ! thanks for solving my problem. this is what I was looking for :slightly_smiling_face:

1 Like

Does anyone know how to change the cursor color?

2 Likes

Thanks @curtismchale this was exactly what I needed

also changing width like said in discord worked perfectly, in this way:

.CodeMirror-cursor { 
   width: 9px !important; 
} 

Does anyone know how to make the cursor blink smoothly, like VSCode’s cursor “smooth” blinking transition setting?

Update: I wrote this in my custom.css file

/* Smooth cursor blinking */
.ͼ1.cm-focused .cm-cursorLayer {
  animation: ease cm-blink 1s infinite !important;
}

@keyframes cm-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cm-blink2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Here’s a video of how it looks like:
ezgif-3-49b148791e

2 Likes

My custom cursor snippet stopped working. It seems to me a writing application needs to have a nice cursor. It should be customizable.

I’m annoyed with this, but I’ve have a growing concern about Obsidian development for a few weeks.

1 Like

I tried all of these css. I added them as snippets. That didn’t work. Then, I added them to the end of the obsdidian.css and that did not work either. Is this not working with 1.0?

You can use a plugin to get cursor options. It doesn’t hide the system cursor that Obsidian is using, and it’s buggy but you may find it useful. You can use a css snippet to style it. I’ll add an example.

/* iAWriter-ish style. The cursor colour in a light theme */
.theme-light .x-cursor {
    opacity: 1;
    background: #00bbff;
    width: 4px;
    left: -1px;
    top: -2px;
    height: calc(6px + var(--cursor-height));
    transition: opacity;
    top: calc( -6px - var(--header-height));
}

/* iAWriter-ish style. The cursor colour in a dark theme */
.theme-dark .x-cursor {
    opacity: 1;
    background: #2c95b4;
    width: 4px;
    left: -1px;
    top: -2px;
    height: calc(6px + var(--cursor-height));
    transition: opacity;
    top: calc( -6px - var(--header-height));
}

/* Disable movement effect */
.cursorWrapper .x-cursor::after {
    display: none;
}

/* Blinking */

.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 0s both infinite;
}


/* 

@keyframes blink1 {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0.2;
    }
}

 */