Code Blocks Difficult to See (for me)

My eyes are getting worse and worse; any chance you could darken the code block fill? just a few clicks darker would give much better contrast, n’est-ce pas?

Best

F

If it’s any consolation, frederico, I’m in the same boat. The low-contrast grey on grey that is so common on the web and in print is bothersome and difficult for me to read, too.

1 Like

Whereas both GitHub and Stack are nicely contrasted. Hopefully it’s just an appearance tag in a .css file, and Adam will be so kind as to accommodate. (:

For now, I am using profiles to drop my saturation way, way down when editing/reading code blocks here.

Honestly, when reading posts by others, I frequently barely notice a code block (if inline), save for detecting the change to monospace.

I hope that someday Discourse will let the user fully customize their own display prefs – I’m looking at you, Dark Mode. [EDIT: Yoiks! When did that sneak in here? My old, tired eyes thank you, kindly.]

Those platforms primarily about sharing code while the Discourse platform and TidBITS site are more general. I think the background color for code blocks is subtle by design, for inline code it keeps it readable, as text, within the sentence; Slack makes inline code garish and it impedes readability.

It looks like Discourse uses custom properties (aka CSS variables) for colors:

p>code, li>code, pre>code {
  color: var(--primary-very-high);
  background: var(--hljs-bg);
} 

/* Default theme */
--primary-very-high: #434343;
--hljs-bg: #f8f8f8; /* (~3% from white) */

/* Dark theme */
--primary-very-high: #c7c7c7;
--hljs-bg: #333; /* (10% from black) */

The code background color is defined as a part of a set of “hljs” colors used for syntax highlighting, meaning it needs to be light enough not only for regular text but for all the colors used for different code parts. In the above CSS code, the code comments are already hard to read because of the low contrast against the current background, if the background had more contrast vs. the surrounding background color of the page, the comments would be even less readable.

Luckily, Discourse is massively configurable. I’ve created a TidBITS Darker Code Text theme that anyone can select individually at:

https://talk.tidbits.com/my/preferences/interface

All it does is change the background color for code blocks from #f8f8f8 to #f2f2f2, which goes from about 3% off white to about 5% off white. Obviously, it’s trivial for me to change, so if you want to try about 10% off white (#e6e6e6), let me know.

Check those colors at:

2 Likes

Ha! I had no idea there’s a Dark theme there all along. Your new profile is pretty darn good. Sadly, this disease or the meds are attacking my eyes, and too much light is painful. I’m in Dark Mode on all devices at all times, and if an app refuses to let me go dark (I prefer Pure Black, and I can’t override it, I have to wear special “sun” glasses, lest I get a terrible headache and blurry vision for a couple hours or more.

Any chance I can get you to make a Pure Black (#000000) background, with code fill (d9d9d9), and white text (ffffff) – or whatever you’re using on the existing Dark theme – and just a hint of shadow?

Otherwise, the Dark is pretty good already; I just still get fatigued with Coal black after awhile.

Cheers

For a long time, Windows has had the better approach to this problem, OS-level High Contrast Mode themes with different, customizable color combinations. Microsoft web browsers have always honored the themes, overriding colors and other choices (like shadows) defined by sites to make them work better for each individual. Rather than attempting to meet the needs and preferences of every user, sites, platforms, and frameworks should focus on standards and the robustness of their code so every user can have a satisfying experience, regardless of how they might change what’s delivered to their browser.

@frederico, since so many sites are black-on-white by default, I wonder if you would be better off using macOS’s OS-level Invert option (under Accessibility > Display) instead seeking Dark Mode designs site-by-site. The macOS doesn’t offer the same options that Windows does but they might work for you.

I know how to edit the CSS, but I’m unsure of exactly what selectors to use to affect the entire background; Discourse uses variables in its CSS that I don’t yet entirely understand.

If someone can give me some CSS to try, I’ll pop it in and we can see if it works.

If you haven’t already tried it, Firefox’s page inspector gives you a good way to walk the DOM of a page. You can type in alternate values for whatever you find in order to run experiments on the page you’ve viewing.

Running it against the TidBITS Talk page, I see that you’re right - there are a lot of variables that don’t seem to have an inheritance relationship to each other. The colors all see to come from a file named color_definitions.scss. The following variables appear relevant to our discussion:

  • --primary: Text color for most of the page
  • --secondary: Background of most of the page
  • --header_primary: The page header foreground
  • --header_background: The page header background

But I suspect that these are generated by some kind of configuration scripts, because each of the colors (primary, secondary, tertiary, etc.) have several variants each (very-low, low, low-mid, medium, high, very-high) which appear to be different intensities of the corresponding color.

For instance --blend-primary-secondary-5 is the background for quoted text. Given the name, it is almost certainly computed from the primary and secondary values.

I’m not sure how much this helps, but maybe it will be a useful starting point.

Assuming your custom CSS code loads after the platform’s code, you should be able to redefine custom property values instead of redefining the properties within a selector.

:root { /* this means you're setting value of these properties for the entire page */
--hljs-bg: #f2f2f2;
}

The Beginners Guide to Discourse Themes shows that you can create Color Schemes without writing all the CSS by hand. To make a high contrast white-on-black theme, I’d start by making a Color Scheme that matches the Dark theme but makes the ‘primary’ color #ffffff and the ‘secondary’ #000000. The Color Schemes don’t include all the “hljs” code colors, those would probably still need to be changed in the theme’s custom CSS. If the page background is completely black, I would think the Dark theme’s --hljs-bg: #333; would be sufficiently different. The inline code on that Dark theme background is --primary-very-high: #c7c7c7, I don’t know if the platform would calculate a new value based on the new ‘primary’ or if you’d have to set it by hand to have something closer to white (if not actual white).

Thanks, @cwilcox! I found the Discourse color palette editor and made a new Pure Black palette and set it so users can select in their Interface prefs:

https://talk.tidbits.com/my/preferences/interface

@frederico, let me know if that’s what you want. I think it’s pure white text on pure black background, but there are a lot of possible colors.

2 Likes

Might be easier to Change the FONT used for Code?
Both used fonts look too much alike, IMHO.

I’d suggest trying out some serif and monospace font for code (I’m still a fan of good old Courier, but there exist quite a few other well readable ones).

I believe the contrast between sans-serif and serif fonts PLUS the original soft colour contrast might suffice to create an overall strong enough visual contrast. (But that might just be my bias from having worked in pre-press/pre-media for several decades :grin:)

Love it. I can even better-see the code outlines, but I do agree a better choice would be monospace. I like both SF and Menlo, myself, but could be happy with any of the classics, too.

The white text is a tad bright, but waaaaayyyyy more preferable to the alternative.

Thanks! This might make it so I can be around more. (:

I tried Courier and it was good, but then I tried Source Code Pro and liked it a little more. What do others think in the example below (note the monospace)? (It’s in play for all the themes now.)

This is one line of source code.
Really, it is. In some language.

1 Like

Really, it is. In some language. — Yup, natural language English :slight_smile:

While this is not exactly what I’d call serif I think the contrast to the “normal” font (What is it? Helvetica? Arial?) is quite good already with this one. Thanks!

Yeah, I wasn’t quite sure what to call it—pseudo-serif?—but it seemed better differentiated. The contrast with Courier was a bit too much.