# 만들기 전
VSCode 시작하면서 눈에 익숙한 테마를 찾다가 발견한 부분입니다. VSCode는 자신만의 테마를 만들고 공유할 수 있다는 생각에 하나 나도 만들어 볼까 싶어 만들다가 하루를 그냥 이 테마만 만들었네요. 일도 하랴 이것 만들랴 참 바쁜 하루였네요.
참 입맛에 맞는 테마 찾기란 쉽지가 않은 군요.
# 만들기 시작
저는 얼마 전까지만 해도 Atom을 사용했습니다. 지금도 VSCode보다는 Atom이 익숙하게 느껴질 정도로 아직도 VSCode가 어색하군요. 그래서 VSCode를 Atom같은 테마로 만들어 사용하려고 이렇게 만들기 시작했습니다.
우선 Themes, Snippets and Colorizers에 들어가서 하나하나 해보기로 했지만, 영어의 울렁증으로 고생(?) 좀 했네요. 이렇게 고생한 김에 이 글을 적어 보기로 했습니다.’라고 이야기하지만 저는 구글 해석으로 해도 무슨 말인지 도통 모르겠고요.
제가 하는 방법으로 해 보기로 했습니다.
# 새로운 테마 추가하기 Adding a new Theme
새로운 버전이 업데이트되면서 쉽게 할 수 있는 방법이 나왔더군요. 자세한 것은 April 2017 (version 1.12)으로 읽다가 보면 vscode-theme-generator라는 말이 나옵니다. 무엇이냐 하면 새롭게 .tmtheme파일이 아닌 tmtheme.json파일로 한다는 이야기입니다. 빠른 설치를 위해 링크도 있네요. vscode-theme-generator-quick-start에 가시면 됩니다.
1. 먼저 Node.js가 설치가 되어야 한다는 군요.
- Node.js 가서 가볍게 설치를 해 줍니다.
2. 설치가 끝나면 Ctrl , `를 눌러
1 | npm install |
을 해 줍니다. (일단 합니다.)
3. 위의 vscode-theme-generator-quick-start에 가셔서 다운로드 하고 압축을 풉니다.
4. 압축을 풀면 vscode-theme-generator-quick-start-master로 되어 있을 것입니다. 여기서 -master을 지워 줍니다.
아예 다른 이름으로 변경해도 됩니다.
5. 전 아예 VSCode-theme-OneDark-plus-S라고 이름 지었습니다.
6. theme.json을 innks-aodp-theme.json로 변경 했습니다.
7. edit를 열어 이제 하나하나 바꿔가며 색을 비교하고 저장하고 반복 합니다.
물론 매번 다시시작을 반복해야 합니다.
8. 다 끝이 나면 기타 파일 부분 적용하기
- README.md : 클릭시 처음 화면 입니다.
- package.json : 기타 버전과 변수 값입니다.
- CHANGELOG.md : 업데이트 내역입니다.
# 적용하기 Install an extension
# 제가 만든것 다운로드 하기
VSCode-theme-OneDark-plus-S v0.0.3 다운로드하러 가기
1. 다운된 Zip파일을 압축을 적당한 곳에 풀어 줍니다. 그후 폴더 뒤에 -master을 지워 줍니다.
2. 압축을 푼 VSCode-theme-OneDark-plus-S폴더를 VScode Extensions 폴더 에 넣고 VSCode를 다시 시작 하시고 색테마를 변경 하면 됩니다.
- VScode Extensions 폴더 : %USERPROFILE%.vscode\extensions
- 예) C:\Users\유저명\.vscode\extensions
- 색 테마 변경 : 파일(F) > 기본 설정(P) > 색 테마(C) 에서 만든
Atom-OneDark + S를 선택 하시면 됩니다.
# View Test
하루 종일 했는데 결실이 별로 나질 않는군요. :(