LoginSignup
1
0

More than 1 year has passed since last update.

Visual Studio Code のJupyter Notebookの配色をカスタマイズする方法(そのままコピペ可)

Posted at

自分が使っているテーマはJupyter Notebookまで綺麗に作り込まれているものではなかったので以下の方法で変更しました。
コメントは翻訳機にぶち込んでいるだけなので、わかりやすい言い方ではないです。わからないところは色を変更して試してみてください。(ごめんなさい)

↓ VScode公式が出しているカラーテーマをカスタマイズする方法をまとめたドキュメントです。
Theme Color

settings.jsonのWorkbench: Color Customizationsをいじる

Windowsの場合
ファイル > メニュー > 基本設定 > 設定
macOSの場合
Code > メニュー > 基本設定 > 設定

検索窓にWorkbench: Color Customizationsを入力して検索。
以下のようなものが出てくるはずなのでsetting.jsonで編集をクリック。
image.png
以下を追加する。(setting.jsonに何も書かれていないことを前提としたものです)

{
    "workbench.colorCustomizations": {
        "notebook.editorBackground": "#000000", // ノートの背景色。
        "notebook.cellBorderColor": "#000000", // ノートブック セルの境界線の色。
        "notebook.cellHoverBackground": "#000000", // セルをホバーしたときのセルの背景色。
        "notebook.cellInsertionIndicator": "#000000", // ノートブックのセル挿入インジケータの色。
        "notebook.cellStatusBarItemHoverBackground": "#000000", // ノートブック セルのステータス バー項目の背景色。
        "notebook.cellToolbarSeparator": "#000000", // セル下部ツールバーのセパレーターの色
        "notebook.cellEditorBackground": "#000000", // ノートブック セル エディターの背景色
        "notebook.focusedCellBorder": "#000000", // セルがフォーカスされているときのセルのフォーカス インジケーターの境界線の色。
        "notebook.focusedEditorBorder": "#000000", // ノートブック セル エディターの境界線の色。
        "notebook.inactiveFocusedCellBorder": "#000000", // 主なフォーカスがエディターの外にあるときにセルがフォーカスされている場合のセルの上下の境界線の色。
        "notebook.inactiveSelectedCellBorder": "#000000", // 複数のセルが選択されている場合のセルの境界線の色。
        "notebook.outputContainerBackgroundColor": "#000000", // ノートブック出力コンテナーの背景の色。
        "notebook.outputContainerBorderColor": "#000000", // ノートブック出力コンテナーの境界線の色。
        "notebook.selectedCellBackground": "#000000", // セルが選択されているときのセルの背景色。
        "notebook.selectedCellBorder": "#000000", // セルが選択されているがフォーカスされていない場合のセルの上下の境界線の色。
        "notebook.symbolHighlightBackground": "#000000", // ハイライトされたセルの背景色
        "notebookScrollbarSlider.activeBackground": "#000000", // クリックしたときのノートブック スクロールバー スライダーの背景色。
        "notebookScrollbarSlider.background": "#000000", // ノートブックのスクロールバー スライダーの背景色。
        "notebookScrollbarSlider.hoverBackground": "#000000", // ホバリング時のノートブック スクロールバー スライダーの背景色。
        "notebookStatusErrorIcon.foreground": "#000000", // セル ステータス バーのノートブック セルのエラー アイコンの色。
        "notebookStatusRunningIcon.foreground": "#000000", // セル ステータス バーのノートブック セルの実行中のアイコンの色。
        "notebookStatusSuccessIcon.foreground": "#000000", // セル ステータス バーのノートブック セルの成功アイコンの色。
    }

参考文献

この記事は以下の情報を参考にして執筆しました。

おわりに

テーマを上書きする形でこれらの設定が追加されるはずです。
自分好みにカスタマイズできてテンションが上がった方は、その勢いのままいいねをお願いします^^

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0