Cursor is hard to see in some dark themes

[fduniho]

My preferred theme is duotone-dark, but one problem I have with this theme and various other dark themes is that the cursor is hard to see. The cursor is a black vertical line, and it doesn't show up very well against the dark background of this theme. I can make it out if I look closely, but it doesn't jump out at me like the cursor I'm seeing while typing this does. I'm currently typing this on a white background, which provides better contrast for the black vertical line cursor. For dark backgrounds, it would help if the cursor were a light color, such as white, that clearly stood out from the background. I have gotten the same issue with both Firefox 104.0 and 2.11.1811.49 (Stable channel) (64-bit). So, I don't think it is a browser issue. In case it matters, I am running WordPress 5.6.8, PHP 7.3.33, Apache/2.4.6 (CentOS), and MySQL 5.5.68-MariaDB.

Short of changing the themes, allowing users to create custom themes would solve the same problem.

[fduniho]

I see that the mouse cursor is different than what I am talking about. To avoid any confusion, I mean the vertical bar that flashes on and off to indicate where text may be entered.

While checking out different themes, I noticed that is is invisible in Zenburn, which uses a black background for the current paragraph.

[fduniho]

I learned that it is technically called an insertion caret, and it should be possible to change its color with the caret-color CSS element. However, I have not had any success in changing the CSS to change its color. I added this line to the end of admin-style.css, which I know gets loaded:

div {caret-color: white;}

I then cleared it from my server cache, made sure the modified CSS file could load as text, and even used develop-tools to make sure this was in the CSS. However, the insertion caret remained black. I was using Vivaldi, but it's not an issue with the browser, since caret-color did work correctly in a demo page for it I tried in the same browser at this url:

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

[fduniho]

I have found one dark theme with a white insertion caret. It is called railscasts. Developer Tools in Vivaldi identifies the caret-color value as rgb(244, 241, 237), which I identified in hex as #f4f1ed. When I switch back to duotone-dark, it identifies the caret-color as rgb(68,68,68). So, the caret-color value is being set with the theme, though Developer Tools is not telling me where it has been set.

Doing some digging with grep, I found this directory for themes:

wp-content/plugins/wp-githuber-md/assets/vendor/highlight.js/styles/

However, I don't see a file for duotone-dark, and the file for railscasts does not mention color-caret or the value #f4f1ed. So, I might be in the wrong place.

[fduniho]

I have now gone through all the dark themes. Only hopscotch, isotope, and railscasts had white insertion carets, and bespin had one the same color as the text, which is also appropriate. All the rest had insertion carets that did not contrast well with the background, which makes them all less usable. Other than the color of the insertion caret, I still prefer duotone-dark, and I hope you can do something about the coloring of the insertion caret to make it more usable.

[fduniho]

Just to note that the issue remains after moving to a more up-to-date server and updating WordPress. My environment is now WordPress 6.0.2 | PHP 8.0.23 | Apache/2.4.37 (rocky) | MySQL 10.3.32-MariaDB

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.