Add dark mode support to images

[banchan86]

Motivation

The migration to the new docfx modern template brings with it support for dark mode, but the existing images in this repository have not been updated and are unreadable in dark mode.

Proposed solution

Screenshots

• We could provide dark mode versions of them, but for now they are readable (if a bit glaring on dark mode).

Bonsai workflows

• They need to be converted to the new Bonsai workflow container in docfx-tools, but that is a separate issue/PR I will raise. They are readable for the time being.

Flowcharts

• Flowcharts can be converted into mermaid.js graphs which support dark mode, but I will say that positioning of nodes is tricky especially for non-linear/circular graphs. Even though I have tried the alternative graph options (block-beta, state diagram), the flowchart option remains the most customizable. Alternatively if the aesthetics of the new mermaid.js flowcharts are undesirable, editing or inverting the colors remains an option (outlined below).

SVGs

• The bulk of the images which need to be converted. The colors can be inverted (see discussion in alternative solutions) but I prefer picking certain colors to amend.

In some cases, this can be as simple as adding a style block near the top of the SVG to override inbuilt styles when dark mode is detected. The !important tag ensures that this takes precedence over inline styles. No other modifications to the SVG need to be added.

<style>
    @media (prefers-color-scheme: dark) {
    path[style*="stroke:#000000"] {stroke: white !important;}
    path[style*="fill:#000000"] {fill: white !important;}   
    g[style*="fill:#000000"] {fill: white !important;}} 
 </style>

Unfortunately in most cases (the reactive operator marble diagrams for instance) the underlying SVG code isn't so clean, and necessitates additional modifications to the SVG to find and group together various paths by surrounding them with a unique g id. Its not hard to do (takes a few minutes per graph), just laborious. Then a style such as this can be applied.

<style>
    @media (prefers-color-scheme: dark) {
    path[stroke="#000"] {stroke: white !important;}
    path[fill="#000"] {fill: white !important;}
    path[fill="#fff"] {fill: #212529 !important;}
    g[id="text"] path, g[id="arrowheads"], path[id="g1-106"] {fill: white !important;}
    g[id="subscribe-text"] {fill: #eb008a !important;}
    g[id="subscribe-arrows"] path {stroke: #eb008a !important;}}
</style>

In the end I chose to do these changes:

• Keep original marble colors
• Convert black text and outlines to white
• Convert white fills to the background color of docfx dark mode theme
• Convert blue subscribe-text and subscribe-arrows to pink.

Alternatives considered

Invert filter

 <style>
    @media (prefers-color-scheme: dark) { svg {filter: invert(1) } }
 </style>

This was the first option that I tried which inverts the colors. This is easier and faster to apply but it has several drawbacks:

1. Colors are a bit ugly but this is subjective of course.
2. In some instances, original colors are important (for instance, colors for the operator nodes).
3. Some containers have a white fill instead of a blank fill, which went inverted becomes black, which stands out against the dark mode background (which is more of a dark blueish/grey background). This was present in like 30-50% of the images. In most cases this is more of an aesthetic thing, but in some cases it is functionally important. For instance, some marbles which look blank in white mode are supposed to represent that the reactive operator doesn't care about some attribute in the observable sequence. When they become black on dark grey in dark mode however they look like they have some other function or transformation.

For consistency's sake, I chose to go with the solution outlined above.

External stylesheet

Instead of editing all the SVGs I considered using an external CSS style, but with the variability of all the different SVGs, and the possibility that it might affect future SVGs in unexpected ways, I decided against it.