Variable SVG colors based on light/night mode

[Stian_Ovesen]

I have some SVGs that i display as images in my doc. Is it possible to have them so that the stroke is white for people with night mode and black for people with light mode?

[Pablo_DV]

Hi @Stian_Ovesen

It is possible to generate SVG code programatically, so it could have different strokes depending on some conditions.

MEGA TRICK: SVG in Coda (one step away from generated charts and mind maps!)

I discovered the way to render SVG (vector graphics) in Coda. This capability (if put enough effort) lets you dynamically create virtually any images out of your data, such as: non-standard charts mind maps any other visualizations, including animated ones (but only with vanilla SVG; see row 2 of demo) That is because you declare image elements (e.g. each rectangle or text label) as plain text, which you can then concatenate into a finished image. Limitations: Don’t capture mouse events, …

But unfortunately there doesn’t seem to be a way to detect if someone is using dark mode or not.

Tell if a User is Viewing in Dark Mode?

Hey @Samuel_Langford that’s not something we support right now but we’ve added this as a feature request for you! You’ll be notified if this gets built out.

[Paul_Danyliuk]

It is possible. Use a media query and style your SVG elements differently like this:

path {
  fill: black;
}

@media (prefers-color-scheme: dark) {
  path {
    fill: white;
  }
}

Please note that on Safari there’s a bug: prefers-color-scheme: dark will be ignored in SVG <img>'s regardless of whether the system is in dark or light mode. What I’m doing in that case is e.g. adding a plain white background to the whole SVG that’s only visible in Safari with this CSS hack:

#_bg {
  fill: #ffffff;
  fill-opacity: 0;
}

@supports (-webkit-hyphens:none) {
  #_bg {
    fill: #ffffff;
    fill-opacity: 1;
  }
}

...

<rect id="_bg" x="0" y="0" width="100%" height="100%" />

[Stian_Ovesen]

Thank you, Paul!

How do you implement this? Right now I’ve only dragged the SVG-files from my PC and straight into a page in a Coda-doc. Is that the wrong way to go about it?

[Paul_Danyliuk]

You edit the SVG files yourself. They are basically plain text files that follow XML syntax. They support CSS similar to HTML too.

Read MDN to learn more about SVG… or just ask your favorite AI to integrate these improvements into your svg files. Then you replace your SVGs in the doc with these new ones.