Hints have become unreadable (no contrast between background/foreground colors) when using Dark Reader

Prelude

• Could you find answer in below documents?

  1. FAQ / 常见问题
  2. README / 读我

No.

• Have you searched your problem in issues?

Yes, I don’t think it is related to #1343.

Error details

When using Surfingkeys in combination with Dark Reader in dark mode, hints have become unreadable (I’m suspecting this occurred after an update to Dark Reader).

Current look with Dark Reader enabled for this site:

Current look with Dark Reader disabled for this site::

SurfingKeys: 1.0.3

Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36

URL: <The_URL_Where_You_Find_The_Issue>

Context

I first noticed the problem in the middle of a browsing session with Chromium. One moment the hints were readable, the next (after opening a new browser window) they weren’t. I next tried with Chromium with a fresh temporary user data dir (profile), and installed just Surfingkeys and Dark Reader extensions, in this sequence. The odd thing is right after installing Dark Reader, Surfingkeys hints are still visible in all existing tabs and windows, but as soon as I open a new tab and browse to some site in it, hints become unreadable.

A simple script which I used to reproduce using a clean Chromium profile::

#!/usr/bin/bash

extensions=(
    # Surfingkeys
    https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc?hl=en-US
    # Dark Reader
    https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US
)

error() {
    echo "$*" >&2
    exit 1
}

# tmpdir=$(mktemp -d) || error "Cannot create temporary directory"
tmpdir=$HOME/tmp/chrome
mkdir -p "$tmpdir"
chromium --user-data-dir="$tmpdir" "${extensions[@]}"
# rm -rf "$tmpdir"

[lmburns]

@chalop Thank you, that worked for me as well. But now, when pressing v the hint background is white and some characters are a different shade of white while others are blue. I use the f functionality more, so it is alright. It’d just be nice to have control over both, and I’m sure there is some way to change it

Edit: I actually found the answer in the api documentation

api.Hints.style(
  "padding: 1px; color:#efe1eb; background: none; background-color: #b16286"
);

api.Hints.style(
  "div{color:#efe1eb; background: none; background-color: #e78a4e;} div.begin{color:#ea6962;}",
  "text"
);

Those colors don’t look good, but it involves setting both of them. The first is for f, the second is for v

[az-pz]

This issue has been fixed in darkreader (https://github.com/darkreader/darkreader/pull/8173). It’s not available until the next version is released in browser app stores. You can run master branch build of darkreader if you want to use it immediately.