환경

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 모드


삽입 모드 문자가 보이지 않습니다 ...


비주얼 모드처럼 보이지 않습니다 ...


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의 색을 변화시킬 수있었습니다.

삽입 모드


Visual 모드


Replace 모드


공식적인 방법이 아닐 가능성이 높기 때문에, 더 좋은 방법이 있으면 꼭 가르쳐 주세요!