Google Translate plugin dark mode problem

[rxliuli]

Using the official Google Translate plugin: https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb

[rxliuli]

Similar to the previous issue #625, but the problem is that the text is difficult to see in dark mode

[chuntangwang]

Same issue here.

My solution is modifying CSS config .jfk-bubble in Dynamic Theme Editor.

1. Click extension icon of Dark Reader > More
2. Check Theme engine is Dynamic by default
3. Click button Dev Tools.

Default

.jfk-bubble {
    background-color: ${white} !important;
}

Replacing white with dark.

.jfk-bubble {
    background-color: ${dark} !important;
}

then click button Apply.

Maybe it will effect some websites using class .jfk-bubble, but at least it works for me now.

[rxliuli]

Same issue here.

My solution is modifying CSS config .jfk-bubble in Dynamic Theme Editor.

1. Click extension icon of Dark Reader > More
2. Check Theme engine is Dynamic by default
3. Click button Dev Tools.

Default

.jfk-bubble {
    background-color: ${white} !important;
}

Replacing white with dark.

.jfk-bubble {
    background-color: ${dark} !important;
}

then click button Apply.

Maybe it will effect some websites using class .jfk-bubble, but at least it works for me now.

Okay, this did solve my problem, but hopefully the official can give a better solution (dark mode, but a more recognizable way of text)

[FranklinYu]

Styling things in shadow DOM is very difficult. Maybe we can look at how Stylus team is trying to tackle it: openstyles/stylus#739

[alexanderby]

@FranklinYu Interesting solution, thanks.

Currently I've made a fix here 811cefb

But Chrome Web Store update reviews have become too long, so maybe you could try copying the fix into Dark Reader Dev Tools.

[rxliuli]

@FranklinYu

Currently I've made a fix here 811cefb

But Chrome Web Store update reviews have become too long, so maybe you could try copying the fix into Dark Reader Dev Tools.

Yes this solution does work!

[alexanderby]

Also there used to be an auto-update of these config files from GitHub, but the GitHub team started to complain about huge amount of traffic.

[rxliuli]

Also there used to be an auto-update of these config files from GitHub, but the GitHub team started to complain about huge amount of traffic.

I think this can be bypassed by CDN + periodic (daily) updates. . .

[rxliuli]

I have done this before (updated once a day), and it looks like there should be no problem at this time. If the number of users is really large, then you can use cdn jsdelivr as a relay. . .

An oil monkey script that does this：https://greasyfork.org/zh-CN/scripts/391193-%E8%A7%A3%E9%99%A4%E7%BD%91%E9%A1%B5%E9%99%90%E5%88%B6

The key code is as follows

  function compatibleAsync(res, callback) {
    return res instanceof Promise ? res.then(callback) : callback(res)
  }

  function onceOfCycle(fn, time) {
    const get = window.GM_getValue
    const set = window.GM_setValue
    const LastUpdateKey = 'LastUpdate'
    const LastValueKey = 'LastValue'
    return new Proxy(fn, {
      apply(_, _this, args) {
        const now = Date.now()
        const last = get(LastUpdateKey)
        if (last !== null && now - last < time) {
          return safeExec(() => JSON.parse(get(LastValueKey)))
        }
        return compatibleAsync(Reflect.apply(_, _this, args), res => {
          set(LastUpdateKey, now)
          set(LastValueKey, JSON.stringify(res))
          return res
        })
      },
    })
  }

[FranklinYu]

Yes CDN can help. In addition to https://www.jsdelivr.com mentioned above, https://statically.io is another famous option.