'How to configure a site-specific custom caret color for Dark Reader?

For script.google.com, I can make the entire page site dark, but when I do, I cannot see the cursor/caret. I've found the developer tools for Dark Reader, but I can't seem to figure out the CSS to configure the cursor to be white.

I've tried adding this via the Developer Tools, but I still cannot see the caret:

================================

script.google.com

INVERT
.docs-icon
.icon

CSS
html, body, input, text, textarea, select, button, div {
   caret-color: red;
}

================================

How can I configure a site-specific custom cursor/caret color in Dark Reader?

cssgoogle-chrome


Solution 1:[1]

I had the same problem with formulas on Google Sheets where. I ended up selecting a parent element with an id and assigning caret-color to #000 so Dark Reader would change it to #FFF on all instances.

Solution 2:[2]

caret color

.monaco-editor.cursors-layer.cursor {
background-color: #cccccc !important;
border-color: #cccccc !important; 
color: #ffffff !important;}

UPD: it turns out that Dark Reader already has this update

================================

script.google.com

INVERT
.docs-icon
.icon
.monaco-editor .cursors-layer > .cursor

IGNORE INLINE STYLE
mask > *

================================

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlameItOnJoe
Solution 2 Daddy Cool

Related Questions