themer
v6.0.0
themer берет набор цветов и генерирует темы редактора, терминальные темы, темы для других приложений и настольные обои.
ColorSetTemplate sthemer Есть несколько разных способов повышения вашей настройки разработки с помощью themer :
themer есть официальное прогрессивное веб -приложение, расположенное на Themer.dev.themer может быть использован для создания тем на CLI, см. Документы CLI ниже.themer обнажает API JavaScript (в комплекте с определениями типа типа) для программного использования; Смотрите документы 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, содержащий пользовательский набор цветов, или путь к файлу в файл 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 о том, как их установить, будут записаны в выходной каталог.
Скажите, что вы хотите сгенерировать тему 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 и обои Block Wave, используя набор цветов themer по умолчанию, и поместите их в папку, называемую output :
npx themer -c default -t vim -t wallpaper-block-wave -o output Вместо того, что наборе царства в целях вы также можете предоставить themer любую схему Base16 схемы YAML.
themer --color-set path/to/base16-scheme.yml ...
Обратитесь к репозиторию BASE16 для списка схем BASE16.
themer суда с API JavaScript (с определениями типа типа) для использования в программном генерации тем.
npm install themer Экспорт по умолчанию themer - это функция Async Generator, которая принимает три аргумента:
ColorSet или идентификаторов струн встроенных цветовых наборов themerTemplate объектов или идентификаторы струн встроенных шаблонов themerRenderOptions , используемый для указания разрешения выведенных изображений обоевOutputFileTransform Async, которая преобразует файлы, сгенерированные предоставленными шаблонами. Эта функция выполняется между функциями render каждого шаблона и renderInstructions . Объекты, полученные генератором, являются OutputFile или типом, полученным с помощью 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 Color (ключевое слово, HSL, RGB и т. Д.), И он автоматически преобразует цвет в шестнадцатеричный.
Чтобы помочь вам выбрать цвета для вашего собственного набора цветов, это примерно так, как большинство themer -шаблонов будут использовать ваши цвета:
| Цветовой ключ | Типичное использование | Обычный цвет* |
|---|---|---|
accent0 | Ошибка, удаление VCS | Красный |
accent1 | синтаксис | Апельсин |
accent2 | Предупреждение, модификация VCS | Желтый |
accent3 | Успех, венчурное добавление | Зеленый |
accent4 | синтаксис | Голубой |
accent5 | синтаксис | Синий |
accent6 | Синтаксис, каретка/курсор | |
accent7 | Синтаксис, Специальный | Пурпурный |
shade0 | Цвет фона | |
shade1 | UI | |
shade2 | UI, выбор текста | |
shade3 | UI, Кодовые комментарии | |
shade4 | UI | |
shade5 | UI | |
shade6 | Текст переднего плана | |
shade7 | Текст переднего плана |
*Обычный цвет предлагается для согласованности с именами цветов ANSI в терминальных темах, но не является жестким требованием.
Смотрите веб -интерфейс themer для более визуального представления цветовых отображений.
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 | (только темный) | |
| Виктор Моно | ||
| Будущий 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 для предварительных просмотров обоев.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer вдохновляется Trevordmiller/Nova и Chriskempson/Base16.
Концептуально, themer очень похож на Base16, но:
Для инструкций о том, как внести свой вклад в themer , см. Compling.md и themer 's Code of Prove.
themer Star на GitHubthemer
