Making code blocks in line with custom page color

[abelcheung]

Recently I'm working on some changes to simplify code block styles and allow them to blend in more nicely with custom page background color (through more extensive use of transparency). Would such changes be welcome, or @daattali you would prefer styles staying as-is? About elements with hardcoded color, tables and code blocks come into mind, there are probably other as well. In the case of code block, I mean something like the following instead of hardcoding gray shades in code block background:

[daattali]

Will this use pure CSS, or some variables? How much does it complicate the code?

[abelcheung]

Pure CSS. Originally my ambition was to shrink the code while adding support, but it turns out some extra style overriding was needed to overcome existing table styles in main.css, so the complexity stays more or less the same right now. Hopefully those overriding can be removed later when tackling table style later on.

Here is the PoC; if it's ok I can submit a PR very soon.

[abelcheung]

Now it is possible to try some bg colors from nav bar.

[daattali]

That looks good. Although I don't think the javascript in navbar items is something that needs to be shown, as cool as it is :)

[abelcheung]

The nav bar javascript is only a one-off hack for you to check out a few color combinations 😄