Description
Problem
We are having trouble keeping the text styling consistent with JupyterLab's theme across theme changes. PR #192 included a theme hack (authored by yours truly) that locks the color of the Typography component with the value of --jp-ui-font-color1. Without this hack, Typography components always render black text by default regardless of the JL theme. This allows Jupyter AI's chat UI to look aesthetically correct after switching the theme to JL Dark and refreshing the page. However, there are two issues with this approach:
- This is also affecting the style of TextField labels, which makes it really difficult to distinguish a field with existing text and an empty field.
MUI default theme:
Our theme:
- The MUI theme does not reflect theme changes without a refresh. The reason for this is that MUI themes do not support CSS variables as style values, so we are retrieving the values of these CSS variables on initial render. However, if the values of these CSS variables change, those changes are not reflected in the MUI theme. We will want some kind of mechanism to listen to theme changes (possibly via Lumino signals) and then rebuild the theme object in response. This should be done in the
JlThemeProvidercomponent defined inpackages/jupyter-ai/src/components/jl-theme-provider.tsx. Here is the current implementation:
export function JlThemeProvider(props: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>(createTheme());
useEffect(() => {
async function setJlTheme() {
setTheme(await getJupyterLabTheme());
}
setJlTheme();
}, []);
return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
}We will want to modify the effect hook to also listen to theme changes, and then call setJlTheme() in response to theme changes. That should let MUI themes change whenever the JL theme changes, without needing a refresh.
Proposed Solution
Somehow engineer a solution to all of these problems without introducing new ones.