From 7ec2b26ea146adfa61fc15e8eea64bf5ae01183e Mon Sep 17 00:00:00 2001 From: Gerrit Birkeland Date: Sat, 8 Jan 2022 12:19:09 -0700 Subject: [PATCH] Fix identical background for code and text Resolves #1836 --- CHANGELOG.md | 8 +++----- src/lib/utils/highlighter.tsx | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2a599ee6..1565b9093 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,15 +3,13 @@ ### Features - `ReferenceType`s which reference an external symbol will now include `qualifiedName` and `package` in their serialized JSON. +- Added new `cname` option for GitHub Pages custom domain support, #1803 ### Bug Fixes - Fixed line height of `h1` and `h2` elements being too low, #1796. -- Symbol names passed to `addUnknownSymbolResolver` will now be correctly given the qualified name to the symbol being referenced. - -### Features - -- Added new `cname` option for GitHub Pages custom domain support, #1803 +- Code blocks in the light theme will no longer have the same background as the rest of the page, #1836. +- Symbol names passed to `addUnknownSymbolResolver` will now be correctly given the qualified name to the symbol being referenced, #1832. ## v0.22.10 (2021-11-25) diff --git a/src/lib/utils/highlighter.tsx b/src/lib/utils/highlighter.tsx index 852d7b3ce..4d2998211 100644 --- a/src/lib/utils/highlighter.tsx +++ b/src/lib/utils/highlighter.tsx @@ -88,7 +88,15 @@ class DoubleHighlighter { i++; } - style.push(` --light-code-background: ${this.highlighter.getTheme(this.light).bg};`); + // GH#1836, our page background is white, but it would be nice to be able to see + // a difference between the code blocks and the background of the page. There's + // probably a better solution to this... revisit once #1794 is merged. + let lightBackground = this.highlighter.getTheme(this.light).bg; + if (isWhite(lightBackground)) { + lightBackground = "#F5F5F5"; + } + + style.push(` --light-code-background: ${lightBackground};`); style.push(` --dark-code-background: ${this.highlighter.getTheme(this.dark).bg};`); lightRules.push(` --code-background: var(--light-code-background);`); darkRules.push(` --code-background: var(--dark-code-background);`); @@ -163,3 +171,8 @@ export function getStyles(): string { assert(highlighter, "Tried to highlight with an uninitialized highlighter"); return highlighter.getStyles(); } + +function isWhite(color: string) { + const colors = new Set(color.toLowerCase().replace(/[^a-f0-9]/g, "")); + return colors.size === 1 && colors.has("f"); +}