How can I change sidebar hover color in VScode / VScode sidebar 좌측에 선택된 color를 조정하는 방법

안녕하세요? 오늘은 VScode에서 좌측에 파일들의 리스트를 보여주는 파일 트리에서, 현재 점유하고 있는 파일들을 좌측에서 표시해 주는 색깔에 불편함을 느껴서 그 색깔을 커스텀 할 수 없을까라는 생각이 문득 들어서 찾아봤는데 역시 있더라고요. (이런 툴을 만드셔서 공짜로 뿌려주고 계신 마소 형님들께 감사를...)

 

그래서 좌측의 사이드 바에서 신경 쓰이는 부분들에 대해서 색깔을 변경하는 방법에 대해서 포스팅해볼까 해요.

아시겠지만 제가 이야기하는 사이드바는 아래 스크린샷에 해당하는 파일을 선택할 수 있는 영역입니다.

​

1. Mouse를 hover 했을 때의 background color 와 foreground color

지금 아래 화면에 보이시는 것처럼 background는 핑크색으로, foreground는 빨간색으로 꾸미게 되었는데요.

추신. 이유는 잘 모르겠지만 파일에서 글자 이외가 차지하는 영역을 background로, 글자의 영역을 foreground로 지정하고 있더라고요. 게다가 이 색깔은 git에서 파일 변화를 감지해서 색깔을 표시해 주기 때문에 반드시 지정한 색으로 보여준다고 하는 보장이 안 되는 것 같습니다.

즉, intelliJ를 예로 들면 git 설정을 해놓으면 자신이 변화시킨 파일들이 색깔이 변하잖아요? 그것과 같은 맥락이라고봐주시면 될 것 같습니다.

위 사진에서는 저의 mouse가 보이지 않지만, 파일을 누르기 전 마우스로 점유하고 있는 상태예요.

그러면 이놈의 색깔을 어떻게 바꿀까요?

​

우선 자세한 설정을 하기 전에 아래와 같은 절차를 밟아주셔야 합니다.

​

1-(1).File > Preferences > Settings로 들어갑니다.

1-(2).그 후 입력창에 아래와 같이 입력합니다.

colorCustomizations

1-(3).그 후, 세 번째에 있는 workbench: Color Customizations를 클릭합니다. 그러면 아래와 같은 json 파일이 나올 텐데요. 우리가 수정할 영역은 아래 영억입니다.

"workbench.colorCustomizations": {
..... ~ .....
}

 

이 영역입니다.

​

이곳에서 앞서 언급한 mouse를 hover 했을 때의 background와 foreground color를 조정하려면 아래와 같은 값을 넣어주시면 됩니다.

////

        "list.hoverBackground": "#FBCFD0",
        "list.hoverForeground": "#ff0000",

이것만 고치실 분들은 여기에서 포스팅 그만 보셔도 됩니다.

위에 값들을 고쳐주면 아래와 같이 hover 하는 순간에 파일에 hover 됩니다.

​

​

2. 사용자가 직접 mouse로 파일이나 디렉토리를 누르지 않았을 때의 background color와 foreground color

직접 파일을 누르지 않으면 어떻게 파일을 자동으로 focusing 해주는 건데?

​

하고 의문이 생기실 수도 있는데요.

​

파일을 수정하면 보통 좌측의 sidebar에 자신이 수정하고 있는 file에 포커싱이 되잖아요?

바로 그때 좌측에 자동으로 선택되는 색깔을 조정하려 하는 것입니다.

​

전체적인 디렉토리 구조 파악할 때 유용합니다.

저도 이 색깔을 지정하기를 가장 원했거든요.

​

1번에서 열어 놓으신 json 파일에서 hoverBackground를 지정해놓으신 바로 아랫줄에

 

"list.inactiveSelectionBackground": "#ff0000",
"list.inactiveSelectionForeground": "#ffffff",

이 값을 넣어주시면 됩니다.

​

이 값을 넣어주시면, 파일을 수정할 때 좌측의 sidebar에 색깔이 적용돼서 금방 눈치챌 수 있습니다.

​

이러면 한눈에 자신의 디렉토리에서 -> 어느 파일을 수정하고 있는지 알 수가 있습니다....!

효과는 굉장했습니다.

​

도움받은 stackoverflow 링크 걸어둘게요.

감사합니다.

https://stackoverflow.com/a/45814544