웹개발/IDE

[VS Code] 비주얼 스튜디오 코드 라이트/다크 테마 10종 추천!

donsohn 2023. 2. 6. 23:16

저는 개발 IDE로 비주얼 스튜디오 코드(Visual Studio Code, 이하 VS Code)를 사용합니다.

매우 다양한 개발 환경을 제공할 뿐만 아니라 매우 강력한 확장 기능들을 제공하며 어떤 개발을 하더라도 유연하게 진행을 할 수 있기 때문이죠.

또 무시할 수 없는 가장 큰 이유중에 하나가 바로 다양하고도 훌륭한 '커스텀 테마'를 제공한다는 것입니다.

 

개발자들마다 각자 선호하는 테마와 컬러셋이 모두 다릅니다. 어떤 분들은 라이트 모드를 선호하고, 또 어떤 분들은 다크 모드를 선호합니다.

저같은 경우는 그 때 그 때 기분에 따라, 혹은 눈의 피로도에 따라 테마를 전환해 가며 사용하는 편입니다.

오늘 소개해 드릴 테마는 라이트 모드 추천 테마 10개와 다크 모드 추천 테마 10개입니다.

 

추천해 드리는 테마는 공식적으로 추천된 테마가 아니고, 지극히 제 기준에 부합하는 테마임을 참고해 주시면 감사하겠습니다.

그렇다면 제 기준에 만족스러운 테마는 무엇일까요?

 

크게 튀는 요소 없이,
가독성이 좋고 눈이 편안하며

구분하기 좋은, 산뜻한 테마

 

그렇습니다.

그럼 제 기준에 굉장히 만족스러웠던 테마를 소개시켜 드릴게요.

 

라이트 모드 테마

1. Atom One Light

Atom One Light

 

이 테마는 기본적으로 배경이 완전히 하얗지 않습니다.

가벼운 회색 톤의 배경으로, 넓은 면적의 화면을 봤을 때 눈이 부시거나 부담스럽지 않습니다.

매우 무난하면서도 요소간 구분이 아주 확실해서 굉장히 좋아하는 테마입니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight 

 

Atom One Light Theme - Visual Studio Marketplace

Extension for Visual Studio Code - One Light Theme based on Atom

marketplace.visualstudio.com

 

2. Github Light

Github Light

 

요즘은 깃을 사용하지 않는 분들이 거의 없다시피 합니다.

특히나 깃허브는 하루에도 수십 번씩 들어갈 정도로 익숙하고 또 친숙하죠.

깃허브에서 소스를 볼 때 바로 그 색감 조합으로 구성되어 있어서 눈에 익고 코드 구분도 잘 되어서 매우 좋습니다.

설치하시면 다크 모드 테마도 함께 설치됩니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme 

 

GitHub Theme - Visual Studio Marketplace

Extension for Visual Studio Code - GitHub theme for VS Code

marketplace.visualstudio.com

 

3. Brackets Light Pro

Bracket Lights Pro

 

차분한 회색 톤의 배경으로 구성되고 강조되는 텍스트들이 높은 채도를 가지고 있는 항목이 거의 없습니다.

코드, 속성 간 구분이 명확하게 잘 되고 색상 조합 자체가 굉장히 예뻐서 현재도 주력으로 사용하고 있는 테마입니다.

호불호가 거의 갈리지 않을 듯한 테마네요.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=fehey.brackets-light-pro 

 

Brackets Light Pro - Visual Studio Marketplace

Extension for Visual Studio Code - A theme basic Brackets Light and more beautiful.

marketplace.visualstudio.com

 

4. Light+ V2

Light+ V2

 

VS Code가 업데이트되면서 새롭게 추가된 테마입니다.

기본적으로 내장되어 있는 Default Light+와 마찬가지로 VS Code 내에 기본 탑재되는 테마로 정말 근본에 가까운 색 조합을 보여줍니다.

일부 속성이 조금 튀는듯한 느낌을 줄 수 있을법도 하지만 그 조화가 매우 잘 어울립니다.

현재 세팅된 테마가 질릴 때 가끔 사용하고 있네요.

 

VS Code 설정 내에 보시면 있으며, 없으실 경우 최신 버전으로 업데이트하시면 됩니다.

 

5. Night Owl Light

Night Owl

 

총 다운로드 횟수 180만 회 이상에 평점은 4.9/5 일 정도로 호평이 많고 유명한 테마입니다.

총 4가지의 색상 설정을 제공하고 있으며 기본 색상 구성은 다크 모드입니다. 저는 다크모드보다는 라이트 모드가 좋았습니다.

차분한 회색 배경에 튀지 않고 편안한 문법 강조 색상 구성으로 편안한 코딩이 가능하게 해 줍니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=sdras.night-owl 

 

Night Owl - Visual Studio Marketplace

Extension for Visual Studio Code - A VS Code theme for the night owls out there. Now introducing Light Owl theme for daytime usage. Decisions were based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨

marketplace.visualstudio.com

 

6. Quiet Light for VSC

Quiet Light for VSC

 

이 테마는 다른 라이트테마와는 다르게 조금 더 어두운 배경 색상이 적용됩니다.

덕분에 라이트 모드임에도 불구하고 눈이 부담된다는 느낌이 거의 들지 않습니다.

전체적인 문법 강조 색상은 무난한 편이나 일부 속성의 경우 뚜렷하게 보이지 않을 수 있는 부분은 호불호가 갈리겠네요.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=onecrayon.theme-quietlight-vsc 

 

Quiet Light for VSC - Visual Studio Marketplace

Extension for Visual Studio Code - Light, peaceful coding (from the original designer).

marketplace.visualstudio.com

 

7. Bluloco Light

Bluloco Light

 

이 테마 또한 차분한 회색 계열 배경이 적용되어 있어서 부담이 적습니다.

그리고 각 속성 간에 구분이 매우 뚜렷하고 확실해서 좋았습니다. 눈에 크게 거슬리는 강조 색상은 아직 찾지 못했습니다.

다만 형광 계열에 가까운 문법 강조 색상이 아주 가끔 있어서 낮은 채도만을 선호하시는 분들은 큰 매력을 느끼지 못하실 수도

있을 것 같습니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=uloco.theme-bluloco-light 

 

8. Github Plus Theme

Github Plus Theme

 

이 테마도 깃허브의 색상 조합을 컨셉으로 만들어진 테마입니다.

앞서 소개해 드렸던 Github Light 테마와 많이 비슷한 것 같지만서도 미묘하게 코드 색상 조합이 다릅니다.

그리고 이 테마는 에디터 자체의 UI 컬러도 부분적으로 변경되며, 저는 개인적으로 이러한 부분들이 굉장히 마음에 들었습니다.

Brackets Light Pro 다음으로 많이 사용했던 테마입니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=thenikso.github-plus-theme

 

GitHub Plus Theme - Visual Studio Marketplace

Extension for Visual Studio Code - A GitHub inspired color theme for VSCode code and interface!

marketplace.visualstudio.com

 

9. Slack Theme

Slack Theme

 

많은 기관, 기업에서 협업 툴로 사용하는 슬랙의 컬러 구성을 참고하여 제작된 테마입니다.

이 테마도 색상 조합이 매우 괜찮고 코드 구분이 아주 잘 되는 편이라 만족스럽게 사용하실 수 있을 것 같습니다.

총 11가지의 색상 설정을 제공하며, 각 설정에 따라 에디터의 UI 색상 조합도 함께 변경된다는 점이 상당히 매력적입니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=felipe-mendes.slack-theme 

 

Slack Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Color scheme inspired by Slack's default themes

marketplace.visualstudio.com

 

10. Primer Light

Primer Light

 

무난하고 깔끔한 배색의 테마입니다. 전체적으로 깔끔하고 차분한 색상으로 이루어져 있습니다.

부담없이 사용하기에 좋을 것 같습니다. 그리고 오히려 튀는 색상이 많이 없어서 오래 질리지 않고 사용하기에도 좋을 듯 하네요.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=andrewmarkle.primer-light

 

Primer Light - Visual Studio Marketplace

Extension for Visual Studio Code - This is a port of the primer light theme from sublime text.

marketplace.visualstudio.com

 

다크 모드 테마

1. ReUI II

ReUI II

 

총 10개의 색상 구성을 지원하는 다크 모드 테마입니다.

각 색상 모드마다 배경 색상, UI 색상 조합이 달라지기에 취향에 맞게 사용하시기에 좋을 것 같습니다.

전체적인 색 조합은 무난, 편안 스타일입니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=barrsan.reui 

 

ReUI - Visual Studio Marketplace

Extension for Visual Studio Code - A VS Code theme based on React's website colors

marketplace.visualstudio.com

 

2. Github Dark

Githud Dark

 

라이트 모드에서 소개해 드렸었던 깃허브 테마의 다크 버전입니다.

코드 구분히 매우 잘 되고 색상 조합이 상당히 강렬할 수는 있으나 생각보다 눈의 피로도는 높지 않았습니다.

또한 오랫동안 질리지 않고 사용할만한 '근본' 테마로서도 충분합니다.

설치하시면 라이트 모드 테마도 함께 설치됩니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme 

 

GitHub Theme - Visual Studio Marketplace

Extension for Visual Studio Code - GitHub theme for VS Code

marketplace.visualstudio.com

 

3. One Dark Pro

One Dark Pro

 

총 4개의 색상 설정을 지원하여 취향에 따라 배경 색상 톤을 바꾸면서 사용하실 수 있습니다.

색상 조합이 흡사 Material Theme 같아서, 코드 구분도 매우 잘 되고 눈이 편안한 구성이라고 보여집니다.

심지어 다운로드 횟수가 무려 680만 회가 넘을 정도로 유명하고 많이 사용되는 만큼, 절대 실패 없는 테마일 가능성이 매우 높다고 생각하시면 편할 것 같습니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme 

 

One Dark Pro - Visual Studio Marketplace

Extension for Visual Studio Code - Atom‘s iconic One Dark theme for Visual Studio Code

marketplace.visualstudio.com

 

5. Palenight Theme

Palenight Theme

 

완전히 검은 배경색이 아닌, 검정보다는 연하면서 일반적인 회색보단 진한, 블루 계열의 배경색이 굉장히 좋은 느낌으로 다가왔던 테마입니다.

색상의 조합은 대부분 무난하나 마치 키보드의 일부 포인트 키캡이나, 레고 블럭이 생각나는 톡톡 튀는 색상이 몇몇 있습니다.

그런데 이 튀는 색상이 매우 매력적입니다. 보기 싫은, 눈이 불편한 쨍한 강조색상의 느낌이 아니라 매력이 터지는 그런 느낌이랄까요.

아무튼 좋습니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme 

 

Palenight Theme - Visual Studio Marketplace

Extension for Visual Studio Code - An elegant and juicy material-inspired theme for Visual Studio Code.

marketplace.visualstudio.com

 

6. Monokai

근-본 그 잡채, Monokai

 

한 때 세계룰이였던 근본 테마, 모노카이입니다.

이 테마는 아직도 현업에서 굉장히 많이 사용될 정도로, 그리고 이상하리만큼 저 오리지널 모노카이가 아니면 절대 사용하지 않는 철학을 가지는 분들이 상당히 존재할 정도로 근본인 테마입니다.

일단 사용해 보세요. 쨍하지만 코드 구분과 가독성만큼은 타의 추종을 불허하니까요.

VS Code 에서 기본적으로 제공합니다.

 

7. Monokai Pro

Monokai Pro

 

그 위대한 근본 테마 모노카이를 조금 더 고급스럽고 세련되게 다듬은 테마 같습니다.

총 5개의 색상 구성을 지원하는데, 배경 색상이 변경되는 것으로 보입니다. 취향에 따라 사용하시면 될 것 같습니다.

모노카이가 어떻게 보면 확실히 쨍한 감이 없지 않아 있는데, 이런 부분을 보완해서 보다 눈이 더 편해지도록 했네요.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode 

 

Monokai Pro - Visual Studio Marketplace

Extension for Visual Studio Code - Professional theme and matching icons, from the author of the original Monokai color scheme.

marketplace.visualstudio.com

 

8. Dark+ V2

Dark+ V2

 

앞서 라이트 모드 테마들 중 소개드렸던 Light+ V2의 다크 모드 버전입니다.

최신 버전의 VS Code에 기본 탑재되어 있는 녀석으로, 현재 (2023년 2월 6일) 기준으로는 Dark+ V2(실험적) 이라고 쓰여 있네요.

무난하고 깔끔한 색상 조합으로 보기에 편하고 많은 분들께 사랑받을 것 같습니다.

 

9. Eva Dark

Eva Dark

 

라이트 모드를 포함해 총 6개의 색상 구성을 제공하는데, 색상 자체가 달라지는 건 아니고 Bold, Italic 조절입니다.

텍스트 스타일을 취향에 맞게 사용하시면 될 것 같습니다.

전반적으로 무난하고 깔끔한 색상 조합으로, 정말 무난하고 눈이 편하게 오래오래 사용하기 좋은 테마네요.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=fisheva.eva-theme 

 

Eva Theme - Visual Studio Marketplace

Extension for Visual Studio Code - A comfortable and semantic theme.

marketplace.visualstudio.com

 

10. Kanagawa

Kanagawa

 

생각보다 굉장히 신선한 색상 조합이라 깜짝 놀랐던 테마입니다.

여태까지 봐왔던 다크 테마는 개인적으로 호불호가 너무 심한 테마들이 많았고, 혹은 너무 눈에 익숙해서 빨리 질렸던 테마들이 많았거든요.

이 테마는 배경 색상부터 색상 조합까지 편안함은 기본이고 적당한 구분감과 흔히 보이지 않았던 신선한 색상 조합을 선사해 줍니다.

 

다운로드 링크 : https://marketplace.visualstudio.com/items?itemName=qufiwefefwoyn.kanagawa 

 

Kanagawa - Visual Studio Marketplace

Extension for Visual Studio Code - Port of the Kanagawa.nvim - dark theme inspired by the colors of the famous painting by Katsushika Hokusai.

marketplace.visualstudio.com

 

이상으로 비주얼 스튜디오 코드의 라이트/다크 테마를 각각 10개씩 소개해 드렸습니다.

앞서 설명드린 것처럼 절대적인 순위를 매긴 것이 아니고, 지극히 개인적인 관점에서 상당히 만족도가 높았던 것들만 추려서 소개해 드린 것이다보니, 분명히 호불호는 갈릴 수는 있는 점은 꼭 참고해 주시면 좋겠습니다.

제가 추천해드린 테마들 중에서 만족스럽게 사용하실 수 있는 것들이 많았으면 좋겠네요.