[bug] Diff context text invisible on custom light themes #2684

Description

When using a light theme, context lines (unchanged code surrounding additions/deletions) in the inline diff viewer are invisible — rendered in the same color as the background. The same diff viewed with a dark theme or the built-in themes renders context lines correctly.

Screenshots

Dark theme — context lines (209-211, 214-215, 218-219, 221-223) are clearly visible:

Light theme — same diff, context lines are invisible (only the red/green changed lines are visible):

Root cause

The diff viewer's CSS uses light-dark() for token colors:

[data-diffs] [data-column-content] span {
  color: light-dark(
    var(--diffs-token-light, var(--diffs-light)),
    var(--diffs-token-dark, var(--diffs-dark))
  );
}

When a custom theme is used, LightDiffViewer passes a single Shiki theme (not a { dark, light } pair) to the diff component. The single-theme code path in getHighlighterThemeStyles sets --diffs-fg and --diffs-bg but does not set --diffs-light or --diffs-dark:

// Single theme path — only sets --diffs-fg, --diffs-bg
styles += `${formatCSSVariablePrefix("global")}fg:${themeData.fg};`;
styles += `${formatCSSVariablePrefix("global")}bg:${themeData.bg};`;

// Dual theme path — sets --diffs-light and --diffs-dark
styles += `${formatCSSVariablePrefix("global")}light:${themeData.fg};`;
styles += `${formatCSSVariablePrefix("global")}dark:${themeData.fg};`;

Syntax-highlighted tokens work because they have per-span --diffs-token-light inline styles set by Shiki. But unstyled text (plain text, or file types without Shiki grammar support like .keymap) falls through to var(--diffs-light), which is undefined → the color resolves to nothing → invisible text.

This particularly affects file types without Shiki grammar support, where all text is unstyled.

Suggested fix

In the single-theme code path, also set --diffs-light and --diffs-dark to themeData.fg:

styles += `${formatCSSVariablePrefix("global")}fg:${themeData.fg};`;
styles += `${formatCSSVariablePrefix("global")}bg:${themeData.bg};`;
// Also set light/dark so light-dark() fallbacks work:
styles += `${formatCSSVariablePrefix("global")}light:${themeData.fg};`;
styles += `${formatCSSVariablePrefix("global")}dark:${themeData.fg};`;

Alternatively, add a fallback in the CSS:

color: light-dark(
  var(--diffs-token-light, var(--diffs-light, var(--diffs-fg))),
  var(--diffs-token-dark, var(--diffs-dark, var(--diffs-fg)))
);

Environment

• Superset desktop v1.2.2
• macOS (light mode)
• Custom Solarized Light theme (any custom light theme reproduces this)