themer
v6.0.0
themer採用一組顏色，並生成編輯器主題，終端主題，其他應用程序的主題以及桌面壁紙。
ColorSet STemplate Sthemer 有幾種不同的方法可以通過themer來提高您的開發設置：
themer在themer.dev上設有一個官方的漸進式網絡應用程序。themer可以用於在CLI上生成主題，請參見下面的CLI文檔。themer揭示了用於程序使用的JavaScript API（帶有打字稿類型定義）；請參閱下面的API文檔。功能比較：
| Web UI | CLI/API | |
|---|---|---|
| 即時預覽 | ✅ | |
| 優質顏色集 | ✅ | |
| 支持的顏色格式 | 任何CSS格式 | 只有十六進制 |
| 牆紙輸出格式 | 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...> | 分辨率以像素為單位，格式[width] x [高度] | 2880x1800 | 任何 |
-o, --output <path> | 輸出目錄 | themer-output | 任何 |
--color-set ， --template和--size可以多次指定。
您生成的主題文件以及有關如何安裝它們的讀書文件將寫入輸出目錄。
假設您想使用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主題和Block Wave壁紙，並將它們放入一個稱為output的文件夾中：
npx themer -c default -t vim -t wallpaper-block-wave -o output代替主題顏色集，您還可以為themer提供任何Base16方案yaml文件。
themer --color-set path/to/base16-scheme.yml ...
有關基本16方案列表，請參閱base16存儲庫。
themer器具有JavaScript API（帶打字稿類型定義），用於編程生成主題。
npm install themerthemer的默認導出是一個異步生成器函數，該函數採用三個參數：
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 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 ;專家提示：您可以使用themer的Web UI更輕鬆地選擇顏色，然後單擊“下載”按鈕以正確格式生成colors.js 。使用Web UI，您還可以輸入任何有效的CSS顏色格式（關鍵字，HSL，RGB等），並且它將自動為您轉換顏色。
為了幫助您選擇自己的顏色套裝的顏色，這大約是大多數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的Web UI。
Template 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 ; （僅在themer.dev上可用。）
| 姓名 | 黑暗預覽 | 光預覽 |
|---|---|---|
| jamstacker | （僅黑暗） | |
| 維克多·莫諾（Victor Mono） | ||
| Future Pro |
| 姓名 | 黑暗預覽 | 光預覽 |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | （僅黑暗） | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| 姓名 | 黑暗預覽 | 光預覽 |
|---|---|---|
dracula | （僅黑暗） | |
github-universe | （僅黑暗） | |
lucid | ||
mojave | ||
nova | （僅黑暗） | |
one | ||
rivet | ||
seti | （僅黑暗） | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources有關壁紙預覽，請參見themer的Web UI。
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglifythemer的靈感來自Trevordmiller/Nova和Chriskempson/Base16。
從概念上講， themer與base16非常相似，但是：
有關如何為themer做出貢獻的說明，請參見貢獻。 MD和themer的行為準則。
themerthemer
