themer
v6.0.0
themer 일련의 색상을 취하고 편집기 테마, 터미널 테마, 다른 앱의 테마 및 데스크탑 월페이퍼를 생성합니다.
ColorSet 만듭니다Template 만듭니다themer 지원하십시오 themer 로 개발 설정을 레벨 올리는 몇 가지 방법이 있습니다.
themer Themer.dev에있는 공식 프로그레시브 웹 앱을 보유하고 있습니다.themer CLI에서 테마를 생성하는 데 사용될 수 있습니다. 아래 CLI 문서를 참조하십시오.themer 프로그래밍 방식 사용을 위해 JavaScript API (TypeScript 유형 정의가 완료)를 노출시킵니다. 아래 API 문서를 참조하십시오.기능 비교 :
| 웹 UI | CLI/API | |
|---|---|---|
| 인스턴트 미리보기 | ✅ | |
| 프리미엄 컬러 세트 | ✅ | |
| 지원되는 색상 형식 | 모든 CSS 형식 | 16 진수 |
| 벽지 출력 형식 | PNG + SVG | SVG 만 |
| 원활한 도트 파일 통합 | ✅ |
V5 기간 동안 themer 사용하기 쉽기 위해 모든 내장 색상 세트 및 템플릿이 포함 된 단일 타입 스크립트/JavaScript 패키지로 배포되지만 여전히 사용자 정의 색상 세트 또는 템플릿 사용을 지원합니다.
선택한 JavaScript 패키지 관리자와 함께 NPM에서 themer 설치하십시오.
npm install themer themer 전 세계적으로 설치할 수도 있습니다. 또는 전혀 설치하지 않으려면 npx 와 함께 사용할 수 있습니다.
themer [options] themer 하나 이상의 컬러 세트, 원하는만큼 많은 템플릿, 원하는만큼의 벽지 해상도 및 출력 디렉토리를 전달하십시오.
| 옵션 | 설명 | 기본값 | 사용 가능한 옵션 |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | 렌더링 할 색상 세트 | default | 색상 세트 이름 또는 사용자 정의 색상 세트가 포함 된 JS 파일 또는 Base16 Yaml 파일의 파일 경로 |
-t, --template <built-in template name or file path...> | 테마 템플릿 렌더링 | * (모든 내장 템플릿) | 템플릿 이름 또는 사용자 정의 템플릿이 포함 된 JS 파일로의 경로 |
-s, --size <wallpaper resolution...> | [너비] x [높이] 형식으로 픽셀로 렌더링하는 해상도 | 2880x1800 | 어느 |
-o, --output <path> | 출력 디렉토리 | themer-output | 어느 |
--color-set , --template 및 --size 여러 번 지정 될 수 있습니다.
생성 된 테마 파일과 설치 방법에 대한 readme은 출력 디렉토리에 기록됩니다.
themer 의 기본 색상 세트를 사용하여 VIM 테마 및 데스크탑 배경을 생성하고 싶다고 가정 해 봅시다. 먼저 themer : 설치 :
cd my-dotfiles
npm install themer 그런 다음 package.json 편집합니다.
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}그런 다음 새 스크립트를 실행하십시오.
npm run build 이제 생성 된 파일의 gen/ 폴더를 확인하십시오. 결과는 다음과 같습니다.
이 명령은 themer 의 기본 색상 세트를 사용하여 VIM 테마와 블록 웨이브 벽지를 생성하고 output 이라는 폴더에 넣습니다.
npx themer -c default -t vim -t wallpaper-block-wave -o output Temer Color 세트 대신 themer 에게 Base16 Scheme Yaml 파일을 제공 할 수도 있습니다.
themer --color-set path/to/base16-scheme.yml ...
Base16 체계 목록은 Base16 저장소를 참조하십시오.
themer 프로그래밍 방식으로 테마를 생성하는 데 사용하기 위해 JavaScript API (TypeScript 유형 정의 포함)를 제공합니다.
npm install themer themer 의 기본 내보내기는 세 가지 인수를 취하는 비동기 생성기 함수입니다.
ColorSet 객체 배열 또는 themer 의 내장 색상 세트의 문자열 식별자Template 객체 또는 themer 의 내장 템플릿의 문자열 식별자 배열RenderOptions 객체OutputFileTransform Async Generator 함수. 이 함수는 각 템플릿의 render 과 renderInstructions 함수 사이에서 실행됩니다. 발전기에 의해 생성 된 물체는 OutputFile s 또는 OutputFileTransform 에 의해 생성 된 유형입니다.
import themer from "themer" ;
import myColors from "./my-colors" ;
import myTemplate from "./my-template" ;
// Example usage: generate Vim themes, 1440x900 wallpapers, and custom files
// from themer's "Night Sky" color set and a custom color set.
const files = themer (
[ "night-sky" , myColors ] ,
[ "vim" , "wallpaper-block-wave" , myTemplate ] ,
{ wallpaperSizes : [ { width : 1440 , height : 900 } ] }
) ;
for await ( const file of files ) {
// ...
}ColorSet 만듭니다 import type { ColorSet } from "themer" ;
const myColorSet : ColorSet = {
// Color sets should provide a human-readable name.
name : "My Color Set" ,
// Color sets can define a dark variant, a light variant, or both.
// Each variant provides two or eight shades and eight accent colors in hex format.
variants : {
// In a dark variant, shade0 should be the darkest and shade7 should be
// the lightest.
dark : {
shade0 : "#333333" ,
// Note: you can define shades 1 through 6 yourself, or you can omit
// them; if omitted, they will be calculated automatically by
// interpolating between shade0 and shade7.
shade7 : "#eeeeee" ,
accent0 : "#ff4050" ,
accent1 : "#f28144" ,
accent2 : "#ffd24a" ,
accent3 : "#a4cc35" ,
accent4 : "#26c99e" ,
accent5 : "#66bfff" ,
accent6 : "#cc78fa" ,
accent7 : "#f553bf" ,
} ,
// In a light variant, shade7 should be the darkest and shade0 should be
// the lightest.
light : {
shade0 : "#eeeeee" ,
shade7 : "#333333" ,
accent0 : "#f03e4d" ,
accent1 : "#f37735" ,
accent2 : "#eeba21" ,
accent3 : "#97bd2d" ,
accent4 : "#1fc598" ,
accent5 : "#53a6e1" ,
accent6 : "#bf65f0" ,
accent7 : "#ee4eb8" ,
} ,
} ,
} ;
export default myColorSet ; 전문가 팁 : themer 의 웹 UI를 사용하여 색상을보다 쉽게 선택한 다음 "다운로드"버튼을 클릭하여 올바른 형식의 colors.js 파일을 생성 할 수 있습니다. Web UI를 사용하면 유효한 CSS 색상 형식 (키워드, HSL, RGB 등)을 입력 할 수 있으며 색상을 16 진로 자동 변환합니다.
자신의 색상 세트에 대한 색상을 선택할 수 있도록 대부분의 themer 템플릿이 색상을 사용하는 방법입니다.
| 컬러 키 | 일반적인 사용 | 기존 색상* |
|---|---|---|
accent0 | 오류, VCS 삭제 | 빨간색 |
accent1 | 통사론 | 주황색 |
accent2 | 경고, VCS 수정 | 노란색 |
accent3 | 성공, VCS 추가 | 녹색 |
accent4 | 통사론 | 시안 |
accent5 | 통사론 | 파란색 |
accent6 | 구문, 간병/커서 | |
accent7 | 구문, 특별 | 마젠타 |
shade0 | 배경색 | |
shade1 | UI | |
shade2 | UI, 텍스트 선택 | |
shade3 | UI, 코드 댓글 | |
shade4 | UI | |
shade5 | UI | |
shade6 | 전경 텍스트 | |
shade7 | 전경 텍스트 |
*기존의 색상은 터미널 테마에서 ANSI 색 이름과 일관성을 제공하지만 어려운 요구 사항은 아닙니다.
색상 매핑을보다 시각적으로 표현하려면 themer 의 웹 UI를 참조하십시오.
Template 만듭니다 import type { Template } from "themer" ;
const template : Template = {
// Templates should provide a human-readable name.
name : "My Template" ,
// The render async generator function takes a color set and the render
// options, and yields one or more output files. The color set is fully
// expanded (e.g., if the color set did not include shades 1 through 6
// when originally authored, those intermediary shades will have already
// been calculated and included).
render : async function * ( colorSet , options ) {
// The yielded output file has two properties: a string path (relative)
// and a Buffer of the file's content.
yield {
path : "my-file.txt" ,
content : Buffer . from ( "Hello, world!" , "utf8" ) ,
} ;
} ,
// The renderInstructions function takes an array of paths generated from
// the render function and should return a Markdown string, which will be
// included in the generated README.md file.
renderInstructions : ( paths ) =>
`Copy the files ( ${ paths . join ( " and " ) } ) to your home directory.` ,
} ;
export default template ; (Themer.dev에서만 사용 가능).
| 이름 | 다크 미리보기 | 가벼운 미리보기 |
|---|---|---|
| Jamstacker | (Dark Only) | |
| 빅터 모노 | ||
| 미래의 프로 |
| 이름 | 다크 미리보기 | 가벼운 미리보기 |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (Dark Only) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| 이름 | 다크 미리보기 | 가벼운 미리보기 |
|---|---|---|
dracula | (Dark Only) | |
github-universe | (Dark Only) | |
lucid | ||
mojave | ||
nova | (Dark Only) | |
one | ||
rivet | ||
seti | (Dark Only) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources 벽지 미리보기는 themer 의 웹 UI를 참조하십시오.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer Trevordmiller/Nova 및 Chriskempson/Base16에서 영감을 받았습니다.
개념적으로 themer Base16과 매우 유사하지만 :
themer 에 기여하는 방법에 대한 지침은 Contributing.md 및 themer 의 행동 강령을 참조하십시오.
themerthemer 지원하십시오
