VS CodeのJupyter Notebookで配色を変更する

VS Code は Jupyter Notebook (.ipynb) に対応しています.

ブラウザを使用しなくても良いので使いやすいのですが,Jupyter Notebook はライトテーマであるのに対し,VS Code はデフォルトのテーマが暗色のため,一部グラフのラベルが見えにくいという悩みがありました.

テーマ自体をライトカラーのものに変更する方法もありますが,コーディング時はダークモードの方が目に優しいので全体の色を変更したくはありません.

ということで,出力セルのみの色を変更することで見やすくすることにしました.

テーマ色のカスタマイズ

Jupyter Notebook の配色は "notebook" 以下で設定できます.主にボーダー色背景色が変更可能です,

出力セルの背景色を変更する場合は,以下の設定を使用します.

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

カラーコードは RGB or RGBA で設定でき,上記のように短縮記述も可能です.

Theme Color | Visual Studio Code Extension API

その他設定できる項目には以下のものがあります.

  • 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

VS Codeのアップデート

VS Code v1.59 でテーマ配色のカスタマイズ機能が拡張され,ワイルドカードが使用できるようになりました.

Extended theme customization syntax | Visual Studio Code July 2021

Windows ではデフォルトで自動更新するようになっています.

macOS では自動でダウンロードされるものの更新は手動です.

メニューバーの [Code] > [Restart to Update] で更新できます.