くらげnote

"ぼやき" by くらげ(fal)

VSCodeのテーマをいじってみる

この記事を読んで出来ること

  • VSCode のテーマが変えられる

カラーテーマ選択

Ctrl+K Ctrl+T でカラーテーマ選択

さらに変えたい

色々変えられる

ちなみに以下は私自身の設定.カラーテーマはDark+.

  //色設定
  "workbench.colorCustomizations": {
    //エディタの背景色
    "editor.background": "#000000",
    //アクティビティバーの背景色
    "activityBar.background": "#303030",
    //通知領域の背景色
    "notifications.background": "#490043",
    //エディタカーソルの背景色
    "editor.selectionBackground": "#660000",
    //現在の選択範囲と同じテキストをハイライト表示
    "editor.selectionHighlightBackground": "#303030",
    // 制御文字列(タブなど)を含め半角空白の色
    "editorWhitespace.foreground": "#757575",
    //アクティブなタブの背景
    "tab.activeBackground": "#00435d",
    "activityBar.activeBackground": "#00435d",
    "list.activeSelectionBackground": "#0086f3",
    "list.inactiveSelectionBackground": "#0086f3",
    //ステータスバー(下部)の背景色と文字色
    "statusBar.background": "#08334e",
    "statusBar.noFolderBackground": "#303030",
    "statusBar.foreground": "#aaa",
    "statusBar.noFolderForeground": "#aaa",
    //---border関連---//
    //ドロップダウンの下線
    "dropdown.border": "#7c7c7c",
    //通知領域の境界線
    "notificationCenter.border": "#d600c4",
    "notificationToast.border": "#d600c4",
    //その他色々の境界線
    "activityBar.border": "#2caaff",
    "sideBar.border": "#2caaff",
    "editorGroup.border": "#2caaff",
    "editorGroupHeader.tabsBorder": "#2caaff",
    "tab.border": "#2caaff",
    "statusBar.border": "#2caaff",
    "tab.activeBorder": "#2caaff",
    "panel.border": "#2caaff",
    "titleBar.border": "#2caaff",
    "menu.border": "#2caaff",
    "contrastBorder": "#2caaff",
    "editorHoverWidget.border": "#2caaff",
    "checkbox.border": "#2caaff",
    "input.border": "#2caaff",
    "statusBar.noFolderBorder": "#2caaff",
    "tab.activeBorderTop":"#2caaff",
  },
  //コメントの設定
  "editor.tokenColorCustomizations": {
    "comments": {
      "foreground": "#aaa",
      "fontStyle": "italic"
    },
  },
  //選択範囲の角を丸めない
  "editor.roundedSelection": false,

もっともっと変えたい

公式文書(英語) Theme Color | Visual Studio Code Extension API