アウトプットのために、学習しながらQiitaで記事を書くことにした。
qiita-cliを導入してVScodeで記事を書いてみたところ、普段の開発もVScodeで行っているためウィンドウが混ざって分かりづらかった。
そこで、VScodeをQiitaの色にして一瞬で判別できるようにした。
色々と調べてカスタマイズした結果、自分好みのカラーに変えることができた。
.vscode/settings.jsonには以下のように記述した。
.vscode/settings.json
{
"workbench.colorCustomizations": {
// ============================================
// タイトルバー（ウィンドウ最上部の「ファイル 編集 表示...」がある部分）
// ============================================
"titleBar.activeBackground": "#00CA00", // ウィンドウがアクティブ時の背景色
"titleBar.activeForeground": "#FFFFFF", // ウィンドウがアクティブ時の文字色
"titleBar.inactiveBackground": "#009900", // ウィンドウが非アクティブ時の背景色
"titleBar.inactiveForeground": "#CCCCCC", // ウィンドウが非アクティブ時の文字色
// ============================================
// ステータスバー（ウィンドウ最下部のバー。ブランチ名や行番号が表示される）
// ============================================
"statusBar.background": "#00CA00", // 通常時の背景色
"statusBar.foreground": "#FFFFFF", // 通常時の文字色
"statusBar.debuggingBackground": "#FF6600", // デバッグ実行中の背景色
"statusBar.debuggingForeground": "#FFFFFF", // デバッグ実行中の文字色
"statusBar.noFolderBackground": "#666666", // フォルダ未オープン時の背景色
"statusBar.noFolderForeground": "#FFFFFF", // フォルダ未オープン時の文字色
// ============================================
// アクティビティバー（画面左端の縦アイコンバー。エクスプローラー、検索、Git等のアイコンがある）
// ============================================
"activityBar.foreground": "#00CA00", // 選択中のアイコン色
"activityBar.activeBorder": "#00CA00", // 選択中アイコンの左側に表示される縦線
"activityBarBadge.background": "#FF6666", // バッジ（通知数）の背景色
}
}
より詳細な設定をしたい場合は以下を参考にすると自由度が上がりそう。
以下の"#XXXXXX"に任意のカラーコードが入る。
.vscode/settings.json
{
"workbench.colorCustomizations": {
// ============================================
// タイトルバー（ウィンドウ最上部の「ファイル 編集 表示...」がある部分）
// ============================================
"titleBar.activeBackground": "#XXXXXX", // ウィンドウがアクティブ時の背景色
"titleBar.activeForeground": "#XXXXXX", // ウィンドウがアクティブ時の文字色
"titleBar.inactiveBackground": "#XXXXXX", // ウィンドウが非アクティブ時の背景色
"titleBar.inactiveForeground": "#XXXXXX", // ウィンドウが非アクティブ時の文字色
"titleBar.border": "#XXXXXX", // タイトルバーの下の境界線
// ============================================
// ステータスバー（ウィンドウ最下部のバー。ブランチ名や行番号が表示される）
// ============================================
"statusBar.background": "#XXXXXX", // 通常時の背景色
"statusBar.foreground": "#XXXXXX", // 通常時の文字色
"statusBar.border": "#XXXXXX", // ステータスバーの上の境界線
"statusBar.debuggingBackground": "#XXXXXX", // デバッグ実行中の背景色
"statusBar.debuggingForeground": "#XXXXXX", // デバッグ実行中の文字色
"statusBar.noFolderBackground": "#XXXXXX", // フォルダ未オープン時の背景色
"statusBar.noFolderForeground": "#XXXXXX", // フォルダ未オープン時の文字色
// ============================================
// アクティビティバー（画面左端の縦アイコンバー。エクスプローラー、検索、Git等のアイコンがある）
// ============================================
"activityBar.background": "#XXXXXX", // 背景色
"activityBar.foreground": "#XXXXXX", // 選択中のアイコン色
"activityBar.inactiveForeground": "#XXXXXXXX", // 未選択のアイコン色（8桁で透明度指定可）
"activityBar.border": "#XXXXXX", // 右側の境界線
"activityBar.activeBorder": "#XXXXXX", // 選択中アイコンの左側に表示される縦線
"activityBarBadge.background": "#XXXXXX", // バッジ（通知数）の背景色
"activityBarBadge.foreground": "#XXXXXX", // バッジの文字色
// ============================================
// サイドバー（エクスプローラー、検索結果などが表示される左側のパネル）
// ============================================
"sideBar.background": "#XXXXXX", // 背景色
"sideBar.foreground": "#XXXXXX", // 文字色
"sideBar.border": "#XXXXXX", // 右側の境界線
"sideBarTitle.foreground": "#XXXXXX", // 「エクスプローラー」等のタイトル文字色
"sideBarSectionHeader.background": "#XXXXXX", // セクション見出し（「開いているエディター」等）の背景色
"sideBarSectionHeader.foreground": "#XXXXXX", // セクション見出しの文字色
"sideBarSectionHeader.border": "#XXXXXX", // セクション見出しの境界線
// ============================================
// リスト・ツリー（ファイル一覧、検索結果などのリスト表示全般）
// ============================================
"list.activeSelectionBackground": "#XXXXXX", // 選択中の項目の背景色（フォーカス時）
"list.activeSelectionForeground": "#XXXXXX", // 選択中の項目の文字色（フォーカス時）
"list.inactiveSelectionBackground": "#XXXXXXXX", // 選択中の項目の背景色（フォーカス外）※8桁で透明度指定可
"list.inactiveSelectionForeground": "#XXXXXX", // 選択中の項目の文字色（フォーカス外）
"list.hoverBackground": "#XXXXXXXX", // マウスホバー時の背景色 ※8桁で透明度指定可
"list.hoverForeground": "#XXXXXX", // マウスホバー時の文字色
"list.focusBackground": "#XXXXXXXX", // キーボードフォーカス時の背景色 ※8桁で透明度指定可
"list.focusForeground": "#XXXXXX", // キーボードフォーカス時の文字色
"list.highlightForeground": "#XXXXXX", // 検索でマッチした文字のハイライト色
// ============================================
// エディタタブ（開いているファイルのタブが並ぶ部分）
// ============================================
"tab.activeBackground": "#XXXXXX", // アクティブなタブの背景色
"tab.activeForeground": "#XXXXXX", // アクティブなタブの文字色
"tab.inactiveBackground": "#XXXXXX", // 非アクティブなタブの背景色
"tab.inactiveForeground": "#XXXXXX", // 非アクティブなタブの文字色
"tab.border": "#XXXXXX", // タブ間の境界線
"tab.activeBorder": "#XXXXXX", // アクティブタブの下の境界線
"tab.activeBorderTop": "#XXXXXX", // アクティブタブの上の境界線
"tab.hoverBackground": "#XXXXXXXX", // タブにマウスホバー時の背景色 ※8桁で透明度指定可
"tab.hoverForeground": "#XXXXXX", // タブにマウスホバー時の文字色
"editorGroupHeader.tabsBackground": "#XXXXXX",// タブバー全体の背景色
"editorGroupHeader.tabsBorder": "#XXXXXX", // タブバーの下の境界線
// ============================================
// エディタ（コードを書く中央のメイン領域）
// ============================================
"editor.background": "#XXXXXX", // 背景色
"editor.foreground": "#XXXXXX", // デフォルトの文字色
"editor.selectionBackground": "#XXXXXXXX", // テキスト選択時の背景色 ※8桁で透明度指定可
"editor.selectionHighlightBackground": "#XXXXXXXX", // 選択中テキストと同じ単語のハイライト ※8桁で透明度指定可
"editor.lineHighlightBackground": "#XXXXXXXX",// カーソルがある行の背景色 ※8桁で透明度指定可
"editor.lineHighlightBorder": "#XXXXXXXX", // カーソルがある行の境界線 ※8桁で透明度指定可
"editorCursor.foreground": "#XXXXXX", // カーソル（キャレット）の色
"editorLineNumber.foreground": "#XXXXXX", // 行番号の色
"editorLineNumber.activeForeground": "#XXXXXX", // カーソル行の行番号の色
"editorIndentGuide.background1": "#XXXXXXXX", // インデントガイド（縦の点線）の色 ※8桁で透明度指定可
"editorIndentGuide.activeBackground1": "#XXXXXX", // 現在のインデントレベルのガイド色
"editorBracketMatch.background": "#XXXXXXXX", // 対応する括弧のハイライト背景 ※8桁で透明度指定可
"editorBracketMatch.border": "#XXXXXX", // 対応する括弧のハイライト枠線
// ============================================
// スクロールバー（エディタ右端の縦スクロールバー）
// ============================================
"scrollbar.shadow": "#XXXXXX", // スクロール時に表示される影
"scrollbarSlider.background": "#XXXXXXXX", // スクロールバーの色（通常時）※8桁で透明度指定可
"scrollbarSlider.hoverBackground": "#XXXXXXXX", // スクロールバーの色（ホバー時）※8桁で透明度指定可
"scrollbarSlider.activeBackground": "#XXXXXX", // スクロールバーの色（ドラッグ時）
// ============================================
// ミニマップ（エディタ右側のコード全体の縮小プレビュー）
// ============================================
"minimap.selectionHighlight": "#XXXXXXXX", // 選択範囲のハイライト ※8桁で透明度指定必須
"minimap.findMatchHighlight": "#XXXXXXXX", // 検索マッチのハイライト ※8桁で透明度指定必須
// ============================================
// パネル（画面下部のターミナル、出力、問題、デバッグコンソール等）
// ============================================
"panel.background": "#XXXXXX", // 背景色
"panel.border": "#XXXXXX", // 上の境界線
"panelTitle.activeBorder": "#XXXXXX", // アクティブなタブ（ターミナル等）の下線
"panelTitle.activeForeground": "#XXXXXX", // アクティブなタブの文字色
"panelTitle.inactiveForeground": "#XXXXXX", // 非アクティブなタブの文字色
// ============================================
// ターミナル（パネル内の統合ターミナル）
// ============================================
"terminal.background": "#XXXXXX", // 背景色
"terminal.foreground": "#XXXXXX", // 文字色
"terminal.ansiGreen": "#XXXXXX", // ANSI緑色（lsのディレクトリ等）
"terminal.ansiBrightGreen": "#XXXXXX", // ANSI明るい緑色
"terminalCursor.foreground": "#XXXXXX", // カーソルの色
// ============================================
// 入力フィールド（コマンドパレット、検索ボックス等のテキスト入力欄）
// ============================================
"input.background": "#XXXXXX", // 背景色
"input.foreground": "#XXXXXX", // 文字色
"input.border": "#XXXXXX", // 枠線の色
"input.placeholderForeground": "#XXXXXX", // プレースホルダーの文字色
"inputOption.activeBorder": "#XXXXXX", // 有効なオプション（正規表現等）の枠線
"inputOption.activeBackground": "#XXXXXXXX", // 有効なオプションの背景色 ※8桁で透明度指定可
"inputOption.activeForeground": "#XXXXXX", // 有効なオプションの文字色
// ============================================
// ドロップダウン（設定画面などのセレクトボックス）
// ============================================
"dropdown.background": "#XXXXXX", // 背景色
"dropdown.foreground": "#XXXXXX", // 文字色
"dropdown.border": "#XXXXXX", // 枠線の色
"dropdown.listBackground": "#XXXXXX", // ドロップダウンリストの背景色
// ============================================
// ボタン（ダイアログやウィザードのボタン）
// ============================================
"button.background": "#XXXXXX", // プライマリボタンの背景色
"button.foreground": "#XXXXXX", // プライマリボタンの文字色
"button.hoverBackground": "#XXXXXX", // プライマリボタンのホバー時背景色
"button.secondaryBackground": "#XXXXXX", // セカンダリボタンの背景色
"button.secondaryForeground": "#XXXXXX", // セカンダリボタンの文字色
"button.secondaryHoverBackground": "#XXXXXX", // セカンダリボタンのホバー時背景色
// ============================================
// バッジ（検索結果数、エラー数などの数字表示）
// ============================================
"badge.background": "#XXXXXX", // 背景色
"badge.foreground": "#XXXXXX", // 文字色
// ============================================
// 通知（画面右下にポップアップする通知）
// ============================================
"notifications.background": "#XXXXXX", // 背景色
"notifications.foreground": "#XXXXXX", // 文字色
"notifications.border": "#XXXXXX", // 枠線の色
"notificationLink.foreground": "#XXXXXX", // リンクの文字色
// ============================================
// ピークビュー（定義をプレビュー表示するポップアップ。F12長押しや「定義をピーク」）
// ============================================
"peekView.border": "#XXXXXX", // 枠線の色
"peekViewTitle.background": "#XXXXXX", // タイトル部分の背景色
"peekViewTitleLabel.foreground": "#XXXXXX", // タイトルの文字色
"peekViewTitleDescription.foreground": "#XXXXXX", // タイトル説明の文字色
"peekViewResult.background": "#XXXXXX", // 結果リストの背景色
"peekViewResult.selectionBackground": "#XXXXXXXX", // 選択中の結果の背景色 ※8桁で透明度指定可
"peekViewEditor.background": "#XXXXXX", // エディタ部分の背景色
"peekViewEditor.matchHighlightBackground": "#XXXXXXXX", // マッチ部分のハイライト ※8桁で透明度指定可
// ============================================
// ブレッドクラム（エディタ上部のパス表示。フォルダ > ファイル > 関数名）
// ============================================
"breadcrumb.foreground": "#XXXXXX", // 通常の文字色
"breadcrumb.focusForeground": "#XXXXXX", // フォーカス時の文字色
"breadcrumb.activeSelectionForeground": "#XXXXXX", // 選択中の項目の文字色
"breadcrumbPicker.background": "#XXXXXX", // ピッカー（ドロップダウン）の背景色
// ============================================
// エディタウィジェット（オートコンプリート、パラメータヒント等のポップアップ）
// ============================================
"editorWidget.background": "#XXXXXX", // 背景色
"editorWidget.border": "#XXXXXX", // 枠線の色
"editorWidget.foreground": "#XXXXXX", // 文字色
"editorSuggestWidget.background": "#XXXXXX", // サジェスト（補完）ウィジェットの背景色
"editorSuggestWidget.border": "#XXXXXX", // サジェストウィジェットの枠線
"editorSuggestWidget.foreground": "#XXXXXX", // サジェストウィジェットの文字色
"editorSuggestWidget.selectedBackground": "#XXXXXX", // 選択中の候補の背景色
"editorSuggestWidget.highlightForeground": "#XXXXXX", // マッチした文字のハイライト
// ============================================
// 検索（Ctrl+F / Cmd+F での検索機能）
// ============================================
"editor.findMatchBackground": "#XXXXXXXX", // 現在のマッチの背景色 ※8桁で透明度指定可
"editor.findMatchHighlightBackground": "#XXXXXXXX", // 他のマッチの背景色 ※8桁で透明度指定可
"editor.findMatchBorder": "#XXXXXX", // 現在のマッチの枠線
"searchEditor.findMatchBackground": "#XXXXXXXX", // 検索エディタでのマッチ背景 ※8桁で透明度指定可
// ============================================
// Git装飾（エクスプローラーのファイル名の色）
// ============================================
"gitDecoration.addedResourceForeground": "#XXXXXX", // 新規追加ファイル
"gitDecoration.modifiedResourceForeground": "#XXXXXX", // 変更ファイル
"gitDecoration.deletedResourceForeground": "#XXXXXX", // 削除ファイル
"gitDecoration.untrackedResourceForeground": "#XXXXXX", // 未追跡ファイル
"gitDecoration.conflictingResourceForeground": "#XXXXXX", // コンフリクトファイル
// ============================================
// エラー・警告（コード内の波線表示）
// ============================================
"editorError.foreground": "#XXXXXX", // エラーの波線
"editorWarning.foreground": "#XXXXXX", // 警告の波線
"editorInfo.foreground": "#XXXXXX", // 情報の波線
// ============================================
// その他
// ============================================
"focusBorder": "#XXXXXX", // フォーカス時の枠線（全般）
"progressBar.background": "#XXXXXX" // プログレスバーの色
}
}