default background and foreground for inline code in dark mode

fixes #8568

this minimal and defensive change (found and iterated with Claude)
changes inline code without .sourceCode to use the same default background
and foreground colors as the block code, when in dark mode.

it is probably more defensive than it needs to be

it also causes code with .sourceCode to default to the code block background
if not otherwise specified, instead of $grey-100, in both modes.

Author: gordonwoodhull

news/changelog-1.8.md

@@ -20,6 +20,7 @@ All changes included in 1.8:
 - ([#726](https://github.com/quarto-dev/quarto-cli/issues/726)): a11y - Provide `.screen-reader-only` callout type when callout text doesn't naturally include the type.
 - ([#5538](https://github.com/quarto-dev/quarto-cli/issues/5538)): Fix code-copy button style so that scrolling behaves properly.
 - ([#5879](https://github.com/quarto-dev/quarto-cli/issues/5879)): Improve font rendering of `kbd` shortcode on macOS. `kbd` will now also be stricter in converting keyboard shortcuts to macOS icons.
+- ([#8568](https://github.com/quarto-dev/quarto-cli/issues/8568)) Default inline code background color to the code block background color if not specified; foreground color is `$pre-color` in dark mode and (remains) purple in light mode.
 - ([#10983](https://github.com/quarto-dev/quarto-cli/issues/10983)): Fix spacing inconsistency between paras and first section headings.
 - ([#12259](https://github.com/quarto-dev/quarto-cli/issues/12259)): Fix conflict between `html-math-method: katex` and crossref popups (author: @benkeks).
 - ([#12341](https://github.com/quarto-dev/quarto-cli/issues/12341)): Enable light and dark logos for html formats (sidebar, navbar, dashboard).
@@ -108,7 +109,7 @@ All changes included in 1.8:
 
 - ([#12753](https://github.com/quarto-dev/quarto-cli/issues/12753)): Support change in IPython 9+ and import `set_matplotlib_formats` from `matplotlib_inline.backend_inline` in the internal `setup.py` script used to initialize rendering with Jupyter engine.
 - ([#12839](https://github.com/quarto-dev/quarto-cli/issues/12839)): Support for `plotly.py` 6+ which now loads plotly.js using a cdn in script as a module.
-- ([#13026](https://github.com/quarto-dev/quarto-cli/pulls/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pulls/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies.
+- ([#13026](https://github.com/quarto-dev/quarto-cli/pull/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pull/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies.
 
 ### `knitr`
 

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -923,6 +923,26 @@ pre {
   border: initial;
 }
 
+p code.sourceCode,
+li code.sourceCode,
+td code.sourceCode {
+  $calculated-bg: if(
+    variable-exists(code-bg),
+    if(
+      $code-bg == $gray-100 and variable-exists(code-block-bg-color),
+      $code-block-bg-color,
+      $code-bg
+    ),
+    null
+  );
+
+  @if variable-exists(mono-background-color) {
+    background-color: $mono-background-color;
+  } @else if variable-exists(calculated-bg) {
+    background-color: $calculated-bg;
+  }
+}
+
 // Maps the pandoc 'monobackgroundcolor' to bootstrap
 // Note this only targets code outside of sourceCode blocks
 @if variable-exists(mono-background-color) {
@@ -942,14 +962,23 @@ pre code:not(.sourceCode) {
   background-color: initial;
 }
 
-// Default padding if background is set
 p code:not(.sourceCode),
 li code:not(.sourceCode),
 td code:not(.sourceCode) {
+  $calculated-bg: if(
+    variable-exists(code-bg),
+    if(
+      $code-bg == $gray-100 and variable-exists(code-block-bg-color),
+      $code-block-bg-color,
+      $code-bg
+    ),
+    null
+  );
+
   @if variable-exists(mono-background-color) {
     background-color: $mono-background-color;
-  } @else if variable-exists(code-bg) {
-    background-color: $code-bg;
+  } @else if variable-exists(calculated-bg) {
+    background-color: $calculated-bg;
   }
 
   @if variable-exists(code-padding) {
@@ -2197,12 +2226,12 @@ a {
 
 // screen-reader-only, cf https://github.com/quarto-dev/quarto-cli/issues/726#issuecomment-1112486100
 .screen-reader-only {
-    position: absolute;
-    clip: rect(0 0 0 0);
-    border: 0;
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    width: 1px;
-}
+  position: absolute;
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  width: 1px;
+}

src/resources/formats/html/bootstrap/_bootstrap-variables.scss

@@ -38,7 +38,11 @@ $code-block-theme-dark-threshhold: 40% !default;
 
 /* Inline Code Formatting */
 // $code-bg, $code-color, $code-padding
-$code-color: #7d12ba !default;
+$code-color: if(
+  variable-exists(pre-color) and $pre-color != null,
+  $pre-color,
+  #7d12ba
+) !default;
 
 // Set a default body emphasis color
 $code-bg: $gray-100 !default;

tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd

@@ -5,12 +5,13 @@ execute:
   warning: false
 theme:
   light: [cosmo, theme.scss]
-  dark: [cosmo, theme-dark.scss]
+  dark: [solar, theme-dark.scss]
 highlight-style: a11y
 ---
 
 ### Inline code
 
+* No syntax highlighting: `foo(bar)`
 * Python: `def identity(x): return x`{.python}
 * R: `identity <- function(x) x`{.r}
 

tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd

@@ -14,6 +14,7 @@ _quarto:
 
 ### Inline code
 
+* No syntax highlighting: `foo(bar)`
 * Python: `def identity(x): return x`{.python}
 * R: `identity <- function(x) x`{.r}
 

tests/integration/playwright/tests/html-dark-mode.spec.ts

@@ -45,15 +45,15 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => {
   const importKeyword = await page.locator('span.im').first();
   // light inline code
   const pythonCode = await page.locator('li code.sourceCode.r');
-  await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)');
+  await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)');
   await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)');
   // light highlight stylesheet 
   await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
 
   await page.locator("a.quarto-color-scheme-toggle").click();
 
   // dark inline code
-  await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)');
+  await expect(pythonCode).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
   await expect(pythonCode).toHaveCSS('color', 'rgb(192, 128, 216)');
   // dark highlight stylesheet
   await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)');
@@ -69,14 +69,14 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => {
   await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
   // light inline code
   const pythonCode = await page.locator('li code.sourceCode.python');
-  await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)');
+  await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)');
   await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)');
   // alert
   const link = await page.locator('span.al').first();
   await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); // transparent
 
   await page.locator("a.quarto-color-scheme-toggle").click();
   // dark inline code
-  await expect(pythonCode).toHaveCSS('background-color', 'rgb(248, 249, 250)');
-  await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)');
+  await expect(pythonCode).toHaveCSS('background-color', 'rgba(37, 41, 46, 0.65)');
+  await expect(pythonCode).toHaveCSS('color', 'rgb(122, 130, 136)');
 });