inline svg images to fix darkmode in darkreader browser extension

[milahu]

with darkreader, the svg images become invisible (black on black)

actual

<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents">

expected: svg images are inlined. done in my fork https://github.com/milahu/hugo-book/commit/39517ea176ba76d668033e192cefaab14ef49984

<svg class="book-icon" alt="Table of Contents" viewBox="...">
  <!-- ... -->
</svg>

the svg's have just a few bytes

$ du -b static/svg/*
248     static/svg/calendar.svg
287     static/svg/edit.svg
185     static/svg/menu.svg
228     static/svg/toc.svg
434     static/svg/translate.svg

also set fill="black" on the svg paths

also use transparent grey, like in https://github.com/alex-shpak/hugo-book/commit/0c59cb31602111cf4b9a1f93cffec4ef9ba69997

to inline svg's

{{ readFile "/static/img/filename.svg" | safeHTML }}

https://github.com/gohugoio/hugo/issues/10330

[milahu]

alternative: css filter invert

<img class="darkmode-invert" src="path/to/image.svg">

/* light mode */
:root { --fg: black; --bg: white; }

/* dark mode */
@media screen {
  @media (prefers-color-scheme: dark) { 
    :root { --fg: white; --bg: black; } 
    .darkmode-invert {
      filter: invert();
    }
  }
  /* darkreader extension */
  :root[data-darkreader-mode="dynamic"] {
    --fg: white; --bg: black;
  }
  :root[data-darkreader-mode="dynamic"] .darkmode-invert {
    filter: invert();
  }
}