I don’t know which of the 2 designations is the more semantically correct one as I see both (“caret” and “cursor”) being used seemingly interchangeably between different users.
Anyways, I’d like an option to have the “vertical blinking line” (cursor/caret) to be thicker by default in Obsidian. It is only 1 pixel wide by default, and a drag to look at and identify in the text – especially after a few hours of reading and typing have already passed by.
Ideally, we’d have an option to customize the caret/cursor thickness by default. Similar to how Windows 11 allows the user to globally customize the thickness of the caret (a setting which is inherited by nearly all non-electron apps).
Oh and btw, the Minimal Theme, which seemingly enforces a slightly thicker caret (which still isn’t thick enough IMHO) barely even “works” as intended, with the caret returning to its 1px thinness after a few paragraphs of text, or after the usage of a few lists or checkboxes.
I agree. I really need a cursor with more visibility. It’s not perfect but I use ninja cursor plugin to do this.
With a css snippet you can style to cursor how you like. Sometimes the plugin breaks if you click outside of files. For example to rename a file. If this happens you will just have the system cursor until restarting Obsidian, but I have only noticed that a few times.
The problem is how that plugin, even when it works half-“fine”, it’ll present a number of visual glitches. Only to stop working after a while, after changing file or folder names for example.
Also, lurking this forum presents me with the information that CSS tricks that used to work to change caret/cursor thickness no longer do, after the 1.0 release.
IMHO, something as simple as allowing for 3 types of cursors: Ultra-thin (1px, like we have now), Medium (like 3 or 4 px) and Block (covering an entire character) would be the optimal solution, either via plugin or packaged in the default release (how it should be IMHO)
I completely agree! I wish this was a global setting on Mac computers as well. I wish you could change the thickness of the caret and also the color as well. A lot of times it’s really hard to see.
I noticed that with “Vim key bindings” turned on, cursor thickness is no longer controlled by the border-left-width of .cm-cursor. Likewise, .cm-blink and .cm-blink2 animations seem to get ignored.
This means that in vim insert mode, the cursor is always 1px wide, which makes it very hard to see on my high DPI monitor. The workaround is to escape into command mode so I see a block cursor, but that’s not ideal.
What I’m supposing I need to do to get the cursor/caret to be thick enough for visibility with “Vim key bindings” on is to instead look at the vim cursor layer classes and attempt a change there with a snippet. If I remember to return here, I’ll report what I find.
I was also glad for the mention of the Ninja cursor plugin. That’s a bit too flashy for my taste, but it definitely keeps the cursor visible. Also, the source could be useful to do literally whatever one might wish to do with the cursor/caret.
(Note: Until I began drafting this reply, I didn’t know that it was my vim key bindings that made my cursor/caret 1px wide no matter what else I might try fiddling with. It was the mention of Minimal having a slightly thicker cursor that tipped me off to maybe something in my settings being a culprit to my observed 1px-no-matter-what cursor/caret.)
Just a heads-up that you can turn off the whooshing in Ninja Cursor, and only use it to have a bigger, optionally smoothly animated cursor. (Check out the links above.)
But there are still some small problems with it, which bothered me enough to make me switch back to the default cursor, just changing its color to super bright.
Just wanted to update this post with the fact that with macOS Sonoma Apple made the caret all over the OS thicker by default. It’s now rounded with a 2px thickness. It’s so nice. It would be great if Obsidian matched this. Pretty please.
I’ve seen that others here have referred to Ninja Cursor. Whilst I can attest that it does have several little visual gaffs that might annoy you if you’re not too concerned about them I’d recommend at least giving it a go.
Here is a modified version of the CSS I adapted to allow for a Smooth Caret Effect. I’ve removed the animation and increased the width to 2px, though both can easily be altered by changing the CSS.
Just thought you might find this useful.
/* Customization for the Ninja Cursor */
.x-cursor {
position: inline block;
background: var(--caret-color); /* Sets the Ninja Cursor Colour. */
width: 2px; /* Sets the width of the Ninja Cursor. */
transition: all 0ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */
top: calc(0px - var(--header-height)); /* Ensures the cursor is inline with selected line. */
--cursor-height: calc(var(font-size) - 2px); /* Sets Ninja Cursor Height. Font-Height variable used to ensure height matches current body text input. For a taller/shorter cursor alter the px. */
max-height: calc(var(--font-ui-large) * 2); /* Caps the height of the Ninja Cursor to the span of two lines. Stops Ninja Cursor spanning several lines by capping it at two. It can be capped at one but the cursor is unable to change height to match headings. */
}
/* Hides the Default Cursor */
body:has(.x-cursor) * {
caret-color: transparent;
}
.cm-cursorLayer {
animation: none !important;
display: none;
}
/* Hides the Default Ninja Cursor Dashing Effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Applies the Caret Blinking Effect */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
/* Keyframes for the Caret Blinking Effect */
@keyframes blink1 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}
@keyframes blink0 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}