How to get jupyter notebook theme in vscode

Viewed 10219

I am a data scientist use jupyter notebook a lot and also have started to do lot of development work and use Vscode for development. so how can I get Jupyter notebook theme in vscode as well? I know how to open a Jupyter notebook in vscode by installing an extension but I wanted to know how to get Jupyter notebook theme for vs code. so it gets easier to switch between both ide without training eyes

4 Answers

You can edit your VScode's settings by:

1- Go to your Jupyter extension => Extension settings => and check "Ignore Vscode Theme".

2- Click on File => preference=> color Theme

3- Select the theme you need.

You can download the theme extension from VSCode's extension store, for example: Markdown Theme Kit; Material Theme Kit.

Note: You need to restart or reload VSCode to see the changes.

I created a new theme that is now on the vscode marketplace!

https://marketplace.visualstudio.com/items?itemName=sam-the-programmer.jupyter-theme

Go to the link above, or search in the VS Code marketplace sam-the-programmer.jupyter-theme. Install the first one that comes up. This then allows you to press F1, search for Change Colour Theme and then select Jupyter Theme. Done!

It should look like...

Image of what it looks like

Hope you like it!

Currently, the jupyter notebook in VSCode is provided by the python extension. Therefore, although it supports the use of the jupyter notebook, it does not support providing theme specifically for jupyter notebook.

You could refer to the following ways to change the color and highlight of jupyter notebook:

  1. Click on'File','preference','color Theme', then, select the theme you need. Reference:Theme.

  2. Download the theme extension from VSCode's extension store, for example:Markdown Theme Kit;Material Theme Kit.

You can create your own notebook theme. It looks like https://i.stack.imgur.com/Tp2Fr.png. To find the required parameter in the JSON file, you can use 'Developer Inspect Editor Tokens and Scopes, and then change the colors you need in the JSON file. JSON located in /Microsoft VS Code/resources/app/extensions/theme-defaults/themes/file.json. Or if u want use custom theme like me(i used Slack Theme) JSON of extension theme located in /users/user_name/.vscode/extensions/theme_name/themes/file.json. This video also can help you https://www.youtube.com/watch?v=Su-cNLe0dgw&ab_channel=RAZR. And then using 'inspect element' in browser copy colors and past to json scopes.

Related