Text changing colour in JupyterLab dark theme, background remains white (JupyterLab 4.1.2)

[berglh]

I've been working on a new Pyspark JupyterLab build and was testing extension support one at a time using the Docker container quay.io/jupyter/pyspark-notebook:x86_64-spark-3.5.0. I installed the sparkmonitor extension as per normal and it works fine in the default JupyterLab light theme. However, as the table background CSS attributes for sparkmonitor are static, when changing to the dark theme for JupyterLab, the text of the table is changed to lighter colours and make the text illegible.

Either, the plugin should adjust the appearance based on theme (inherit the theme aware CSS attributes), or force the font colour CSS in the extension to always have the dark colours as per the light theme extension appearance for JupyterLab.

It should be noted that the tasks and event timeline views of sparkmonitor are rendering with black text when the dark theme is selected. These do appear to be rendering libraries though, and it might be difficult to inherit the JupyterLab theme CSS to update the appearance correctly. Perhaps the easiest thing is to force the font colour in the extension CSS and then in a future body of work look at adding theme colour support.

In the meantime, I will try earlier versions of JupyterLab until I find something working as expected. We are currently using JupyterLab 3.6.2, and the text is visible even in dark theme.

[berglh]

I've looked into this a bit further, and I ended up hacking the compiled CSS to paint in the color attribute into the table for the tasks and it's working as expected.

After faffing about in browser debugger, then after installing the plugin, I just string replaced the start of the table attribute in the static CSS file.

sed -i 's|pm table {\\n  border-radius: 0;\\n  width: 100%;\\n\\n|pm table {\\n  border-radius: 0;\\n  color: black;\\n\\n  width: 100%;\\n\\n|g' /opt/conda/share/jupyter/labextensions/sparkmonitor/static/831.d59534fee4c54bd0ad91.js

I'm guessing that the static optimsed JS files may result in different file names depending on the plugin version, so this is only specifically working with the 2.0.3 release.

This would be equivalent to editing the CSS here:
https://github.com/swan-cern/sparkmonitor/blob/master/style/jobtable.css#L40-L48

I don't have the familiarity with yarn or the build tools for this repository, so to save myself a lot of pain, I've just hacked a solution for the interim.