Change Variable Highlighting Color

[kelleyjbrady]

The light blue and pink highlighting that Gather uses look great in the default grey+white Jupyter Lab theme, but highlighting REALLY highlights when you are in Dark mode or the Material Darker theme. Is there a way to tone things down that I am missing? Thanks!

[andrewhead]

Hey @kelleyjbrady! I think you're absolutely right, the current colors make the code and UI buttons pretty unreadable in dark mode. This is what I'm seeing:

Yikes! That said, I think it would be pretty easy to get good colors for dark mode too.

One way would be to refactor the highlighting colors in index.css to use style variables from the themes (like these or these). This seems to be the recommended way in the developer guide which says "built-in and third party extensions should use these variables in their styles if at all possible."

The challenge with relying on theme variables is that I don't see any color variables for highlighting text's background in the dark theme, much less two different highlighting colors which we currently use to color both variable definitions and lines in the slice.

Another option is to add theme-specific coloring rules to index.css. Like this one, which in my web console sets the highlight color for variable definitions to black:

div.jp-ApplicationShell[data-theme-name="JupyterLab Dark"] span.cm-variable.jp-InputArea-editor-nametext {
    background-color: black;
}

I feel iffy about this specific selector as selecting using application shell node data seems brittle. But if there's a cleaner, more reliable selector for distinguishing between light and dark themes, that might be a way to include colors for both light and dark styles in the plugin.

Timing-wise, I'm on vacation these three weeks. If you wanted to take a stab at any of this that would be totally welcome. It would be great to have a PR for this enhancement.

[AndreCNF]

Is there any update on this color adaptation? I find this extension to be quite interesting and useful, but I want to use notebooks in dark mode.

Gather on JupyterLab light:

Gather on JupyterLab dark:

[andrewhead]

Hi @AndreCNF! This isn't implemented yet, though on second look it would be a pretty straightforward implementation. What I didn't know in my last post on this thread was that JupyterLab already has a recommended way of enabling theme-dependent styling, as noted in this issue jupyterlab/jupyterlab#3681 and this pull request jupyterlab/jupyterlab#5078.

A quick prototype in the web inspector shows that the following selector...

[data-jp-theme-light="false"] .jp-InputArea-editor-nametext {
    background-color: rebeccapurple !important;
}

Can make the highlighting appear like so:

Should be a pretty straightforward fix, involving defining some theme-dependent style variables. Do you want to take a stab at it by any chance? If not, I might have a chance to revisit this in a few weeks when I loop back to batch process a few of the open issues.

[hsadeghi]

it is possible to change error highlight color in Jupyter instead as explained here:
https://stackoverflow.com/questions/70766518/how-to-change-ipython-error-highlighting-color