Cursor visibility in dark mode

UX
1

The dark blue cursor is very hard to see in dark mode.

2

Can you share a screenshot and give more info on browser and platform?

From my testing on Chrome (73) and Safari (12.1) on MacOS (10.14.4) it’s white.

4 Likes
3

iPad Pro 10.5"
iOS 12.2 (16E227)
Brave Version 1.9.1 (19.04.02.12)
Safari
Firefox Focus 8.1.2

I also looked at different Discourse sites (this one, talk.macpowerusers.com).

The screenshot below is from this site.

image

Thanks

2 Likes
4

@awesomerobot is that something we should control (via caret-color) or leave to the browsers?

5

Seems worth adding since it looks like browsers aren’t doing a great job at it (looks like Safari on iOS always uses blue no matter what the background color is?).

If we do caret-color: currentColor; it would match the text color of the input, which would also make things easier.

Edit… now that I think about it for a minute, this would make the caret a little less obvious on iOS because it would be black and not blue (for the default theme anyway). Maybe we should only set it on dark themes… :thinking:

6 Likes
7

The Ghost theme’s yellow cursor is sufficiently different from the white text that it’s a little more obvious.

8

Made an update that sets the caret color to match the text color.

https://github.com/discourse/discourse/commit/54db23e4fff759e716f56d4f9582e22652a66763

I was considering having an exception for light themes on iOS, but that seemed like a very narrow exception and there are cases where you could have a blue background with a blue iOS caret… so it seems like it would be better to consistently match the text color everywhere…

I wonder if Apple will have a better cursor color for dark mode in iOS 13? :thinking:

You can override this in a theme with the following CSS:

input,
select,
textarea {
   caret-color: /* your color here */;
}
9 Likes
9

Thanks Kris!
…