Feature request - default themes for Python interactive window #3725

PierreMarchand20 · 2018-12-21T09:25:18Z

Consider the possibly to change the style of the Python Interactive window, especially when using jupyter, and providing a list of default themes, a style "JupyterLab" would be nice for example.

It would allow us to enhance the results, like Markdown Preview Enhanced enhances the markdown output (and provides a list of default themes) or VS Code Jupyter Notebook Previewer enhances its own window viewer.

PierreMarchand20 · 2018-12-24T15:51:52Z

An example: I like the solarized dark theme but it gives me the following highlighting

which is not really readable (especially the blue for functions and black for operations). Strangely enough, it is different from my python highlighting

At least, it would be nice to have the same colors as in the '.py' file.

rchiodo · 2019-01-02T17:28:42Z

We have an outstanding issue (#3107) to fix up the colors for the python in the interactive window.

Are you asking for more than just matching the python colors? Did you want theming for graphs and such too?

PierreMarchand20 · 2019-01-04T22:49:25Z

Oh Well I do not know, a good start would be to have the same syntax coloring as in the editor. Because the python parts of the interactive window really hurt the eyes.

But then, it would be nice to have the option to have something like https://github.com/jithurjacob/vscode-nbpreviewer or the Jupiter lab, with a white background. Because for example, if I want to show something "live", it would be more readable.

stevenlis · 2019-01-12T01:22:30Z

I have the same issue. The jupyter window is much more readable if I change the theme to Light. So I wonder if it is possible to set different themes for those two separate windows.

stevenlis · 2019-01-14T21:22:50Z

a new issue was opened for this request by @IanMatthewHuff.

stevenlis · 2019-01-15T03:11:52Z

@PierreMarchand20 In the meantime:
https://github.com/neuron-team/vscode-ipe

PierreMarchand20 · 2019-01-15T07:03:23Z

Thx ! I know this one also: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jupyter

PierreMarchand20 · 2019-01-15T07:05:25Z

But I guess that at the end, the goal is to have all these features in vscode-python

stevenlis · 2019-01-15T14:45:06Z

@PierreMarchand20 indeed...

stevenlis · 2019-01-31T04:32:09Z

@rchiodo The version 2019.1.0 somehow converts the tick label to white in fivethirtyeight theme. Is this expected?

rchiodo · 2019-01-31T16:26:21Z

Yes that's expected. You have to do this instead (as we are applying a dark background to matplotlib when the theme is dark):

#%%
with plt.style.context('fivethirtyeight', True):
    fix, ax = plt.subplots()

Without the after_reset style argument, I get this:

With after_reset set to True, I get this:

stevenlis · 2019-01-31T21:16:38Z

How should I specify this if I use plt.use.style()?

rchiodo · 2019-01-31T21:39:46Z

You'd put that command before your plot. Like so:

plt.style.use('fivethirtyeight')
fix, ax = plt.subplots()

This goes into more detail:
https://matplotlib.org/users/style_sheets.html

Essentially imagine we have a plt.style.use('dark_background') at the very top of your file (because that's what we do when you startup with a dark scheme)

If you want to override just parts of it, this works:

plt.style.use(['fivethirtyeight', 'dark_background'])
fix, ax = plt.subplots()

I end up with this result then:

stevenlis · 2019-02-01T02:21:29Z

Thanks for the information man... I just want the text labels to be black and eventually end up using:

plt.style.use(['seaborn', 'fivethirtyeight'])

stefandeml · 2019-02-26T14:24:50Z

+1 to fix this issue

currently the interactive window is really hard to be used with dark themes

rchiodo · 2019-02-26T16:15:15Z

@stefandeml what theme are you currently using? Some of the dark themes we aren't finding the colors for, but it should work for the default dark theme.

rchiodo · 2019-02-26T16:16:58Z

I should also add, it's unlikely we'll be adding 'custom' jupyter themes anytime soon. We're going to make the vscode themes all work with our window, but I don't see us adding our own set of colors.

tku137 · 2019-02-26T17:00:33Z

@rchiodo can confirm that the default dark theme works, but nothing else. For example, I am using this: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

clamydo · 2019-02-27T09:19:18Z

The issue with changing the style is that is also reflected in exported figures.

Example code:

#%%
import matplotlib.pyplot as plt
import numpy as np

#%%
%matplotlib inline

#%%
x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)

fig, ax = plt.subplots()
ax.plot(x, y)

fig.savefig('plot.png')

If exexuted with, for example, the Dark theme the PNG also will have a dark themed plot. This might not be what you would expect!

PierreMarchand20 · 2019-02-27T10:40:35Z

Without adding several themes for the jupyter window, just one similar to jupyter lab would be nice. Or at least a simple one with a white background and written black. This would make us able to export figures with a more neutral style.

rchiodo · 2019-02-27T16:52:14Z

One potential idea would be for us to ship a vscode theme with special scopes.

Right now a vscode theme has json like so for different colors:

"name": "Abyss",
	"tokenColors": [
		{
			"settings": {
				"background": "#000c18",
				"foreground": "#6688cc"
			}
		},
		{
			"scope": ["meta.embedded", "source.groovy.embedded"],
			"settings": {
				"background": "#000c18",
				"foreground": "#6688cc"
			}
		},

We could add a theme like this with special scopes that we use just in our jupyter output. Something like:

"name": "Python Interactive",
	"tokenColors": [
		{
			"scope": ["matplotlib.background", ],
			"settings": {
				"background": "#FFFFFF",
			}
		},

Once we did that other people could make interactive themes based on other themes. (A theme can include other theme's json too)

KenanHArik · 2019-03-07T05:45:37Z

+1 for fixing on dark themes. Was really excited about the new interactive console... but what a shock when I saw the colors:

Compare the functions above and below!

I'm currently using Material Theme: Palenight High Contrast.
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

We're going to make the vscode themes all work with our window, but I don't see us adding our own set of colors.

Looking forward to those additions @rchiodo !

rchiodo · 2019-03-07T16:52:49Z

@KenanHArik that theme should be working now. At least it does in our insiders build.

Although make sure to reload VS code after installing. The 'Python Interactive' window isn't capable of updating themes while it's open.

benc-uk · 2019-03-08T10:42:00Z

Using a dark theme here (Palenight) and a lot of the colours in the interactive view are unreadable :(
It also seems to be ignoring my font settings

I'm on 1.32.1 and I just installed the insiders build of the extension

rchiodo · 2019-03-08T16:27:41Z

What does regular code look like? There's a known issue (#3175) with exception messages. Those colors are created by jupyter and not us. We need to just change the background on exceptions so that the jupyter colors work.

rchiodo · 2019-03-08T17:02:53Z

Actually fixing microsoft/vscode-python#3175 is trivial. I'm going to add a setting to specify the background color for error messages and default it to white.

rchiodo · 2019-03-08T17:07:50Z

See microsoft/vscode-python#4683 for the fix. That should make 'Palenight' work.

rchiodo · 2019-03-08T17:11:30Z

Font settings should work, but you need to restart the Python Interactive window.

rchiodo · 2019-03-08T19:24:20Z

@benc-uk the next insiders build should be able to show errors in dark themes:

You can set the background color for errors with "errorBackgroundColor". It defaults to white.

benc-uk · 2019-03-08T19:26:20Z

Great, thanks!

Mathenym · 2019-04-26T19:34:49Z

Thanks for all the help! One more question. Is there a way I can avoid this? I realize I can either ignore the theme or accept the theme. But is there a way I can leave the theme, but not have the plots render in dark mode?

Better yet, It would be nice to be able to customize the colors of interactive mode in a .json file similarly to how we can customize themes.

rchiodo · 2019-04-26T20:08:52Z

I think it should be possible.

We save the default base theme for matplotlib in a variable. If you type in 'globals()' it should show it. Something like '_VSCode_defaultMatplotlib_Params'

You can then put this in a cell to reset:

matplotlib.rcParams.update(_VSCode_defaultMatplotlib_Params)

Mathenym · 2019-04-26T20:27:49Z

This combo worked beautifully:

import matplotlib as mpl
mpl.rcParams.update(_VSCode_defaultMatplotlib_Params)
sns.set_style(rc = {'figure.facecolor':'white'})

thank you!

jaymegordo · 2019-05-24T13:11:29Z

Thanks, this fixed my error messages window!

I have a similar issue with the output window as well, is there a similar setting, or different way to control this?

rchiodo · 2019-05-24T15:10:05Z

@jaymegordo are you asking if you can control the colors on text output? That's not currently possible. It uses the default font and colors for the theme.

If that is what you wanted, what did you want to change?

jaymegordo · 2019-05-24T15:39:00Z

@rchiodo yes I was asking if its possible to modify the text output colors. I've modified my vs code theme (dark blue background) and wanted to match it. (I didn't realize that the interactive editor didn't have access to vs code theme colors.) Would be a nice feature to have if you're taking suggestions, thanks!

rchiodo · 2019-05-24T15:43:10Z

How did you modify your theme? In your settings file?

Our output is using this color right now:

notifications.background

If you set that in your settings, that should change the output color.

rchiodo · 2019-05-24T15:46:58Z

We have access to some of the colors. The non-scope theme colors get set in our root css for our Python Interactive window. So the one above gets turned into a css var like so:

:root { 
--vscode-notifications-background: #f3f3f3;
}

Scope theme colors (the ones we don't get) are the colors used in the editor for different tokens.

jaymegordo · 2019-05-24T15:50:40Z

@rchiodo YESSS perfect that's exactly what I wanted!! And thanks for the explanation.

Not quite as important, but do you have a similar mapping for all the Python Interactive colors just in case I wanted to change anything else? Or just something to browse and see what I can change?

rchiodo · 2019-05-24T15:56:47Z

Right now that information is in all of our CSS files in our code. Might be worth it to expose it somehow in a markdown file. I'll enter an issue for that.

That --vscode-notifications-background is being used here:
https://github.com/microsoft/vscode-python/blob/286ef4fef4a0f30e943a2736e49583c0b7df96d7/src/datascience-ui/history-react/cell.css#L60

rchiodo · 2019-05-24T15:59:26Z

I entered an issue for figuring out this mapping:
https://github.com/microsoft/vscode-python/issues/5761

stevenlis · 2019-05-29T00:24:24Z

@rchiodo very excited to see the color in the interactive windows finally matches with the theme!!!

There are two issues I want to ask:

I customized the theme like not italicizing comments. Is there any way to reflect those customizations in python interactive window?
Can I customize the fontsize of the code in the python interactive window?

rchiodo · 2019-05-29T15:16:38Z

We have an outstanding issue (#5701) of not picking up your user customizations for themes. Once we fix that, you can change the italicization of comments.

You can only change the code fontsize in the interactive window by changing your code font size in the editor.

stevenlis · 2019-07-09T04:57:45Z

seems like this issue could be closed now.

wqp89324 · 2019-07-20T15:39:45Z

@PierreMarchand20 at the beginning of this thread, you gave an example where the dark color theme made the graph background also black, do you know how to make it white, like this?

PierreMarchand20 · 2019-07-20T16:36:05Z

One point I was making with this thread was that I did not how to do it. Then, reading the messages in the thread, you can either use the option ignoreVsCodeTheme or use in your code the following line: mpl.rcParams.update(_VSCode_defaultMatplotlib_Params). But the latter is not rendering well for me so I would suggest the former.

By the way, I noticed that there is no more issue with the background error color right ? If so, I agree that we could close this issue since we can set a light Color theme to the interactive window (which was what I was asking for at the beginning). But the default theme with a dark theme has really improved so I actually do not use this option ^^ thank you !

wqp89324 · 2019-07-21T15:30:43Z

@PierreMarchand20 Thanks! I tried ignoreVsCodeTheme, which kinda work (interactive window is all light theme now), but still not as good as Spyder (the screenshot I attached earlier), and I attach another one below.

In Spyder, the dark theme works everywhere except for the figures, which is really the behavior I'm after. What do you think?

PierreMarchand20 · 2019-07-21T17:26:45Z

Well then you can try the second approach I suggested, it will be closer to what you want. The idea is to change the parameter of matplotlib. But @rchiodo will know better than me about this.

PierreMarchand20 · 2019-07-21T17:40:46Z

actually, I got decent results with just mpl.style.use('classic')

rchiodo · 2019-07-22T15:21:08Z

Closing this as the original issue is resolved.

rchiodo · 2019-07-22T15:21:58Z

Sorry wrong issue. Not sure we're going to do themes for the interactive window though.

PierreMarchand20 · 2019-07-22T15:57:23Z

As I said in my previous message, I am ok to close it since allowing we can know use a light theme and most of the issues with colouring has been solved

rchiodo · 2019-07-22T16:02:17Z

Thanks. Will close then.

rchiodo closed this as completed Jul 22, 2019

rchiodo reopened this Jul 22, 2019

rchiodo closed this as completed Jul 22, 2019

lock bot locked as resolved and limited conversation to collaborators Jul 29, 2019

microsoft unlocked this conversation Nov 14, 2020

DonJayamanne transferred this issue from microsoft/vscode-python Nov 14, 2020

github-actions bot locked as resolved and limited conversation to collaborators May 6, 2021

Feature request - default themes for Python interactive window #3725

Feature request - default themes for Python interactive window #3725

Comments

PierreMarchand20 commented Dec 21, 2018

PierreMarchand20 commented Dec 24, 2018

rchiodo commented Jan 2, 2019

PierreMarchand20 commented Jan 4, 2019

stevenlis commented Jan 12, 2019 • edited Loading

stevenlis commented Jan 14, 2019 • edited Loading

stevenlis commented Jan 15, 2019

PierreMarchand20 commented Jan 15, 2019

PierreMarchand20 commented Jan 15, 2019 • edited Loading

stevenlis commented Jan 15, 2019

stevenlis commented Jan 31, 2019

rchiodo commented Jan 31, 2019 • edited Loading

stevenlis commented Jan 31, 2019

rchiodo commented Jan 31, 2019

stevenlis commented Feb 1, 2019

stefandeml commented Feb 26, 2019

rchiodo commented Feb 26, 2019

rchiodo commented Feb 26, 2019

tku137 commented Feb 26, 2019

clamydo commented Feb 27, 2019 • edited Loading

PierreMarchand20 commented Feb 27, 2019

rchiodo commented Feb 27, 2019

KenanHArik commented Mar 7, 2019

rchiodo commented Mar 7, 2019 • edited Loading

benc-uk commented Mar 8, 2019 • edited Loading

rchiodo commented Mar 8, 2019

rchiodo commented Mar 8, 2019

rchiodo commented Mar 8, 2019

rchiodo commented Mar 8, 2019

rchiodo commented Mar 8, 2019 • edited Loading

benc-uk commented Mar 8, 2019

Mathenym commented Apr 26, 2019 • edited Loading

rchiodo commented Apr 26, 2019

Mathenym commented Apr 26, 2019

jaymegordo commented May 24, 2019

rchiodo commented May 24, 2019

jaymegordo commented May 24, 2019

rchiodo commented May 24, 2019 • edited Loading

rchiodo commented May 24, 2019

jaymegordo commented May 24, 2019

rchiodo commented May 24, 2019 • edited Loading

rchiodo commented May 24, 2019

stevenlis commented May 29, 2019

rchiodo commented May 29, 2019

stevenlis commented Jul 9, 2019

wqp89324 commented Jul 20, 2019

PierreMarchand20 commented Jul 20, 2019 • edited Loading

wqp89324 commented Jul 21, 2019

PierreMarchand20 commented Jul 21, 2019

PierreMarchand20 commented Jul 21, 2019 • edited Loading

rchiodo commented Jul 22, 2019

rchiodo commented Jul 22, 2019

PierreMarchand20 commented Jul 22, 2019

rchiodo commented Jul 22, 2019

stevenlis commented Jan 12, 2019 •

edited

Loading

stevenlis commented Jan 14, 2019 •

edited

Loading

PierreMarchand20 commented Jan 15, 2019 •

edited

Loading

rchiodo commented Jan 31, 2019 •

edited

Loading

clamydo commented Feb 27, 2019 •

edited

Loading

rchiodo commented Mar 7, 2019 •

edited

Loading

benc-uk commented Mar 8, 2019 •

edited

Loading

rchiodo commented Mar 8, 2019 •

edited

Loading

Mathenym commented Apr 26, 2019 •

edited

Loading

rchiodo commented May 24, 2019 •

edited

Loading

rchiodo commented May 24, 2019 •

edited

Loading

PierreMarchand20 commented Jul 20, 2019 •

edited

Loading

PierreMarchand20 commented Jul 21, 2019 •

edited

Loading