Reflect theme changes without a refresh

By leveraging `IThemeManager.themeChanged`, we can listen on theme change signals
and rebuild the theme object in response. This allows CSS variable changes to reflect
in the MUI theme without having to refresh the page.

packages/jupyter-ai/src/components/jl-theme-provider.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import { Theme, ThemeProvider, createTheme } from '@mui/material/styles';
-import { getJupyterLabTheme } from '../theme-provider';
+import { getJupyterLabTheme, getThemeManager } from '../theme-provider';
 
 export function JlThemeProvider(props: {
   children: React.ReactNode;
@@ -13,6 +13,11 @@ export function JlThemeProvider(props: {
       setTheme(await getJupyterLabTheme());
     }
     setJlTheme();
+
+    const manager = getThemeManager();
+    if (manager) {
+      manager.themeChanged.connect(setJlTheme);
+    }
   }, []);
 
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;

packages/jupyter-ai/src/index.ts

@@ -4,14 +4,19 @@ import {
   ILayoutRestorer
 } from '@jupyterlab/application';
 
-import { IWidgetTracker, ReactWidget } from '@jupyterlab/apputils';
+import {
+  IWidgetTracker,
+  ReactWidget,
+  IThemeManager
+} from '@jupyterlab/apputils';
 import { IDocumentWidget } from '@jupyterlab/docregistry';
 import { IGlobalAwareness } from '@jupyter/collaboration';
 import type { Awareness } from 'y-protocols/awareness';
 import { buildChatSidebar } from './widgets/chat-sidebar';
 import { SelectionWatcher } from './selection-watcher';
 import { ChatHandler } from './chat_handler';
 import { buildErrorWidget } from './widgets/chat-error';
+import { setThemeManager } from './theme-provider';
 
 export type DocumentTracker = IWidgetTracker<IDocumentWidget>;
 
@@ -22,8 +27,10 @@ const plugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyter_ai:plugin',
   autoStart: true,
   optional: [IGlobalAwareness, ILayoutRestorer],
+  requires: [IThemeManager],
   activate: async (
     app: JupyterFrontEnd,
+    manager: IThemeManager,
     globalAwareness: Awareness | null,
     restorer: ILayoutRestorer | null
   ) => {
@@ -57,6 +64,11 @@ const plugin: JupyterFrontEndPlugin<void> = {
     if (restorer) {
       restorer.add(chatWidget, 'jupyter-ai-chat');
     }
+
+    /**
+     * Set the theme manager
+     */
+    setThemeManager(manager);
   }
 };
 

packages/jupyter-ai/src/theme-provider.ts

@@ -1,5 +1,8 @@
+import { IThemeManager } from '@jupyterlab/apputils';
 import { Theme, createTheme } from '@mui/material/styles';
 
+let themeManager: IThemeManager | null = null;
+
 function getCSSVariable(name: string): string {
   return getComputedStyle(document.body).getPropertyValue(name).trim();
 }
@@ -10,6 +13,14 @@ export async function pollUntilReady(): Promise<void> {
   }
 }
 
+export function setThemeManager(manager: IThemeManager): void {
+  themeManager = manager;
+}
+
+export function getThemeManager(): IThemeManager | null {
+  return themeManager;
+}
+
 export async function getJupyterLabTheme(): Promise<Theme> {
   await pollUntilReady();
   const light = document.body.getAttribute('data-jp-theme-light');