Fix identical background for code and text

Resolves #1836

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)
 

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");
+}