Add option to use theme provided cell background (#675)

apps/vscode/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Fix behavior in Positron when running a cell containing invalid/incomplete code (<https://github.com/quarto-dev/quarto/pull/664>).
 - Ensure `#|` is added only at the beginning of a new line (<https://github.com/quarto-dev/quarto/pull/649>).
 - Fix `language` typos throughout the codebase (<https://github.com/quarto-dev/quarto/pull/650>)
+- Update cell background configuration to add the ability to use the appropriate theme color. The `quarto.cells.background` settings have changed names so you may need to update your configuration (<https://github.com/quarto-dev/quarto/pull/650>).
 
 ## 1.118.0 (Release on 2024-11-26)
 

apps/vscode/package.json

@@ -937,28 +937,39 @@
           "default": true,
           "markdownDescription": "Show parameter help when editing function calls."
         },
-        "quarto.cells.background.enabled": {
+        "quarto.cells.background.enable": {
+          "type": "boolean",
+          "description": "Enable coloring the background of executable code cells.",
+          "deprecationMessage": "Deprecated: Please use quarto.cells.background.color instead."
+        },
+        "quarto.cells.background.color": {
           "order": 19,
           "scope": "window",
-          "type": "boolean",
-          "default": true,
-          "markdownDescription": "Enable coloring the background of executable code cells."
+          "type": "string",
+          "markdownDescription": "Control the background coloring of executable code cells.",
+          "default": "default",
+          "enum": ["default", "useTheme", "off"],
+          "markdownEnumDescriptions": [
+            "Use the default light and dark background colors. Specify these colors with `quarto.cells.background.lightDefault` and `quarto.cells.background.darkDefault`.",
+            "Use the `notebook.selectedCellBackground` color from the current VS Code theme.",
+            "Disable background coloring of executable code cells."
+          ]
         },
-        "quarto.cells.background.light": {
+        "quarto.cells.background.lightDefault": {
           "order": 20,
           "scope": "window",
           "type": "string",
           "format": "color",
           "default": "#E1E1E166",
-          "markdownDescription": "CSS color for background of executable code cells on light themes.\n\n*Note that this color should include an alpha channel so that selections show up against the background.*"
+          "markdownDescription": "CSS color for background of executable code cells on light themes.\n\n*Note that this color should include an alpha channel, like #RRGGBBAA, so that selections show up against the background.*"
         },
-        "quarto.cells.background.dark": {
+        "quarto.cells.background.darkDefault": {
           "order": 21,
           "scope": "window",
           "type": "string",
           "format": "color",
           "default": "#40404066",
-          "markdownDescription": "CSS color for background of executable code cells on dark themes.\n\n*Note that this color should include an alpha channel so that selections show up against the background.*"
+          "markdownDescription": "CSS color for background of executable code cells on dark themes.\n\n*Note that this color should include an alpha channel, like #RRGGBBAA, so that selections show up against the background.*"
         },
         "quarto.cells.background.delay": {
           "order": 22,

apps/vscode/src/providers/background.ts

@@ -192,6 +192,12 @@ function clearEditorHighlightDecorations(editor: vscode.TextEditor) {
   editor.setDecorations(highlightingConfig.backgroundDecoration(), []);
 }
 
+enum CellBackgroundColor {
+  default = "default",
+  off = "off",
+  useTheme = "useTheme",
+}
+
 class HiglightingConfig {
   constructor() { }
 
@@ -213,10 +219,18 @@ class HiglightingConfig {
 
   public sync() {
     const config = vscode.workspace.getConfiguration("quarto");
-    const light = config.get("cells.background.light", "#E1E1E166");
-    const dark = config.get("cells.background.dark", "#40404066");
+    const backgroundOption = config.get<CellBackgroundColor>("cells.background.color", CellBackgroundColor.default);
+    let light, dark;
+    if (backgroundOption === CellBackgroundColor.useTheme) {
+      const activeCellBackgroundThemeColor = new vscode.ThemeColor('notebook.selectedCellBackground');
+      light = activeCellBackgroundThemeColor;
+      dark = activeCellBackgroundThemeColor;
+    } else {
+      light = config.get<string>("cells.background.lightDefault", "#E1E1E166");
+      dark = config.get<string>("cells.background.darkDefault", "#40404066");
+    }
 
-    this.enabled_ = config.get("cells.background.enabled", true);
+    this.enabled_ = backgroundOption !== CellBackgroundColor.off;
     this.delayMs_ = config.get("cells.background.delay", 250);