Dark mode activation

[Aenardhil]

Is your feature request related to a problem? Please describe. no

Describe the solution you'd like I want to a activate dark mode or any type of dark background with the atom and bound with light colour.

Describe alternatives you've considered I have tried to change the background colour to a dark blue with backgroundColour but the problem is that the bounds are indistinguishable. I've tried then to use svg instead of canvas to modify the colours using css but the carbons are not selectable by css selectors.

[MichelML]

@Aenardhil maybe @ptosco has a better idea here, but here's a starter "hack", in svg mode, you can make most bonds white with css like this (but you'll probably have to hack other things in the image like atom numbers, etc):

/**
   * This means all path elements with a class starting with the word "bond"
   * (ideally be more specific than that in your css selection
   */
path[class^="bond"] {
    stroke: white !important;
    fill: white !important;
}

/* set the svg background to black (ideally be more specific than that in your css selection) */
svg {
    background-color: black;
}

example:

[sgoodrow-zymergen]

Opened a similar discussion here: https://github.com/rdkit/rdkit-js/discussions/390

I believe rdkit has support for darkmode in its draw options, but we aren't making that available currently? Are those draw options hard to expose? I have tried poking around the library code a bit but haven't identified the throughline from get_svg to those draw options.

I also played around with the approach shared above -- it has its limitations, but is possible. Need to narrow the overrides a bit to not recolor bonds that are colored from the atom color, e.g.:

const theme = useTheme();
  return (
    <Box
      aria-label="molecule image"
      display="flex"
      justifyContent="center"
      sx={
        theme.palette.mode === "dark"
          ? {
              // Override any black stroke to white
              '& path[style*="stroke:#000000;"]': {
                stroke: "white !important",
                fill: "white !important",
              },
            }
          : undefined
      }
      dangerouslySetInnerHTML={{
        __html: sanitize(svgHtml),
      }}
    />

[MichelML]

xref https://github.com/rdkit/rdkit-js/discussions/325#discussioncomment-7151912