Change color scheme in VS Code's Jupyter Notebook

VS Code is compatible with Jupyter Notebook (.ipynb). Jupyter Notebook has a light theme, but VS Code's default theme is dark, which made it difficult to see some graph labels. The theme itself can be changed to a light color, but when coding, the dark mode is easier on the eyes and we do not want to change the overall color, so we changed the color of only the output cells to make them easier to see.

Customize theme colors

The color scheme of Jupyter Notebook can be set under "notebook". The main colors that can be changed are border color and background color.

To change the background color of output cells, use the following settings.

    "workbench.colorCustomizations": {
        "notebook.outputContainerBackgroundColor": "#999"
    }

Reference: Theme Color - Visual Studio Code Extension API

Other settings that can be configured include the following.

• notebook.cellBorderColor
• notebook.cellEditorBackground
• notebook.cellHoverBackground
• notebook.cellInsertionIndicator
• notebook.cellStatusBarItemHoverBackground
• notebook.cellToolbarSeparator
• notebook.focusedCellBackground
• notebook.focusedCellBorder
• notebook.focusedEditorBorder
• notebook.inactiveFocusedCellBorder
• notebook.inactiveSelectedCellBorder
• notebook.selectedCellBackground
• notebook.selectedCellBorder
• notebook.symbolHighlightBackground

Update VS Code

VS Code v1.59 extends the ability to customize theme color schemes and allows the use of wildcards.

Reference: Extended theme customization syntax - Visual Studio Code July 2021

On Windows, automatic updates are enabled by default.

On macOS, it is downloaded automatically, but updates are done manually. You can update manually by clicking [Code] > [Restart to Update] on the menu bar.