Dark mode toggle (final)

If you thought the inversion of line drawing in dark mode is solved (see follow-up on the dark mode toggle post), then read on for a more elegant way to achieve the same…

“First make it work, then make it beautiful.”

After a little learning curve with custom CSS and including images in markdown with inline HTML, I discovered that it can be done in markdown directly. We just have to instruct the markdown.goldmark.parser to not wrap images in paragraphs and allow block and title attributes. The hint came from an article¹ that pointed me to the right page in the hugo documentationi²:

Adding the following to config.toml

[markup.goldmark.parser]
  wrapStandAloneImageWithinParagraph = false
  [markup.goldmark.parser.attribute]
    block = true
    title = true

the HTML img-tag can now be replaced with proper markdown, adding class- and other attributes in braces:

![my image](/path/to/image.svg "title")
{.invertible width="30%"}

We just have to remember that except for section headings and fenced blocks (where the attributes are written on the same line) we need to move the braces below the markdown. Simple.

So, together with this custom.css the line drawing is inverted correctly in dark mode

.colorscheme-dark img.invertible {
  filter: invert(100%);
}