Backport PR #12411 on branch 3.4.x (Uses dark theme for Vega when JupyterLab theme is dark) (#12450)

* Backport PR #12411: Uses dark theme for Vega when JupyterLab theme is dark

* Update Playwright Snapshots

* Take the screenshot only for the graph

* Update Playwright Snapshots

Co-authored-by: Jason Weill <93281816+jweill-aws@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

galata/test/jupyterlab/notebook-run-vega.test.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, galata, test } from '@jupyterlab/galata';
+import * as path from 'path';
+
+const fileName = 'vega_notebook.ipynb';
+
+test.use({ tmpPath: 'notebook-run-vega-test' });
+
+test.describe.serial('Notebook Run Vega', () => {
+  test.beforeAll(async ({ baseURL, tmpPath }) => {
+    const contents = galata.newContentsHelper(baseURL);
+    await contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+  });
+
+  test.beforeEach(async ({ page, tmpPath }) => {
+    await page.filebrowser.openDirectory(tmpPath);
+  });
+
+  test.afterAll(async ({ baseURL, tmpPath }) => {
+    const contents = galata.newContentsHelper(baseURL);
+    await contents.deleteDirectory(tmpPath);
+  });
+
+  test('Run notebook with Vega cell in default theme', async ({
+    page,
+    tmpPath
+  }) => {
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    await page.notebook.activate(fileName);
+
+    const imageName = 'run-cells-vega.png';
+
+    await page.notebook.run();
+    const graph = await page.waitForSelector('.vega-embed');
+
+    expect(await graph.screenshot()).toMatchSnapshot(imageName);
+  });
+
+  test('Run notebook with Vega cell in dark theme', async ({
+    page,
+    tmpPath
+  }) => {
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    await page.notebook.activate(fileName);
+    await page.theme.setDarkTheme();
+
+    const imageName = 'run-cells-dark-vega.png';
+
+    await page.notebook.run();
+    const graph = await page.waitForSelector('.vega-embed');
+
+    expect(await graph.screenshot()).toMatchSnapshot(imageName);
+  });
+});

galata/test/jupyterlab/notebooks/vega_notebook.ipynb

@@ -0,0 +1,56 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import display\n",
+    "\n",
+    "display({\n",
+    "    \"application/vnd.vegalite.v3+json\": {\n",
+    "        \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.json\",\n",
+    "        \"description\": \"A simple bar chart with embedded data.\",\n",
+    "        \"data\": {\n",
+    "            \"values\": [\n",
+    "                {\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43},\n",
+    "                {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53},\n",
+    "                {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}\n",
+    "            ]\n",
+    "        },\n",
+    "        \"mark\": \"bar\",\n",
+    "        \"encoding\": {\n",
+    "            \"x\": {\"field\": \"a\", \"type\": \"ordinal\"},\n",
+    "            \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n",
+    "        },\n",
+    "        \"metadata\": {\n",
+    "            \"theme\": \"dark\"\n",
+    "        },\n",
+    "    }\n",
+    "}, raw=True)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

packages/vega5-extension/src/index.ts

@@ -85,6 +85,13 @@ export class RenderedVega extends Widget implements IRenderMime.IRenderer {
       | undefined;
     const embedOptions =
       metadata && metadata.embed_options ? metadata.embed_options : {};
+
+    // If the JupyterLab theme is dark, render this using a dark Vega theme.
+    let bodyThemeDark = document.body.dataset.jpThemeLight === 'false';
+    if (bodyThemeDark) {
+      embedOptions.theme = 'dark';
+    }
+
     const mode: VegaModuleType.Mode =
       this._mimeType === VEGA_MIME_TYPE ? 'vega' : 'vega-lite';