Backport PR #15957: Fix Theme color is not applied to Toolbar Button (#15995)

Co-authored-by: FoSuCloud <[email protected]>

Author: meeseeksmachine

galata/test/jupyterlab/toolbars.test.ts

@@ -37,23 +37,47 @@ toolbars.forEach(([plugin, parameter]) => {
     expect(missingCommands).toEqual([]);
   });
 });
+test.describe('Toolbar Button', () => {
+  test.beforeEach(async ({ page, tmpPath }) => {
+    await page.notebook.createNew();
+  });
 
-test('Render Switch Kernel ToolbarButton', async ({ page }) => {
-  await page.notebook.createNew();
+  test('Render Switch Kernel ToolbarButton in default theme', async ({
+    page
+  }) => {
+    const label = await page.$(
+      'jp-button.jp-Toolbar-kernelName .jp-ToolbarButtonComponent-label'
+    );
+    const labelColor = await page.evaluate(
+      el => getComputedStyle(el).color,
+      label
+    );
 
-  const label = await page.$(
-    'jp-button.jp-Toolbar-kernelName .jp-ToolbarButtonComponent-label'
-  );
-  const labelColor = await page.evaluate(
-    el => getComputedStyle(el).color,
-    label
-  );
+    const color = await page.evaluate(() =>
+      getComputedStyle(document.body)
+        .getPropertyValue('--jp-ui-font-color1')
+        .trim()
+    );
 
-  const color = await page.evaluate(() =>
-    getComputedStyle(document.body)
-      .getPropertyValue('--jp-ui-font-color1')
-      .trim()
-  );
+    expect(labelColor).toEqual(color);
+  });
 
-  expect(labelColor).toEqual(color);
+  test('Render Switch Kernel ToolbarButton in dark theme', async ({ page }) => {
+    await page.theme.setDarkTheme();
+    const label = await page.$(
+      'jp-button.jp-Toolbar-kernelName .jp-ToolbarButtonComponent-label'
+    );
+    const labelColor = await page.evaluate(
+      el => getComputedStyle(el).color,
+      label
+    );
+
+    const color = await page.evaluate(() =>
+      getComputedStyle(document.body)
+        .getPropertyValue('--jp-ui-font-color1')
+        .trim()
+    );
+
+    expect(labelColor).toEqual(color);
+  });
 });

packages/ui-components/style/toolbar.css

@@ -74,7 +74,7 @@ button.jp-ToolbarButtonComponent .jp-ToolbarButtonComponent-label {
   font-family: var(--jp-ui-font-family);
 }
 
-jp-button.jp-Toolbar-kernelName {
+.jp-Toolbar .jp-ToolbarButtonComponent {
   color: var(--jp-ui-font-color1);
 }