SynthWave '84란?

안녕하세요, 이번 포스팅에서는 vscode extensions에서 인기 있는 테마를 소개하려 합니다.

또한 SynthWave '84에서 제공하는 enable neon dreams 기능을 사용하려는데 어려움이 있으신 분들께 해당 가이드 라인을 안내해 드립니다.

코드 중간에 글로우 효과가 가능한 것이 enable neon dreams의 기능입니다. OS마다 적용 방법이 각기 다르지만 크게 어렵지 않습니다.
참고로 해당 적용 방법은 MacOS 기준임을 미리 말씀드립니다.

🎨준비할 것들

해당 기능을 사용하기 위해선 준비할 것들이 몇 가지 있습니다.
먼저, SynthWave '84설치를 해 주시고,Custom CSS ans JS를 설치합니다. 다음으로 아래 링크를 따라 들어가시면 synthwave.css파일이 있는데 그 안에 내용을 긁어오고 우리 파일을 import 할 수 있는 위치를 지정하셔야 합니다.
같은 이름으로 파일을 하나 생성 하시겠습니다.

• 링크: https://github.com/robb0wen/synthwave-vscode
  

  

  적용하셨다면 settings.json을 열어서 아래 코드 한 줄을 부여합니다.
  "vscode_custom_css.imports":["synthwave84.css 저장하신 위치"] 를 작성해 보세요.

  
  이후 custom CSS and JS를 활성화 시킨 다음, theme color 또한 Synthwave 84로 바꾸시고 Enable neon dreams기능을 적용시키면 됩니다.

  ⛔️ 에러 해결방법

  ---

Running the contributed command:'extension.installCustomCSS' failed.

해당 에러 메세지 관련해서는 기본적으로 파일 엑세스를 위한 관리자 권한을 부여해야 합니다. 이를 적용시키기 위해서는 sudo 를 붙여줍니다.
파일 엑세스 관련해서 관리자 권한을 부여해주는 유용한 키워드입니다.

명령어 입력 시 내 파일의 위치를 도저히 모르겠다 하시는 분들을 해당 파일을 터미널 창에 Dropdown 해 보세요.
또한, 터미널 유형마다 명령어가 적용되지 않는 예외도 있을 수 있습니다.
zsh 접근이 불가하시다면 bash에서 적용해 보시면 가능하실 겁니다.

출처:

• https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
• https://github.com/robb0wen/synthwave-vscode
• https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css