Dark theme shows background color artifacts on external displays on macOS

[andrewheiss]

On macOS, the dark Themeable theme often displays rendering artifacts on external monitors: regions of the background appear as slightly lighter or differently-colored shapes against the main background. The artifacts do not appear on the built-in MacBook display and do not occur with other Typora dark themes (e.g., the built-in Night theme).

Here's an example:

The root cause might be an underlying Electron issue that is (weirdly!) specifically related to the color #171717. Typora sets the background of the html CSS element to --bg-color, which, following up the chain of other definitions (--bg-color → --background-color → --mono-50 → --neutral-50), is defined in themeable-dark.css as #171717.

For whatever reason, Electron doesn't seem to like that exact color (see electron/electron#13393), which triggers this rendering/compositing bug (other projects report similar old issues too, like Atom atom/atom#12634)

One workaround from electron/electron#13393 (comment) is to define the color to be just a tiny bit transparent.

I've added this to a local themeable-dark.user.css to redefine --neutral-50 to be #171717 at 99.6% opacity (or #171717FE):

:root {
    --neutral-50: #171717FE;
    /* This works too at 99% opacity */
    /* --neutral-50: rgba(23, 23, 23, 0.99); */
}

That removes the visual artifacts on external monitors in dark mode.

I'm not sure if there's any good solution—it might be that Typora is using an older build of Electron, or that this Electron bug isn't fixed (despite that issue being closed), or something else.