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:
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.
2 Likes
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?
1 Like
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;
}
}
*/
1 Like
In the terminals of yore — think cathodic ray tubes —, the cursor display and blinking was handled in hardware. It isn’t the case any more since many, many years. It’s now handled entirely in software. As far as I know, the Obsidian cursor is not handled by Obsidian itself but by the underlying editor framework, namely CodeMirror. It’s CodeMirror who made a design decision, while issuing version 6, that the cursor wouldn’t be controllable by CSS any more. I remember having read somewhere in release notes that this was supposed to spare some computing resources for editing and displaying text, thus also extending battery life on laptops and mobile devices. How many minutes of battery life you gain and whether it’s worth the price paid in visibility remains to be proven. But it may well be true that something is gained in responsiveness on some machines.
As someone who has to wear glasses to work with a display or read a book, I’m firmly in the camp of those who feel that too much was lost in commodity. Ninja Cursor, however imperfect, is a godsend for me.
4 Likes
Thanks all. I’ll check this out.
I looked into this a little bit, and as far as I can tell there’s no elegant way to set the cursor width, but it’s pretty easy to change the cursor color.
If you don’t have one already, add a custom css file in your snippets folder.
{my-vault-directory}/.obsidian/snippets/custom.css
Add the following code
body.fancy-cursor .markdown-source-view.mod-cm6 .cm-content,
body .markdown-source-view.mod-cm6 .cm-content,
body.fancy-cursor .mod-cm6 .cm-line {
caret-color: var(--text-accent);
}
var(--text-accent) is whatever you chose in settings for Appearance > Accent Color. You can also hard-code that color, for example
caret-color: red;
Then, at the very bottom of Settings > Appearance, make sure your custom snippet is toggled on. That should do it!
There is actually a property called caret-shape, but it’s not yet supported, so we’ll just have to wait for that one.
BONUS
If you’re like me and you like the default theme with the exception of the very big heading tags (h1, h2, etc.) you can add the following to that same custom css file to tone those down a bit:
body {
--h1-size:1.125em;
--h2-size:1.115em;
--h3-size:1.105em;
--h4-size:1.005em;
--h5-size:1em;
--h6-size:0.95em;
}
3 Likes
I used TRU’s ninja-cursor plugin.
/* iAWriter-ish style. The cursor colour in a light theme */
.theme-light .x-cursor {
opacity: 1;
background: #00bbff;
width: 3px;
left: -1px;
top: 5px;
height: calc(13px + 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: 3px;
left: -1px;
top: 5px;
height: calc(13px + 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;
}
50% {
opacity: 1;
}
74% {
opacity: 0;
}
100% {
opacity: 0;
}
}
1 Like
Thanks, this is excellent.
This is my current CSS. Adding back the cursor blink with a 2 second delay after typing stops before the blinking resumes. The delay gives me time to think. The blinking is impatiently waiting for more words. Helps me with longform writing.
/* 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));
}
.cm-editor * {
caret-color: transparent !important;
}
/* Disable movement effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Blinking */
.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
animation: blink1 1s 0s both infinite;
animation-delay: 2s;
}
@keyframes blink1 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0.2;
}
65% {
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 0.2;
}
}
2 Likes
I noticed that on iOS, the regular cursor keeps blinking ‘behind’ the new, non-blinking (in my setup), thicker one. Only on iOS, not on desktop. This seems strange.
The Ninja Cursor tweak works great, thank you! However, it is strange to me that an app that is all about writing doesn’t have a proper, easily noticeable and customizable cursor by default.
2 Likes
The Ninja Cursor animation does eat up quite a bit of CPU though, so I disabled it… I think a bigger colorful static cursor is still more noticeable than the default blinking one.
Also just noticed the cursor doesn’t move along when headings jump to the right showing the hash symbols, when you use the mouse to place the cursor. Really wish there was a less hacky way to do this :-/
Where are you putting these styles? It has no impact when I add it to custom.css (but other styles in that file appear to be working).
1 Like
Hello. Thanks to you, I got acquainted with the plugin for the cursor, and a special thanks for the code for setting it up.
Tell me, is it possible to somehow change the code so that the wide cursor does not overlap the letter, but looks like in the screenshot that I attached? I am very far from the code, and yesterday I searched for 2 hours on this forum, reddit, and even in the css tutorial how to do this, but i couldn’t do it the way i want.
Thank you very much in advance if you can answer me.
Maybe try it with the default theme, and turn off other snippets as a test.
This is what mine looks like. Using minimal theme. Sometimes I use default theme. On the second image, selecting text, I see a little bit of overlap. I’m using 4px for cursor width. My font size is 20. My zoom level is 100%. If you are making the cursor wider and the font is smaller you would probably get more overlap. So increasing the font size would help.
Here is what it looks like when I change the width to 8px, so I guess making a block width doesn’t work great. At least it’s not a single pixel wide.
That’s cool. Over all this is kind of a hackish way to get a bigger/brighter cursor. Might not be worth it for everyone.