# Cursor visibility in dark mode

**URL:** <https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654>\
**Category:** UX\
**Created:** [4월 7, 2019, 1:30오전 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654 "2019-04-07T01:30:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JohnAtl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johnatl/32/128375_2.png) [@JohnAtl](https://meta.discourse.org/u/JohnAtl)\
**Post date:** [4월 7, 2019, 1:30오전 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/1 "2019-04-07T01:30:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [4월 7, 2019, 1:35오전 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/2 "2019-04-07T01:35:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JohnAtl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johnatl/32/128375_2.png) [@JohnAtl](https://meta.discourse.org/u/JohnAtl)\
**Post date:** [4월 7, 2019, 9:54오전 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/3 "2019-04-07T09:54:50Z")

</div>

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](http://talk.macpowerusers.com)).

The screenshot below is from this site.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/4/14fd7d87e97f45063903571be53b5b6ad0aa74bc.jpeg)

Thanks

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [4월 8, 2019, 4:26오후 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/4 "2019-04-08T16:26:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [4월 8, 2019, 4:52오후 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/5 "2019-04-08T16:52:57Z")

</div>

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… 🤔

---

<div class="post-metadata">

**Author:** ![JohnAtl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johnatl/32/128375_2.png) [@JohnAtl](https://meta.discourse.org/u/JohnAtl)\
**Post date:** [4월 9, 2019, 8:20오후 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/7 "2019-04-09T20:20:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [6월 5, 2019, 6:29오후 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/8 "2019-06-05T18:29:48Z")

</div>

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

[https://github.com/discourse/discourse/commit/54db23e4fff759e716f56d4f9582e22652a66763](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? 🤔

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

```css
input,
select,
textarea {
   caret-color: /* your color here */;
}

```

---

<div class="post-metadata">

**Author:** ![JohnAtl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johnatl/32/128375_2.png) [@JohnAtl](https://meta.discourse.org/u/JohnAtl)\
**Post date:** [8월 6, 2019, 6:07오후 UTC](https://meta.discourse.org/t/cursor-visibility-in-dark-mode/113654/9 "2019-08-06T18:07:28Z")

</div>

Thanks Kris!  
…
