themer
v6.0.0
themer toma un conjunto de colores y genera temas de editor, temas de terminal, temas para otras aplicaciones y fondos de pantalla de escritorio.
ColorSet Sustset STemplate personalizadas sthemer Hay algunas formas diferentes de nivelar su configuración de desarrollo con themer :
themer tiene una aplicación web progresiva oficial ubicada en themer.dev.themer se puede usar para generar temas en la CLI, vea los documentos de la CLI a continuación.themer expone una API JavaScript (completa con definiciones de tipo TypeScript) para uso programático; Vea los documentos de la API a continuación.Comparación de características:
| Ui web | CLI/API | |
|---|---|---|
| Vista previa instantánea | ✅ | |
| Juegos de colores premium | ✅ | |
| Formato de color compatible | Cualquier formato CSS | Solo hex |
| Formato de salida de papel tapiz | PNG + SVG | SVG solo |
| Integración de Dotfiles sin costuras | ✅ |
A partir de V5, themer se distribuye como un solo paquete TypeScript/JavaScript que contiene todos los conjuntos de colores y plantillas incorporadas para facilitar el uso, pero aún admite el uso de conjuntos o plantillas de colores personalizados.
Instale themer desde NPM con su JavaScript Package Manager de elección.
npm install themer themer también se puede instalar a nivel mundial. O si prefiere no instalarlo en absoluto, se puede usar con npx .
themer [options] Pase themer uno o más conjuntos de colores, tantas plantillas como desee, tantas resoluciones de papel tapiz que desee y un directorio de salida.
| Opción | Descripción | Valor predeterminado | Opciones disponibles |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | la (s) juego (s) de color para renderizar | default | Nombre de conjunto de color, o ruta al archivo JS que contiene un conjunto de colores personalizado, o una ruta de archivo a un archivo YAML base16 |
-t, --template <built-in template name or file path...> | las plantillas del tema para renderizar | * (todas las plantillas incorporadas) | Nombre de la plantilla, o ruta al archivo JS que contiene una plantilla personalizada |
-s, --size <wallpaper resolution...> | Resolución para renderizar en píxeles, en el formato [ancho] x [altura] | 2880x1800 | cualquier |
-o, --output <path> | el directorio de salida | themer-output | cualquier |
--color-set , --template y --size se pueden especificar varias veces.
Sus archivos de tema generados, así como un readMe sobre cómo instalarlos, se escribirán en el directorio de salida.
Digamos que quería generar un tema VIM y un fondo de escritorio utilizando el conjunto de color predeterminado de themer . Primero, instale themer :
cd my-dotfiles
npm install themer Luego edite su package.json :
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}Luego ejecuta tu nuevo script:
npm run build Ahora revise la carpeta gen/ de sus archivos generados. Aquí está el resultado:
Este comando generará un tema VIM y el fondo de pantalla de la onda de bloques, utilizando el conjunto de color predeterminado de themer , y los colocará en una carpeta llamada output :
npx themer -c default -t vim -t wallpaper-block-wave -o output En lugar de un conjunto de colores Themer, también puede proporcionar themer cualquier archivo YAML del esquema base16.
themer --color-set path/to/base16-scheme.yml ...
Consulte el repositorio Base16 para obtener una lista de esquemas Base16.
themer se envía con una API de JavaScript (con definiciones de tipo TypeScript) para su uso en la generación de temas de generación programada.
npm install themer La exportación predeterminada de themer es una función de generador Async que toma tres argumentos:
ColorSet o identificadores de cadena de los conjuntos de colores incorporados de themerTemplate o identificadores de cadena de las plantillas integradas de themerRenderOptions utilizado para especificar la resolución de las imágenes de papel tapiz de salidaOutputFileTransform que transforma los archivos generados por las plantillas proporcionadas. Esta función se ejecuta entre las funciones de render y renderInstructions de cada plantilla. Los objetos cedidos por el generador son OutputFile o el tipo producido por 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 Sustset 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 ; Consejo Pro: puede usar la interfaz de usuario web de themer para seleccionar más fácilmente sus colores, luego haga clic en el botón "Descargar" para generar un archivo colors.js en el formato correcto. Con la interfaz de usuario web, también puede ingresar cualquier formato de color CSS válido (palabra clave, HSL, RGB, etc.) y convertirá automáticamente el color en hex.
Para ayudarlo a elegir colores para su propio conjunto de colores, así es aproximadamente cómo la mayoría de las plantillas themer utilizarán sus colores:
| Llave de color | Uso típico | Color convencional* |
|---|---|---|
accent0 | Error, eliminación de VCS | Rojo |
accent1 | sintaxis | Naranja |
accent2 | advertencia, modificación de VCS | Amarillo |
accent3 | éxito, adición de VCS | Verde |
accent4 | sintaxis | Cian |
accent5 | sintaxis | Azul |
accent6 | Sintaxis, careto/cursor | |
accent7 | Sintaxis, especial | Magenta |
shade0 | color de fondo | |
shade1 | Ui | |
shade2 | UI, selección de texto | |
shade3 | UI, comentarios de código | |
shade4 | Ui | |
shade5 | Ui | |
shade6 | texto en primer plano | |
shade7 | texto en primer plano |
*El color convencional se sugiere para la consistencia con los nombres de color ANSI en temas terminales, pero no es un requisito difícil.
Vea la interfaz de usuario web de themer para obtener una representación más visual de las asignaciones de color.
Template personalizadas 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 ; (Solo disponible en themer.dev.)
| Nombre | Vista previa oscura | Vista previa de luz |
|---|---|---|
| Jamón | (solo oscuro) | |
| Victor Mono | ||
| Future Pro |
| Nombre | Vista previa oscura | Vista previa de luz |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (solo oscuro) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| Nombre | Vista previa oscura | Vista previa de luz |
|---|---|---|
dracula | (solo oscuro) | |
github-universe | (solo oscuro) | |
lucid | ||
mojave | ||
nova | (solo oscuro) | |
one | ||
rivet | ||
seti | (solo oscuro) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources Consulte la interfaz de usuario web de themer para obtener avances de papel tapiz.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer está inspirado en Trevordmiller/Nova y Chriskempson/Base16.
Conceptualmente, themer es muy similar a Base16, pero:
Para obtener instrucciones sobre cómo contribuir a themer , consulte Código de conducta de MD y themer .
themer en Githubthemer
