Code snippet/blocks barely readable on black theme

[MrBartusek]

Describe the bug
Code blocks main text colour is #555555 while background is #302d36 that makes them not readable

Screenshots

[SirLich]

I'm also concerned about this. The issue persists even if we write our own custom dark-theme. I'm trying to see if we can use a different syntax highlighting theme.

If that is possible, it might be nice to implement that and turn it on for dark-themes.

Its too bad cause:

1. Dark theme is more popular
2. MOST documentations will have at least some code.

For these reasons I think it should be prioritized.

[pdmosses]

Would any of the Pygments Syntax Highlighting themes be suitable? If so, perhaps Jekyll/Rouge could be configured to use it in dark mode.

[pdmosses]

Try setting a Pygments theme id in _config.yml, e.g.:

highlight_theme: dark2

Then add the following line to _includes/head_custom.html:

<link rel="stylesheet" title="Highlight theme" href="https://stylishthemes.github.io/Syntax-Themes/pygments/css-github/pygments-{{ site.highlight_theme }}.css">

That produces the specified code highlighting. Would that be OK?

[pdmosses]

That produces the specified code highlighting

... except that the background colour of each line is still the $grey-dk-250 set by _sass/color_schemes/dark.scss, instead of the one set by the CSS in the Pygments theme, so the appearance is poor, and not as shown on Pygments Syntax Highlighting themes.

@pmarsceill I tried copying _sass/code.scss to a test site that uses JTD as a remote theme, and commenting-out the two lines that set background-color: $code-background-color;, but it seems my local version doesn't get loaded. Is there some way of suppressing those settings by adding something in _sass/custom/custom.scss? My aim was to let the Pygments CSS set the background-color for code and pre.highlight.

But perhaps it would be better to make dark.scss override the .highlight values set in code.scss with (say) the values from the Pygments GitHub Dark style, unless you have already designed a set of better colours for JTD dark mode?

[pdmosses]

In https://github.com/pdmosses/just-the-docs/tree/dark-highlight, the Pygments GitHub Dark colours have been added to _sass/color_schemes/dark.scss and code-background-color updated. This addresses the issue that I ran into when trying to use the current remote theme with customisation, and has rectified the appearance.

If there is a set of colours that would be more harmonious with the dark option of Just the Docs, it would be good to update to use them before submitting a PR.

[pdmosses]

@MrBartusek, @SirLich Would either of you like to submit a PR to fix this issue? If not, I could submit one based on the solution suggested in my previous comment, but it would help if you could select a nice set of colours to use from the Pygments Syntax Highlighting themes.

[MrBartusek]

@pdebruic Yeah, you can submit a PR. I think the best suit for the theme would be Tomorrow Night or slightly lighter Base-16-tomorrow-dark

[pdmosses]

@MrBartusek thanks for the quick response. I'll try both those sets of colours, and submit a PR for one of them.

[pdmosses]

@MrBartusek I tried to add the Pygments theme name as a configuration option, but I don't see how to make $code-background-color automatically match the theme background.

If you're happy with the implementation, I'll update the relevant page in the docs before requesting a review.

[mattxwang]

Should be resolved by #578!