Mouse pointer color


#1

I have an issue with the color of the text input pointer that is shown in the editor. When you have a dark background it’s almost invisible and I constantly lose track of it. It looks to be the default OSX text input cursor, and has a VERY subtle white outline, but not nearly enough to make it easily visible.

If you compare Atom’s pointer to Sublime Text’s with a dark background, it has a completely white pointer.

It would be nice if Atom customized the cursor for dark backgrounds. I did try to style it using the CSS3 cursor: url() rule in my stylesheet to customize it, but it seems to be ignored(?).

Due to the fact that it’s impossible to take a screenshot that includes the app’s actual pointer, I’m unable to provide you with any, to display the difference.


Mouse Cursor of Editing Status in Dark Theme
#2

This works if you add it to your styles.less file.

.editor {
  cursor: url(http://wiki.ooo4kids.org/images/b/b3/Cursor-Hand.svg), auto;
}

#3

Thanks… hmmm… I tried the same thing and it didn’t work… though I was pointing to a local image in my ~/.atom directory. Is there a particular way that I need to point to an image in that directory?

Well, I ended up hosting the image on a locally hosted web location and pointed to it, which works.


#4

Try with a full file path: file:///Users/mgregoire/.atom/file.svg


#5

That hadn’t even occurred to me. It worked perfectly. Thanks!


#6

I used the image found here : http://upload.wikimedia.org/wikipedia/commons/d/d0/Wolf_Lambert_cursor.png

I resized the image to (13 x 28) and inverted the colors, much more visible.


#7

I ultimately reverted to the default cursor due to strange selection issues that arise when you replace the cursor. I definitely feel that Atom developers still need to make the default cursor more visible in dark background context.


#8

I just tried it and it appears that the system is assuming that the “hotspot” is in the upper left corner of the image. It doesn’t appear that there is any way to specify where the hotspot for the cursor is via CSS. I may do a little more digging to see if there is a better solution.

I found this StackOverflow answer that states there is a way to specify the hotspot in CSS3:

So I changed my stylesheet to read:

.editor {
  cursor: url(file:///Users/leedohm/.atom/small_white_ibar.png) 6 12, auto;
}

I used the image linked by @limratana and modified it the same way as they mention. It works great!


#9

I figured out a little more with the help of @kevinsawicki and created the White Cursor package:

You can use an atom:// protocol in your URLs to provide assets, like the white I-bar cursor image, from a package.


#10

@leedohm funny - i had installed your package before i saw this thread… read this thread and I thought - “hey, leedohm should share his package here!”


#11

Thanks, Very helpful of this package, should be contain in dark theme.


#12

This package saved my eyes, thank you so much.


#13

I made an account just to tell you I love this package