SVGs in dark mode
Tags: dark, mode, css, svg
Published: 2021-01-11 11:15:14

---
title: SVGs in dark mode
published: true
date: 2020-12-22 12:09:23 UTC
tags: dark,mode,css,svg
canonical_url: https://adactio.com/journal/17710
---

[I added a dark mode to my site last year](https://adactio.com/journal/15941). Since then I’ve been idly toying with the addition of a dark mode to [The Session](https://thesession.org/) too.

As with this site, the key to adding a dark mode was switching to custom properties for `color` and `background-color` declarations. But my plans kept getting derailed by the sheet music on the site. The sheet music is delivered as SVG generated by [ABCJS](https://paulrosen.github.io/abcjs/) which hard-codes the colour in `stroke` and `fill` attributes:

```
fill="#000000" stroke="#000000"

```

When I was [describing CSS recently](https://adactio.com/journal/17692) I mentioned the high specifity of inline styles:

> Whereas external CSS and embedded CSS don’t have any effect on specificity, inline styles are positively radioactive with specificity.

Given that harsh fact of life, I figured it would be nigh-on impossible to over-ride the colour of the sheetmusic. But then I realised I was an idiot.

The `stroke` and `fill` attributes in SVG _are_ presentational but they _aren’t_ inline styles. They’re attributes. They have no affect on specifity. I can easily over-ride them in an external style sheet.

In fact, if I had actually remembered [what I wrote](https://adactio.com/journal/15941) when I was adding a dark mode to adactio.com, I could’ve saved myself some time:

> I have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the stroke attribute of the path element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:

```
svg.activity-sparkline path {
  stroke: var(--text-color);
}

```

I was able to do something similar on The Session. I used the handy `currentColor` keyword in CSS so that the sheet music matched the colour of the text:

```
svg path {
  fill: currentColor;
}
svg path:not(stroke="none") {
  stroke: currentColor;
}

```

Et voila! I now had light-on-dark sheet music for The Session’s dark mode all wrapped up in a `prefers-color-scheme: dark` media query.

I pushed out out the new feature and started getting feedback. It could be best summarised as “Thanks. I hate it.”

It turns out that while people were perfectly fine with a dark mode that inverts the colours of _text_, it felt really weird and icky to do the same with sheet music.

On the one hand, this seems odd. After all, sheet music is a writing system like any other. If you’re fine with light text on a dark background, why doesn’t that hold for light sheet music on a dark background?

But on the other hand, sheet music is also like an image. And we don’t invert the colours of our images when we add a dark mode to our CSS.

With that in mind, I went back to the drawing board and this time treated the sheet music SVGs as being _intrinsicly_ dark-on-light, rather than a stylistic choice. It meant a few more CSS rules, but I’m happy with the final result. You can see it in action by visiting [a tune page](https://thesession.org/tunes/440) and toggling your device’s “appearance” settings between light and dark.

If you’re a member of The Session, I also added a toggle switch to your member profile so you can choose dark or light mode regardless of your device settings.