테메 r. 에서 v 을 사용하면,
브라우저에서 편집기, 터미널, etc 도구에서 사용할 수 있는 컬러 테마를 쉽게 만들 수 있습니다.

Best of Javascript의 Growing fast this week(주당 스타 수 랭킹)에서 1위를 차지했습니다.
( @ryuta69 씨 정보 제공해 주셔서 감사합니다)

할 수 있는 일

GUI로 색상을 확인하면서 스키마를 만들 수 있습니다

컬러 피커를 사용할 수 있습니다

shade의 중간색을 자동으로 계산할 수 있다

다수의 툴에 대응하고 있어 형식을 맞춘 설정 파일을 출력할 수 있다

만든 테마를 URL로 쉽게 공유할 수 있습니다

만드는 방법

시험에 Vim의 컬러 테마를 만들어 보았습니다.

소개, shade의 0~7, accent의 0~7의 색을 선택합니다:의 오른쪽에 컬러 코드를 입력하면 즉시 UI에 색상이 반영됩니다.



Dark・Light 모드의 전환도 가능합니다caluculate intermediary shades 를 체크하면
shade1~6에 중간색을 자동으로 넣어줍니다

accent·shade는 각각의 다음과 같은 위치가 되어 있습니다
(Github 리포지토리 README 참조 htps : // 기주 b. 코 m / mj 센센 / 테메 r)


Color Key
Typical Usage


accent0
error, VCS deletion

accent1
syntax

accent2
warning, VCS modification

accent3
success, VCS addition

accent4
syntax

accent5
syntax

accent6
syntax, caret/cursor

accent7
syntax, special

shade0
배경색

shade1
UI

shade2
UI, text selection

shade3
UI, code comments

shade4
UI

shade5
UI

shade6
foreground text

shade7
foreground text


오른쪽 방울 아이콘에서 색상 선택기를 사용할 수도 있습니다.



색상을 설정하면 URL에 매개 변수가 추가됩니다.
URL에 편집 정보가 모두 들어 있기 때문에, 편집의 저장·공유를 URL로 간단하게 할 수 버립니다

이번에 만든 테마의 URL입니다.
https://themer.dev/?activeColorSet=dark&colors.dark.shade0=%23121212&colors.dark.shade7=%23868ea2&colors.dark.accent0=%23ffff00&colors.dark.accent1=%23d7ffff&colors accent3=%2380ffff&colors.dark.accent4=%230087af&colors.dark.accent5=%2388bff7&colors.dark.accent6=%23005faf&colors.dark.accent7=%23afffff

미리보기에서 실제 코드와 터미널의 UI를 보는 방법을 확인할 수 있습니다.


Download에서 지정 툴에 체크 박스를 붙여 설정 파일을 다운로드 할 수 있습니다

여러가지

Vim에만 체크를 했을 경우, 다운로드한 디렉토리는 다음과 같은 구성이었습니다.

themer 디렉토리

.
├── README.md
├── Vim
│   └── ThemerVim.vim
└── colors.js

README.md 에 쓰여진 대로, .vim 안에 colors 를 만들고 거기에 ThemerVim.vim 를 배치했습니다
Vim의 경우 파일 이름을 바꾸면 테마 이름도 바뀝니다.

그리고는 .vimrc 에 칼라 스키마의 설정을 쓰면 Vim의 색이 바뀝니다

colorscheme ThemerVim

원래 컬러 스키마를 쉽게 만들 수있었습니다.

요약

thermer.dev를 사용하면 매우 쉽게 오리지널 에디터 컬러 테마를 만들 수있었습니다.
대응 툴도 많기 때문에, 여러분 꼭 시험해 보세요

만든 Vim의 컬러 스키마