themer
v6.0.0
يأخذ themer مجموعة من الألوان وينشئ موضوعات المحرر ، ومواضيع طرفية ، وموضوعات للتطبيقات الأخرى ، وخلفيات سطح المكتب.
ColorSet مخصصةTemplate مخصصthemer هناك بعض الطرق المختلفة لرفع مستوى إعداد التطوير الخاص بك مع themer :
themer تطبيق الويب التقدمي الرسمي الموجود في Themer.dev.themer لإنشاء موضوعات على CLI ، انظر مستندات CLI أدناه.themer واجهة برمجة تطبيقات JavaScript (كاملة مع تعريفات نوع TypeScript) للاستخدام البرنامجي ؛ انظر مستندات API أدناه.مقارنة الميزة:
| ويب واجهة المستخدم | CLI/API | |
|---|---|---|
| معاينة فورية | ✅ | |
| مجموعات الألوان المتميزة | ✅ | |
| تنسيق اللون المدعوم | أي تنسيق CSS | عرافة فقط |
| تنسيق إخراج خلفية | PNG + SVG | SVG فقط |
| تكامل dotfiles سلس | ✅ |
اعتبارًا من V5 ، يتم توزيع themer على أنها حزمة TypeScript/JavaScript واحدة تحتوي على جميع مجموعات الألوان المدمجة والقوالب لسهولة الاستخدام-لكن لا تزال تدعم استخدام مجموعات الألوان المخصصة أو القوالب.
قم بتثبيت themer من NPM مع مدير حزمة JavaScript الخاص بك.
npm install themer يمكن أيضًا تثبيت themer على مستوى العالم. أو إذا كنت تفضل عدم تثبيته على الإطلاق ، فيمكن استخدامه مع npx .
themer [options] تمرير themer ألوان واحدة أو أكثر ، مثل العديد من القوالب كما تشاء ، مثل العديد من قرارات خلفيات كما تريد ، ودليل الإخراج.
| خيار | وصف | القيمة الافتراضية | الخيارات المتاحة |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | مجموعة (مجموعات) الألوان لتقديمها | default | اسم مجموعة الألوان ، أو مسار إلى ملف JS الذي يحتوي على مجموعة ألوان مخصصة ، أو مسار ملف إلى ملف yaml base16 |
-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 حول كيفية تثبيتها ، إلى دليل الإخراج.
لنفترض أنك تريد إنشاء موضوع VIM وخلفية سطح المكتب باستخدام مجموعة الألوان الافتراضية الخاصة بـ themer . أولاً ، قم بتثبيت 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/ المجلد للحصول على الملفات التي تم إنشاؤها. ها هي النتيجة:
سيقوم هذا الأمر بإنشاء موضوع VIM وخلفية Wave Wave ، باستخدام مجموعة الألوان الافتراضية الخاصة بـ themer ، ووضعها في مجلد يسمى output :
npx themer -c default -t vim -t wallpaper-block-wave -o output بدلاً من مجموعة الألوان ، يمكنك أيضًا تزويد themer بأي ملف YAML مخطط BASE16.
themer --color-set path/to/base16-scheme.yml ...
ارجع إلى مستودع BASE16 للحصول على قائمة مخططات BASE16.
يشحن themer مع واجهة برمجة تطبيقات JavaScript (مع تعريفات نوع TypeScript) للاستخدام في سمات توليد برمجي.
npm install themer التصدير الافتراضي لـ themer عبارة عن وظيفة مولد غير متزامنة تأخذ ثلاث وسيطات:
ColorSet ، أو معرفات سلسلة مجموعات الألوان themerTemplate ، أو معرفات السلسلة لقوالب المدمجة في themerRenderOptions يستخدم لتحديد دقة صور خلفية الإخراجOutputFileTransform التي تحول الملفات التي تم إنشاؤها بواسطة القوالب المقدمة. تعمل هذه الوظيفة بين وظائف 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 لتحديد ألوانك بسهولة أكبر ، ثم انقر فوق الزر "تنزيل" لإنشاء ملف colors.js بالتنسيق الصحيح. باستخدام واجهة المستخدم على الويب ، يمكنك أيضًا إدخال أي تنسيق ملون CSS صالح (الكلمة الرئيسية ، HSL ، RGB ، إلخ) وسيقوم تلقائيًا بتحويل اللون إلى Hex لك.
لمساعدتك في اختيار الألوان لمجموعة الألوان الخاصة بك ، هذا هو ما يقرب من كيفية استخدام معظم قوالب themer ألوانك:
| مفتاح اللون | الاستخدام النموذجي | اللون التقليدي* |
|---|---|---|
accent0 | خطأ ، حذف VCS | أحمر |
accent1 | بناء الجملة | البرتقالي |
accent2 | تحذير ، تعديل VCS | أصفر |
accent3 | النجاح ، إضافة VCS | أخضر |
accent4 | بناء الجملة | سماوي |
accent5 | بناء الجملة | أزرق |
accent6 | بناء جملة ، كاريت/المؤشر | |
accent7 | بناء الجملة ، خاص | أرجواني |
shade0 | لون الخلفية | |
shade1 | واجهة المستخدم | |
shade2 | واجهة المستخدم ، اختيار النص | |
shade3 | واجهة المستخدم ، تعليقات الكود | |
shade4 | واجهة المستخدم | |
shade5 | واجهة المستخدم | |
shade6 | نص المقدمة | |
shade7 | نص المقدمة |
*يتم اقتراح اللون التقليدي للتناسق مع أسماء ألوان ANSI في الموضوعات الطرفية ، ولكن ليس شرطًا صعبًا.
شاهد واجهة مستخدم الويب الخاصة بـ themer للحصول على تمثيل بصري أكثر من تعيينات الألوان.
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 | (الظلام فقط) | |
| فيكتور مونو | ||
| برو المستقبل |
| اسم | معاينة مظلمة | معاينة الضوء |
|---|---|---|
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 لمعايير خلفية.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer مستوحى من Trevordmiller/Nova و Chriskempson/Base16.
من الناحية المفاهيمية ، يشبه themer إلى حد كبير BASE16 ، ولكن:
للحصول على تعليمات حول كيفية المساهمة في themer ، راجع مدونة قواعد سلوك themer .
themer على جيثبthemer
