Fix Inverted Image When Dark Mode on Google Chrome

Notes

Since Chrome 97 (I think), Chrome dark mode looks broken, not only chrome others browser chromium has this issue too such as

  1. Brave
  2. Chromium
  3. Edge

So, this is for example:

  • SVG icon inverted look like this.
12
SVG Icon Inverted SVG Icon Not Inverted
  • YouTube has weird shadow

YouTube weird shadow

Fix inverted images & weird shadow YouTube

For fix this weird issue, you just change Auto Dark Mode for Web Contents flags from Enabled to Enabled with selective inversion of non-image elements

Step-by-step for resolving this issue:

  1. Open this URL chrome://flags/#enable-force-dark
  2. Change from Enabled to Enabled with selective inversion of non-image elements
  3. Restart or relaunch your browser.

If you want to disable Dark Mode completely

  1. Open this URL chrome://flags/#enable-force-dark
  2. Change to Default or Disabled
  3. Restart or relaunch your browser.

This fix also can use on others Chromium-based browser.

Fix Background Image for some pages

Numerous of website has background-image CSS, in dark mode these websites look broken.

12
Website with background images, Website without background images

For resolve this issue, we need extensions called Stylus.

Stylus can change attribute or value CSS for website, so in this case We change an attribute background-image to none

  1. Install extensions Stylus
  2. Click on Stylus icon and Click Manage
  3. Click on Write new style
12
Stylus Extensions Stylus Extensions
  1. For example, my style name is, Remove Background Images but, you can use other names.
  2. Copy and Paste this line to Stylus editor.
1
2
3
body  {
  background-image:  none  !important;
}
  1. Save.

Stylus Extensions

For comparison, website https://subscene.com with and without Background Images

12
With Background Images Without Background Images

Bantu bagikan halaman ini ke:
Built with Hugo
Theme Stack designed by Jimmy