default background and foreground for inline code in dark mode

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,16 +5,22 @@ 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}
+
+### Code blocks
 
 ```markdown
 ![asdf](asd.png)
 ```
 
-
 ```python
 #| label: fig-polar
 #| fig-cap: "A line plot on a polar axis"

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

@@ -12,13 +12,18 @@ _quarto:
         - ["link[href*=\"-dark-\"]"]
 ---
 
-## Hello
+### Inline code
+
+* No syntax highlighting: `foo(bar)`
+* Python: `def identity(x): return x`{.python}
+* R: `identity <- function(x) x`{.r}
+
+### Code blocks
 
 ```markdown
 ![asdf](asd.png)
 ```
 
-
 ```python
 #| label: fig-polar
 #| fig-cap: "A line plot on a polar axis"

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

@@ -43,9 +43,18 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => {
   await expect(locatr).toHaveClass('fullcontent quarto-light');
   await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
   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', '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', '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)');
 });
@@ -58,6 +67,16 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => {
   const locatr = await page.locator('body').first();
   await expect(locatr).toHaveClass('fullcontent quarto-light');
   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', '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)');
+  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', 'rgba(37, 41, 46, 0.65)');
+  await expect(pythonCode).toHaveCSS('color', 'rgb(122, 130, 136)');
 });