ledger/ledger.github.io

Code examples in ledger3.html show as white-on-white when the browser is configured for dark mode

Gumnos opened this issue · 8 comments

Gumnos commented

I'm not sure when this started happening, and I can't find the ledger3.html source in this sub-tree, but the documentation page brings in a style.css file from gnu.org (possibly an Emacs-to-web type artifact?) where the pre.example blocks get styled with a hard-coded

background-color: #f9f6ed;

This leads to unreadable white text on this mostly-white background. It should likely be something like

background-color: var(--highlight-code-background-color);

where that --highlight-code-background-color CSS variable does get correctly/adequately set in the

@media (prefers-color-scheme: dark) {
  :root {…}

block. If I select the text, it's there and visible as shown in this screenshot of the issue:

Screenshot of the issue in question

afh commented

Thanks for bringing this up, @Gumnos, I'll have a l👀k…

  • 👍1
Gumnos commented

FWIW, my X environment is configured for dark-mode, so this manifests in both Firefox & Chromium. Amusingly, if I use dillo or lynx as my browser, the whole thing displays fine 😆

afh commented

While the underlying issue is fixed, another issue regarding the deployment has appeared. I'm looking into it.

afh commented

Alright, might have been a caching issue… The fix appears to be properly deployed for me.
@Gumnos mind giving it another try?
Be sure that https://ledger-cli.org/css/darkmode.css contains the following CSS:

pre.example-preformatted {
  /* Override hard-coded background color from gnu manual.css with dark/light mode variant */
  background-color: var(--highlight-code-background-color) !important; }

If it doesn't I assume somewhere some cache hasn't been invalidated yet.

Gumnos commented

I just refreshed the ledger3.html documentation page and it's all looking good again. Thanks!

afh commented

Thanks for reporting this, @Gumnos, glad to hear it now works as it should on your side too. Happy reading in dark mode 🌚

chuckwagoncomputing commented

This bug also (still) exists for the ledger-mode manual.

  • 👀1
afh commented

Thanks for reporting this, @chuckwagoncomputing. It took me longer than I expected to find the time to setup a local environment in which I could reproduce, debug, and fix the issue.

Today the stars seemed to have aligned properly and I just deployed a fix for the issue. The examples in the ledger-mode manual are now readable for me when viewed in dark mode.