CSS for Changing the Color of Mouse Cursor in Edit Mode

Help
1

I noticed that whatever theme I choose, the color of the cursor (in text edit mode) remains the same, which is different from my OS’s default. It is really hard to see it in the current theme (background color) that I am using. Does anyone know what CSS snippets should I use to make it black?

2

I was curious, how they do it. Because it’s not the caret-color, which is used for text cursors. But I found it out:

/** Text Cursor Indicator */
.CodeMirror-cursor,
.CodeMirror div.CodeMirror-secondarycursor {
  border-color: <YOUR-COLOR-HERE>;
}
1 Like
3

Not working for me, I don’t notice any changes.

4

Hey, I edited my message from earlier with this:

/** Text Cursor Indicator */
.CodeMirror-cursor,
.CodeMirror div.CodeMirror-secondarycursor {
  border-color: <YOUR-COLOR-HERE>;
}

Try using red to see if any changes are visible.

That’s what it looks like for me:

2 Likes
5

I want the mouse cursor to change color, that vertical line you changed it’s color (don’t now what it is called) is something different. Look at here for example to see what I mean: cursor | CSS-Tricks

6

That would need to replace your whole mouse. You can’t just change the colour like that. What OS are you using?

I am on Windows 10 and I have my default mouse cursor inside Obsidian.

7

With this code, your cursor would look like this

:root {
    cursor: url(https://cdn.custom-cursor.com/db/4762/32/arrow2714.png), default;
}

lmao

1 Like
8

I am using Windows7. That what I thought at first too. But I experimented with it a little bit and noticed that cursor’s coloring is different in other apps, like Word or my Web browser, so I think every app has it’s own coloring.

9

try to use

:root {
    cursor: default;
}

or

:root {
    cursor: auto;
}
10

Yes I saw that kind of changing when I was searching. But it’s using internet which means I have to rely on internet connection for a basic thing. Also I prefer to just change the color which is unrecognizable against my current background. I like the background but if I am forced to I can change that easily.

11

The CSS code I have shared so far does not require Internet. Only if you get an image from the INternet. You can just use a local image for a cursor. Have you tried default and/or auto already?

1 Like
12

Maybe this will help you
Mouse cursor color [SOLVED] - #2 by Klaas?

1 Like
13

No changes, from looks of the code that makes sense. As cursor by default should be like what it’s looking. For changing it it should be something else

14

No his problem was something different. He is also on Mac and I am using Windows. I originally posted there, but later moved it to here.

15

I think you can choose this option to make your cursor stand out from the background
image

1 Like
16

I know. That one you posted that actually works and changes the shape of the cursor uses internet unfortunately. If I want to that I will change the whole thing in Control Panel. But I want a single the color change.

17

Interesting, where can I choose that option?

18

Window setting => mouse setting => adjust mouse & cursor size for win10. But i think win7 option should also be in the same place.
This link show you how for win7: https://www.howtogeek.com/273878/how-to-change-the-size-and-color-of-the-mouse-pointer-in-windows/

3 Likes
19

Thanks, it works. Altho it changed all forms of my mouse cursor for some reason, I must play with it more. I think it should be possible to be changed via css inside the app.

20

I found it. It changes the mouse all the way. It is also available in mouse properties option which I somehow missed at the beginning

image

1 Like