themer
v6.0.0
themer 、一連の色を取り、エディターのテーマ、終端のテーマ、他のアプリのテーマ、デスクトップの壁紙を生成します。
ColorSetを作成しますTemplateを作成しますthemerをサポートしますthemerで開発セットアップをレベルアップする方法はいくつかあります。
themerは、themer.devにある公式プログレッシブWebアプリがあります。themer 、CLIのテーマを生成するために使用できます。以下のCLIドキュメントを参照してください。themer 、プログラマティック使用のためにJavaScript API（TypeScriptタイプ定義を備えている）を公開します。以下のAPIドキュメントを参照してください。機能比較：
| Web UI | CLI/API | |
|---|---|---|
| インスタントプレビュー | ✅ | |
| プレミアムカラーセット | ✅ | |
| サポートされたカラー形式 | 任意のCSS形式 | ヘックスのみ |
| 壁紙の出力形式 | PNG + SVG | SVGのみ |
| シームレスなドットファイル統合 | ✅ |
V5の時点では、 themer 、使用できるすべての組み込みのカラーセットとテンプレートを含む単一のTypeScript/JavaScriptパッケージとして配布されていますが、カスタムカラーセットまたはテンプレートの使用をサポートしています。
NPMからthemer JavaScript Package Manager of Choiceでインストールします。
npm install themer themerグローバルにインストールすることもできます。または、まったくインストールしたくない場合は、 npxで使用できます。
themer [options] 1つ以上のカラーthemerを、必要な数のテンプレート、希望するだけ多くの壁紙解像度、および出力ディレクトリを渡します。
| オプション | 説明 | デフォルト値 | 利用可能なオプション |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | レンダリングする色セット | default | 色設定名、またはカスタムカラーセットを含むJSファイルへのパス、またはベース16 YAMLファイルへのパス |
-t, --template <built-in template name or file path...> | レンダリングするテーマテンプレート | * （すべての内蔵テンプレート） | テンプレート名、またはカスタムテンプレートを含むJSファイルへのパス |
-s, --size <wallpaper resolution...> | フォーマット[width] x [height]でピクセルでレンダリングする解像度 | 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 outputThemer Colorセットの代わりに、 themerに任意のBase16スキームYAMLファイルを提供することもできます。
themer --color-set path/to/base16-scheme.yml ...
Base16スキームのリストについては、Base16リポジトリを参照してください。
themer 、プログラムで生成するテーマで使用するためのJavaScript API（TypeScriptタイプ定義を備えた）を搭載しています。
npm install themerthemerのデフォルトエクスポートは、3つの引数を取る非同期ジェネレーター関数です。
ColorSetオブジェクトの配列、またはthemerの組み込み色セットの文字列識別子Templateオブジェクトの配列、またはthemerの組み込みテンプレートの文字列識別子RenderOptionsオブジェクトOutputFileTransform ASYNCジェネレーター関数。この関数は、各テンプレートの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のWeb UIを使用して色をより簡単に選択し、[ダウンロード]ボタンをクリックしてcolors.jsファイルを正しい形式で生成できます。 Web UIを使用すると、有効なCSSカラー形式（キーワード、HSL、RGBなど）を入力することもでき、色を16進体に自動的に変換します。
独自の色セットの色を選択するために、これはほとんどのthemerテンプレートがあなたの色を利用する方法です。
| カラーキー | 典型的な使用法 | 従来の色* |
|---|---|---|
accent0 | エラー、VCS削除 | 赤 |
accent1 | 構文 | オレンジ |
accent2 | 警告、VCS変更 | 黄色 |
accent3 | 成功、VCS追加 | 緑 |
accent4 | 構文 | シアン |
accent5 | 構文 | 青 |
accent6 | 構文、CARET/CURSOR | |
accent7 | 構文、特別 | マゼンタ |
shade0 | 背景色 | |
shade1 | ui | |
shade2 | UI、テキスト選択 | |
shade3 | UI、コードコメント | |
shade4 | ui | |
shade5 | ui | |
shade6 | 前景テキスト | |
shade7 | 前景テキスト |
*従来の色は、ターミナルテーマのANSIカラー名との一貫性のために提案されていますが、難しい要件ではありません。
カラーマッピングのより視覚的な表現については、 themerのWeb 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でのみ入手できます。）
| 名前 | 暗いプレビュー | ライトプレビュー |
|---|---|---|
| ジャムスタッカー | （暗いだけ） | |
| ビクターモノ | ||
| 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に貢献する方法については、Convributing.md and themerの行動規範を参照してください。
themerthemerをサポートします
