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

2021-08-08

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

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

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

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

テーマ色のカスタマイズ

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

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

settings.json

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

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

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

編数名	機能
`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 v1.59 でテーマ配色のカスタマイズ機能が拡張され，ワイルドカードが使用できるようになりました．

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

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

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