vscode vim でvim-airline っぽくモード毎にstatusbar の色を変える

環境

• vscode 1.41.1
• vscodevim 1.12.0
• vscode theme Icebarg
• macOS Mojave 10.14.

目標

vscode でvim-airline 風にモード毎にstatusbar の色を変えたい

こんな風に↓

詰まったところ

vscode のtheme を設定後、settings.json でstatusbar の色を指定したが背景色しか反映されなかった

Normalモード

Insertモード 文字が見ずらい...

Visualモード 同じく見ずらい...

Replaceモード これは嫌だ...

方法

vscode vim はとても親切でデフォルトでEmulated Plugins でvim-airline 風にモード毎にstatusbar の色を変える事ができます。

settings.json

コマンドパレット開く(⌘P) > settings.json 検索 > settings.json に下記を記述

背景色と文字色の指定は私が大好きなtheme のIcebarg に合わせていますのでお好みでどうぞ！

settings.json

{
  "vim.statusBarColorControl": true,
  "vim.statusBarColors.normal": ["#161821", "#818596"],
  "vim.statusBarColors.insert": ["#84A0C6", "#161821"],
  "vim.statusBarColors.visual": ["#B4BE82", "#161821"],
  "vim.statusBarColors.visualline": ["#B4BE82", "#161821"],
  "vim.statusBarColors.visualblock": ["#B4BE82", "#161821"],
  "vim.statusBarColors.replace": ["#E2A478", "#161821"],
  "vim.statusBarColors.commandlineinprogress": ["#818596", "#161821"],
  "vim.statusBarColors.searchinprogressmode": ["#818596", "#161821"],
  "vim.statusBarColors.easymotionmode": ["#818596", "#161821"],
  "vim.statusBarColors.easymotioninputmode": ["#818596", "#161821"],
  "vim.statusBarColors.surroundinputmode": ["#818596", "#161821"],
}

theme のstatusbar の文字色指定を無効にする

私の環境では上記のsettings.json の設定ではなぜか背景色しか変わらず、文字色が変わりませんでした。
試しにtheme をデフォルトに戻したところ、上手く背景色、文字色共に変化したのでtheme の文字色指定のみ無効にしました。

Users/user_name/⁨.vscode/⁨extensions⁩/⁨cocopon.iceberg-theme-1.0.1/themes/icebarg.color-theme.json を修正し無効化します。
コメントアウト、もしくは削除してください。

Users/user_name/⁨.vscode/⁨extensions⁩/⁨cocopon.iceberg-theme-1.0.1/themes/icebarg.color-theme.json

.
.
"statusBar.background": "#0f1117",
"statusBar.debuggingBackground": "#242940",
"statusBar.debuggingForeground": "#6b7089", <- ココ
"statusBar.foreground": "#6b7089", <- ココ
"statusBar.noFolderBackground": "#0f1117",
"statusBar.noFolderForeground": "#6b7089", <- ココ
"statusBarItem.hoverBackground": "#6b708920",
.    
.

上記の設定に変更後、settings.json のstatusbar の文字色指定が効くようになるはずです。

注意点.1

settings.json を開いた状態だと挙動がおかしくなるので設定を確認する際には一度settings.json を閉じて確認してください。
これで私はかなりハマりました。

注意点.2

vscode のtheme の仕様なのか分かりませんがsettings.json にworkbench.colorCustomizations という設定が自動生成されます。
何度削除してもコメントアウトしても復活してきます笑

settings.json

"workbench.colorCustomizations": {
"statusBar.background": "#B4BE82",
"statusBar.noFolderBackground": "#B4BE82",
"statusBar.debuggingBackground": "#B4BE82",
"statusBar.foreground": "#161821"

ちなみにモードを切り替えるとココのカラーコードも自動で変化します。
原因は分かりませんが、とりあえず無視して大丈夫だと思います。

まとめ

かなり強引な方法ですがvim-airline 風にstatusbar の色を変化させる事ができました。

Insertモード

Visualモード

Replaceモード

正式な方法じゃない可能性が高いので、もっと良い方法があれば是非教えてください！