Make xdebug readable in less brightness

[imme-emosol]

When consulting the documentation on xdebug.org, quite some text was unreadable for me. This happened because in my browser the default text & background colors have been changed and the styles of xdebug.org only changed either of those colors, instead of both.

So, the following is a wrapper around some css that overrides the css that came before it.

@media screen and (prefers-color-scheme: dark) {

These overrides are geared toward people using less bright colors, assuming such users also set their browsers accordingly through prefers-color-scheme: dark. The prefers-color-scheme: dark is a mechanism to detect this (just as prefers-reduced-motion: etc.)

In firefox, for instance, it is possible to change the fonts and colors websites use. When text is set to #CCC & background is set to #333 , visiting https://xdebug.org/docs/develop will show the issue I ran into regarding the readability of the texts.

This code addition is rather simple, using transparency/alpha for the background-colors, actually defining a color & a background-color is probably even better with regards to different user agents (a user could have a default bright green background color but also a preference for darker color schemes).

Yet another option is to disregard user preferences, in that case color & background-color should always be specified in tandem, where inherit could be specified or transparent as a color for those elements where their parent elements are known to provide the right (background) color for a good contrast to be read.