Hamburger menu invisible in dark mode on mobile

[mralusw]

Chrome on Android here.

The sidebar is invisible, and so the book seems to consist of just the Introduction landing page.

And yes, please use pandoc to provide EPUB downloads, as mentioned in another issue.

[slaskis]

It's not invisible in Chrome on my Android, a OnePlus 6s I think? What device do you have?

Click the hamburger on the top left of the screen for it to show up.

[mralusw]

The hamburger is quasi-invisible in dark mode both on Chrome and Firefox. Now, I can't seem to figure out WHICH dark mode I've enabled for Chrome, let me see if I can figure it out

Anyway, the GitHub hamburger is visible in dark mode in all browsers

[leewardbound]

Hi, I'm looking into this, but I can't recereate -- how are you enabling dark mode? @mralusw

[mralusw]

chrome://flags/#enable-force-dark

Turning this on (which is the only documented way to make webpages dark) makes the page https://webrtcforthecurious.com/, well, dark, and the hamburger invisible.

[mogren]

It's not just the hamburger menus, also the translation and edit icon. It's because the SVGs in the Hugo theme are all black, so inverting them should work. Seems to be some good tips here: https://web.dev/prefers-color-scheme/#invert-vector-graphics-and-icons

Alternatively, we could just make them dark grey with something like:

img.book-icon {
    filter: invert(40%);
}