Update mkdocs-material, better dark mode for code blocks

[StefanScherer]

• Update mkdocs and all dependencies
• Update mkdocs-material to 5.3.3 to have better dark mode support
• Cleaned up the CSS a bit using the defaults

Replaces #45

[mikesir87]

Did a build locally and it all worked as expected. I actually do like the subtle changes to the dark theme coloring. Not a big deal, but the previous dark mode automatically changed the UI when you changed the system preferences. This update does it at page load, so you have to refresh to see the changes applied. Not sure if that's really a big deal though.

I noticed the diff view on "Updating our App" is readable, but that was already the case beforehand, so no need to hold this PR up for that.

[StefanScherer]

Yes I saw the previous immediate dark mode toggle.
I don‘t know why it doesn‘t work, maybe worth filing an issue in upstream, so more people could benefit from it.

[mikesir87]

It's because they are doing JS-based detection of the OS at page start and adding an attribute to the body to swap the theme being used, rather than using a CSS media query to swap it in the CSS stylesheet itself. We were using the media query previously, which is what gave the immediate update.

matchMedia("(prefers-color-scheme: dark)").matches&&document.body.setAttribute("data-md-color-scheme","slate")

[Den-dp]

Overall looks good but still can see some unreadable code snippets (not a regression but neither a complete fix)

Looks like this is related with codehilite extension and its dark theme support

[mikesir87]

Yeah... the first screenshot was a problem before this MR, as I mentioned in a comment earlier. The second is new. The first two CSS blocks should fix both problems.

I'm still not 100% sold on the yellow-y color (just looks kinda ugly to me), so the third block adjusts that.

The fourth one also helps brighten up some of the other keys, as I noticed in the second screenshot that some of it might be hard to read with the little amount of contrast between the dark colors.

[data-md-color-scheme="slate"] .highlight .gd, [data-md-color-scheme="slate"] .highlight .gi {
    color: #2e303e;
}

[data-md-color-scheme="slate"] .highlight .hll .nv, [data-md-color-scheme="slate"] .highlight .hll .nt {
  color: #012363;
}

[data-md-color-scheme="slate"] .highlight .hll {
  background-color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] .highlight .nv, [data-md-color-scheme="slate"] .highlight .se, [data-md-color-scheme="slate"] .highlight .si, [data-md-color-scheme="slate"] .highlight .nt {
  color: #0d9cec;
}

[squidfunk]

FYI, syntax coloring was improved in the last iterations and does now even provide a 4.5:1 contrast ratio, so even better accessibility. My advice would be to update to 5.5.7, which was released today:

[Den-dp]

Bumped mkdocs-material in #149 with some extra features like theme switcher with persistence in localStorage