Dark-on-dark syntax highlighting after upgrade

[FlorianReimold]

Hello,

In the past, I built our eCAL Documentation with Sphinx 3.5.4 and sphinx-typo3-theme 4.6.2.

Now I upgraded to Sphinx 5.3.0 and sphinx-typo3-theme 4.7.9. After this upgrade, I am not satisfied with the display of code blocks anymore:

Old:

New:

As you can see, a dark syntax highlighting is used on the dark background making the code barely readable. Do you have any recommendation on how I can fix that?

Kind Regards Florian

Edit: the sample page shows the same unreadable code: https://typo3-documentation.github.io/sphinx_typo3_theme/usage.html

[sypets]

@FlorianReimold It might be helpful if you based your examples on pages (currently) rendered by the TYPO3 theme. This comes only as an afterthought (the last sentence) and might be misread that this is an issue unrelated to the TYPO3 theme (which would then be closed).

I agree that the screenshots displayed for "New" are unacceptable, but for the code snippet rendered on the TYPO3 docs page https://typo3-documentation.github.io/sphinx_typo3_theme/usage.html this looks ok.

[sypets]

btw. about the color scheme: There is syntax highlighting with dark background now for TypoScript templates in the backend in TYPO3 v12

It might make sense to join forces and combine efforts (also with the accessibility group) to choose a common color scheme for syntax hightlighting.

[sypets]

(Older) related issue: #88

[marble]

Hello Florian

1. Newer Sphinx versions seem to bring along structural changes of html. The latest Sphinx version we are using for TYPO3 is 4.5.0.

2. I assume you are using the latest release of the theme v4.7.9. Note that the release is made from the 'develop' branch of the theme. My next milestone for the work on the theme is to merge the 'develop' branch into 'master' to solve this inconsistency.

3. To solve your problem look at https://github.com/TYPO3-Documentation/sphinx_typo3_theme/blob/develop/sphinx_typo3_theme/static/css/codeblock.css#L9 You probably can benefit from the last modifications I made in styling code blocks. ALL settings for this are contained in that single CSS file, and it is used in the theme "as it is", that is to say, it is not processed any further by SASS or something like that. Basically you only need to tweak the color definitions at the beginning of the file to change colors. You can even do this "on the fly" in the developer tools of the browser to find out what you like.

If you solve your problem, please report back.

[marble]

1. To see a rendering test: https://typo3-documentation.github.io/sphinx_typo3_theme_rendering_test/Highlighting/Index.html

   2. You can select a "light" color scheme:

2. The light color scheme:

3. This html turns the "light" color scheme on: