Options to modify cursor style

Share & showcase
30

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.

Screenshot_2023-05-25_12-49-27

Screenshot_2023-05-25_12-49-50

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.

Screenshot_2023-05-25_13-05-16

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.

31

Hello. What you show in the screenshots is exactly what I’m trying to solve - I’m trying to make a more visible and wider cursor that doesn’t overlap the text.

I saw a guy’s theme where the cursor looks like this, but I don’t like the theme at all (and I don’t know how to find his theme) and I also use the minimal theme.

In my searches, I even got to a site with css guides (the guy above gave a link to it) and tried to embed code from them into the code you cited above, but nothing happened (as I already wrote, I don’t know how to code).

Formally, what I’m trying to achieve is a block cursor like in the screenshot (a wide, visible one that highlights the whole character and doesn’t overlap it).
image

The only thing I found close to what I want is your plugin and your code described here. And I agree - it’s a hell of a lot of effort for such a banal but necessary feature )) Thanks again for the plugin and help, by the way, you’re cool!

However, now that we seem to understand each other quite well. Is it possible to do what I want with your plugin, or should I give up and hope that one day the obsidian developers will introduce such a feature themselves? Logically, if such a solution is sewn into one of the themes, it should be realizable right?

If you give me a direction where to look or even help with such a code, I would be just happy!

33

To clarify, that’s not my plugin or my code. I just use the plugin this way.

But to answer your question I don’t believe caret-shape is recognized yet. Someone else mentioned this above. Hopefully in an update.

For now you can try this. Make as wide as you need. Use an rgb color picker to find the color you want, keep the a value at 0.5. The RGB numbers are for the color and A is the alpha channel (opacity).

You might have to change left from -1px to something else to adjust the offset. Here is what mine looked like when messing around with it.

Screenshot_2023-05-26_14-04-12

    background: rgba(78, 163, 191, 0.5);
    width: 14px;
    left: -1px;
1 Like
34

Indeed, something I got confused with this, the creator of the ninja cursor - vorotamoroz.

In any case, you helped me make everything exactly the way I wanted. Thank you very much!

35

I asked for help in the CodeMirror forum (Making the (text) cursor more noticeable - discuss.CodeMirror) and apparently this should be easy to do in CodeMirror. But, I guess Obsidian just blocks the CSS or something? (Sorry, I don’t really know much about CSS…) If so, shouldn’t it be easy to just enable access to the element?

36

Also… why is this thread tagged “editor-legacy”, when this problem concerns the new editor? I don’t think you can call modifying cursor style a legacy feature.

37

For those who came here looking for a way to disable blinking, and the shared snippets didn’t work, here’s the solution as of the time of this post:

.cm-cursorLayer {
  animation: none !important;
}
38

none of these do anything for me and it’s making me sooooo sad

hope this becomes an official feature someday

39

Are you using the Ninja Cursor plugin? Most of the newer snippets are for that specific plugin’s cursor. It also might not work if you’re in VIM mode. For example, try the Serenity theme with Ninja Cursor installed and in Style Settings go to Plugins > Ninja Cursor and enable iA-style cursor.

40

I installed Ninja Cursor, and putting some code from @TRU above had an effect, but definitely not an intended one. It made a phantom cursor that only appears when using the arrow keys to navigate, and 3 lines above the cursor lol

Also I’m a die hard Wikipedia theme user so fangirling a little rn

41

Try this snippet. It should align the cursor correctly, and it includes style settings options for cursor thickness, animation, and color. I tried to make it blink only when the user is not typing, but it doesn’t always work as intended.

Screenshot 2023-09-14 204410
Screenshot 2023-09-14 2044101708×640 32.9 KB


/* cursor effect with Ninja Cursor plugin */
/* inspired by iA Writer */
body {
    --cursor-width: 2.5px;
    --cursor-color: var(--interactive-accent);
}

/* main cursor appearance */
.cursorWrapper .x-cursor {
    opacity: 1;
    background: var(--cursor-color);
    width: var(--cursor-width);
    left: -1px;
    position: relative;
    top: calc( calc(var(--font-text-size) * -0.01) - var(--header-height));
    height: calc(var(--cursor-height) + 1px);
    transition: opacity;
}
/* remove flashing */
 .cursorWrapper .x-cursor::after{
    display: none;
}
.cm-cursorLayer {
    animation: none !important;
    visibility: hidden !important;
}


/* cursor animation */
.cursorWrapper .x-cursor1 {
    animation: step-end cursorblink-alt 0.95s 0s both infinite;
}
 .cursorWrapper .x-cursor0 {
    animation: step-end cursorblink 0.95s 0s both infinite;
}

.cursor-tween .cursorWrapper .x-cursor0{
    animation: cursorblink2 0.9s 0s both infinite;
}

.cursor-tween .cursorWrapper .x-cursor1 {
    animation: cursorblink-alt 0.9s 0s both infinite;
}


@keyframes cursorblink-alt {
0% {
opacity: 1;
}
100% {
    opacity: 1;
}
}
@keyframes cursorblink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes cursorblink2 {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* remove normal cursor when ninjacursor is installed */
body:has(.x-cursor) .cm-editor * {
caret-color: transparent;
}

/* @settings
name: Ninja Cursor
id: ninja-cursor-snippet
settings:
    -
        id: cursor-tween
        title: Tween Cursor Animation
        description: Give the blinking cursor a smooth opacity transition.
        type: class-toggle
        default: false
    -
        id: cursor-width
        title: Cursor Thickness
        description: Control the cursor thickness
        type: variable-number-slider
        default: 2.5
        min: 0.5
        max: 4
        format: px
        step: 0.5
    -
        id: cursor-color
        title: Cursor Color
        type: variable-select
        default: var(--interactive-accent)
        allowEmpty: false
        options:
            - 
                label: Interactive Accent
                value: var(--interactive-accent)
            -
                label: Red
                value: var(--color-red)
            -
                label: Orange
                value: var(--color-orange)
            -
                label: Cyan
                value: var(--color-cyan)
            -
                label: Blue
                value: '#00b2ff'
            -
                label: Purple
                value: var(--color-purple)
            -
                label: Pink
                value: var(--color-pink)
            -
                label: Faint Text
                value: var(--text-faint)
            -
                label: Muted Text
                value: var(--text-muted)
            -
                label: Text
                value: var(--text-normal)
    -

*/

Also, glad you’re enjoying the Wikipedia theme. I’ve always loved the look of Wikipedia so I had to make it a theme :slight_smile:

3 Likes
42

This is almost impossible since they removed custom cursor support from obsidian.

43

Hey, that did it! Thanks!

1 Like
44

cursor-preview

Here’s my updated snippet that incorporates all the fixes as well as solves the latest bug with the cursor blinking during typing as well as the cursor sometimes not blinking when idle. In the code I did reduce the animation delay to 1 second.

/* iAWriter-ish style. */
.cursorWrapper .x-cursor {
    background: rgba(49, 177, 235, 1);
    width: 3px;
    left: -1px;
    top: calc( -6px - var(--header-height));;
    height: calc(12px + var(--cursor-height));
    transition: opacity;
}
/* The cursor colour in a light theme */
.theme-light .x-cursor {
    background: rgba(49, 177, 235, 1);
}
/*The cursor colour in a dark theme */
.theme-dark .x-cursor {
    /* replace if you want purple cursor
	background: rgba(225,187, 225, 1); */
	background: rgba(49, 177, 235, 1);
}

/* remove normal cursor when ninjacursor is installed.
Alternative method: caret-color: rgba(0, 0, 0, 1);
*/
body:has(.x-cursor) .cm-editor * {
caret-color: transparent;
}

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

/* Remove normal cursor on text selection */
.cm-cursorLayer {
    animation: none !important;
    visibility: hidden !important;
}

/* Blinking */
.cursorWrapper .x-cursor0 {
	animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 1s both infinite;
}

@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; }
}
7 Likes
45

Thanks for the solution with the Ninja Cursor plugin! Does anyone know how to remove the multi-cursor effect when selecting multiple lines?

image
image1676×480 63.9 KB

Ninja Cursor plugin is used with the snippet proposed by BrambleBrain with small color changes

46

Thank you, it works really well!

47

Amazing. Thank you :slightly_smiling_face:

48

I used this fix and the color and width changed but the cursor no sits on the line below where it should be. Am I missing something obvious?

49

Remove the extra semicolon (;) in top: calc( -6px - var(--header-height));;

50

Thanks for everyone’s work so far it’s way nicer than default already.

I also have a request/idea for this.

In Vim editing mode, I want the caret to be a solid block overlaid on the text with low opacity when reading/browsing. And then when I hit any key which switches to insert mode (i, a) I want the caret to turn into a vertical blinking caret positioned directly after the overlaid character. Default size, color, and blink rate are all fine. I think this is the default behavior in Vim.

Is this possible?