themer
v6.0.0
themer mengambil satu set warna dan menghasilkan tema editor, tema terminal, tema untuk aplikasi lain, dan wallpaper desktop.
ColorSet Kustom STemplate Kustom Sthemer Ada beberapa cara berbeda untuk meningkatkan pengaturan pengembangan Anda dengan themer :
themer memiliki aplikasi web progresif resmi yang berlokasi di Themer.dev.themer dapat digunakan untuk menghasilkan tema pada CLI, lihat dokumen CLI di bawah ini.themer memaparkan API JavaScript (lengkap dengan definisi tipe TypeScript) untuk penggunaan terprogram; Lihat dokumen API di bawah ini.Perbandingan fitur:
| Web UI | CLI/API | |
|---|---|---|
| Pratinjau Instan | ✅ | |
| Set warna premium | ✅ | |
| Format warna yang didukung | Format CSS apa pun | Hex saja |
| Format output wallpaper | PNG + SVG | SVG saja |
| Integrasi dotfiles yang mulus | ✅ |
Pada V5, themer didistribusikan sebagai paket TypeScript/JavaScript tunggal yang berisi semua set warna bawaan dan templat untuk kemudahan penggunaan-tetapi masih mendukung penggunaan set atau templat warna khusus.
Instal themer dari NPM dengan Manajer Paket JavaScript Anda.
npm install themer themer juga dapat dipasang secara global. Atau jika Anda lebih suka untuk tidak menginstalnya sama sekali, itu dapat digunakan dengan npx .
themer [options] Lewati themer satu atau lebih set warna, sebanyak template yang Anda inginkan, sebanyak resolusi wallpaper yang Anda inginkan, dan direktori output.
| Pilihan | Keterangan | Nilai default | Opsi yang tersedia |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | set warna untuk diterjemahkan | default | nama set warna, atau jalur ke file js yang berisi set warna khusus, atau jalur file ke file base16 yaml |
-t, --template <built-in template name or file path...> | Template tema untuk diterjemahkan | * (semua templat bawaan) | nama templat, atau jalur ke file js yang berisi template khusus |
-s, --size <wallpaper resolution...> | Resolusi untuk dirender dalam piksel, dalam format [lebar] x [tinggi] | 2880x1800 | setiap |
-o, --output <path> | direktori output | themer-output | setiap |
--color-set , --template , dan --size dapat ditentukan beberapa kali.
File tema yang Anda hasilkan, serta readme tentang cara menginstalnya, akan ditulis ke direktori output.
Katakanlah Anda ingin menghasilkan tema VIM dan latar belakang desktop menggunakan set warna default themer . Pertama, instal themer :
cd my-dotfiles
npm install themer Kemudian edit package.json Anda.json:
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}Kemudian jalankan skrip baru Anda:
npm run build Sekarang periksa gen/ folder untuk file yang Anda hasilkan. Inilah hasilnya:
Perintah ini akan menghasilkan tema VIM dan wallpaper gelombang blok, menggunakan set warna default themer , dan memasukkannya ke dalam folder yang disebut output :
npx themer -c default -t vim -t wallpaper-block-wave -o output Di tempat set warna temer, Anda juga dapat memberikan themer dengan file YAML skema Base16 apa pun.
themer --color-set path/to/base16-scheme.yml ...
Lihat Repositori Base16 untuk daftar skema Base16.
Kapal themer dengan JavaScript API (dengan definisi tipe TypeScript) untuk digunakan dalam tema yang menghasilkan secara terprogram.
npm install themer Ekspor default themer adalah fungsi generator async yang mengambil tiga argumen:
ColorSet , atau pengidentifikasi string dari set warna built-in themerTemplate , atau pengidentifikasi string dari template bawaan themerRenderOptions yang digunakan untuk menentukan resolusi gambar wallpaper yang dikeluarkanOutputFileTransform yang mengubah file yang dihasilkan oleh templat yang disediakan. Fungsi ini berjalan antara fungsi render dan renderInstructions setiap template. Objek yang dihasilkan oleh generator adalah OutputFile S atau tipe yang dihasilkan oleh 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 Kustom S 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 ; Kiat Pro: Anda dapat menggunakan UI Web themer untuk lebih mudah memilih warna Anda, lalu klik tombol "Unduh" untuk menghasilkan file colors.js dalam format yang benar. Dengan Web UI, Anda juga dapat memasukkan format warna CSS yang valid (kata kunci, HSL, RGB, dll.) Dan itu akan secara otomatis mengubah warna menjadi hex untuk Anda.
Untuk membantu Anda memilih warna untuk set warna Anda sendiri, ini adalah kira -kira bagaimana sebagian besar templat themer akan memanfaatkan warna Anda:
| Kunci Warna | Penggunaan khas | Warna konvensional* |
|---|---|---|
accent0 | Kesalahan, penghapusan VCS | Merah |
accent1 | sintaksis | Oranye |
accent2 | Peringatan, modifikasi VCS | Kuning |
accent3 | Sukses, penambahan VCS | Hijau |
accent4 | sintaksis | Cyan |
accent5 | sintaksis | Biru |
accent6 | Sintaks, karet/kursor | |
accent7 | Sintaks, Khusus | Magenta |
shade0 | Warna latar belakang | |
shade1 | Ui | |
shade2 | UI, pilihan teks | |
shade3 | UI, Komentar Kode | |
shade4 | Ui | |
shade5 | Ui | |
shade6 | teks latar depan | |
shade7 | teks latar depan |
*Warna konvensional disarankan untuk konsistensi dengan nama warna ANSI dalam tema terminal, tetapi bukan persyaratan yang sulit.
Lihat UI Web themer untuk representasi yang lebih visual dari pemetaan warna.
Template Kustom S 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 ; (Hanya tersedia di temer.dev.)
| Nama | Pratinjau Gelap | Pratinjau ringan |
|---|---|---|
| Jamstacker | (Hanya gelap) | |
| Victor Mono | ||
| Pro masa depan |
| Nama | Pratinjau Gelap | Pratinjau ringan |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (Hanya gelap) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| Nama | Pratinjau Gelap | Pratinjau ringan |
|---|---|---|
dracula | (Hanya gelap) | |
github-universe | (Hanya gelap) | |
lucid | ||
mojave | ||
nova | (Hanya gelap) | |
one | ||
rivet | ||
seti | (Hanya gelap) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources Lihat UI Web themer untuk pratinjau wallpaper.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer terinspirasi oleh Trevordmiller/Nova dan Chriskempson/Base16.
Secara konseptual, themer sangat mirip dengan Base16, tetapi:
Untuk instruksi tentang cara berkontribusi pada themer , lihat Kode Etik Contributing.MD dan themer .
themer di GitHubthemer
