Code examples unreadable (dark background color)

[weedySeaDragon]

The background color for code examples on lodash.com is black which makes the examples totally unreadable. See the 2 screenshots below.

The style that seems to be causing the problem:

.highlight {
    background-color: #283646;
    color: #ddd;
    margin: 0 -999rem;
    padding: 3.2rem 999rem;
    position: relative;
}

I haven't delved into assets/css/_variables.scss or any other .scss files, so the actual root of the problem could certainly be something that indirectly leads to defining that style with those values.

I verified this with both Chrome (Version 91.0.4472.77 (Official Build) (x86_64)) and Firefox (87.0 (64-bit)).

---

home page:

---

Array chunk:

--

[yukithm]

It's probably Source Code Pro font problem.

I removed the old font and installed the new one, and the problem went away.

brew uninstall font-source-code-pro
brew install font-source-code-pro

• Bug: Always black color of text designed with Sour... - Adobe Support Community - 11612144
• Source Code Pro cannot be styled in Firefox · Issue #217 · adobe-fonts/source-code-pro
• Font is always black after installing macOS 11 (Source Code Pro font or derivatives need to be updated) · Issue #100840 · microsoft/vscode

[trent-boyd]

I also had the same issue and @yukithm's advice worked for me. I confirmed that Chrome was rendering the text in a bugged version of Source Code Pro. Reinstalling the font from brew worked like a charm.

I think this can be closed.

[weedySeaDragon]

I don't think it's the responsibility of the web user to change things so that a website is readable. Given that there is a known problem with this font, a different font should be used (or a different color scheme/style so that the problem doesn't happen. Whenever Adobe fixes it (which includes making the updates easily available), then this font can be used again.

Since this hasn't been fixed, this shouldn't be closed.

(FYI @trent-boyd : I don't have a brew cask for the font; I didn't use brew to install it. So @yukithm's approach doesn't apply for me.)

[trent-boyd]

(FYI trent-boyd : I don't have a brew cask for the font; I didn't use brew to install it. So yukithm's approach doesn't apply for me.)

The updated version is also on NPM, but this issue was fixed 9 months ago. I'm sure you can find the update for the font in the same way you installed it. You could also just uninstall the font entirely (and be served the webfont instead) or install Consolas since it's higher in the stack.

[dsandmark]

The Source Code Pro font was the issue for me, hadn't installed it through brew though.

On macOS, I opened the application All Fonts -> Searched for Source Code Pro -> Right-clicked it and disabled it. Restarted Chrome and the lodash documentation looks good again.