I hadn’t visited the docs since Add Syntax Highlighting to Code Reference
but today I see that the syntax highlighting doesn’t match the page.
The code is showing as black background and green text on a white page. It looks awful and is hard to read. It should be dark mode only if the user chooses dark mode in their system.
Meta: I couldn’t create this topic without a tag, but I don’t know what tag it should have… This is obnoxious.
This is just how that syntax works.
I think I chose this theme Download ▲ Prism because all others look ever worse.
For me, I like the style and can read it well, but likely this depends on personal nuance.
Happy to change it if we have a better theme.
I think it should match the page it’s on. The default and the Coy theme both look fine.
If you ever implement a dark mode for the CP site, you could figure out how to use a dark theme.
I actually think it looks good and is very easy to read; much better than on the WP docs site.
I have a problem with the contrast.
And I just noticed that when I select some code, I can’t read a thing.
@joyously - I cannot see this issue.
Are you using some custom rules of colors or so on the browser?
Perhaps this is OS/Browser related too, what are you using?
I’m on Ubuntu Studio 20.04 using Firefox 90.0. It looks the same in an incognito window with Stylus disabled also (I had no styles for that domain anyway).
I went back to the Prism site and tried the dark themes. Each looked legible with a selection, so I don’t understand what is changing it on the CP page.
Firefox 89.0.1. No custom CSS rules.
The code is readable initially…
…until I select it.
What I can see while selected:
Everything else is lost in the color; even tipping my screen up/down didn’t help.
damn.
“CP Doc now officially wont support Firefox”
Kidding. I will check if I can solve this with the “blank” theme although I do not like that, code editors are dark, so code should be on dark background too.
@anon71687268 when you test this same thing on Download ▲ Prism is it happening as well?
(scroll down for a sample of code)
Aaaargh.
Just replicated it with my FF too. And not happening on their own site, but also, their preview looks nothing like what we get at the end anyway.
Opened an issue with them on Github before I go and replace the theme.
This does not look right to me.
No, they are not dark by default. You have to choose it.
I find it easier to read black or colors on white than on black, so I never choose it.
I say take the default styles of the highlighter and use that, so it matches the page. Then if the user has a dark mode or the docs theme implements a dark mode later, it will all be consistent.
(I didn’t look, but perhaps the docs theme has a style for :selected)
WHAT?
Code editors are dark let you choose your theme.
There, fixed it.
There are scientific and health-related reasons for using a light theme. Here’s the first link that comes to mind.
It’s true, light themes are better for performance for people with normal vision but long-term exposure may lead to nearsightedness. It’s always best to offer user a choice between the two.
On the other hand, whatever the theme is all the colors used for colorization need to be reviewed for contrast ratio against the background to meet WCAG 2.1/2.2 standard. This includes selection background color and text color.
Hummm ok my bad! True they let you choose, I am spoiled by setting my computer to dark mode 
, which sets the apps automatically.
However, this is a third party library that just comes as it is. I’m not suggesting to modify its styles - that’s a huge work.
If they aren’t compliant with standards then likely they would have to address that in the library I think?
I’ll try different templates today to see what comes out.
Since this happens our site only it’s likely a style conflict according its author. So I’ll try to fix that too.
In all honesty thou, working since a few years with programmers all over the world I literally never found a light mode code editor active
They all have a dark mode! This is the main reason I even chose dark mode on the site, I thought it’s sort of a “preference” as well amongst programmers (apart of foolishly forgetting that those apps all have preference settings)
I stand corrected 
Ok so
a) prism does not apply Firefox specific selection rules. I can fix that with CSS
b) each browser handles the color differently. While I can fix only FF and leave safari as there it looks good, this fix screws up chrome, which by default also looks good, but with the FF fix breaks.
We’d need modernizr I think to detect specific browser, and apply a fix for each. Not a reasonable work given the issue
Thus I downloaded and deployed the “default” mode which does not have this issue at all (tested on Safari, Chrome and FF on Mac)
Looks awful if you ask me but if it makes people happy, I am happy too 
If you want other styles I suggest building a package on Download ▲ Prism and send me the link of the build, so I can deploy that.
Let me know if its better now!
Looks the same in Vivaldi on Windows (Chromium based browser).
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.
