themer
v6.0.0
themer pega um conjunto de cores e gera temas do editor, temas de terminal, temas para outros aplicativos e papéis de parede para desktop.
ColorSet personalizado sTemplate personalizados sthemer Existem algumas maneiras diferentes de subir de nível sua configuração de desenvolvimento com themer :
themer possui um aplicativo oficial da Web oficial localizado no themer.dev.themer pode ser usado para gerar temas na CLI, ver os documentos da CLI abaixo.themer expõe uma API JavaScript (completa com definições de tipo de texto datilografado) para uso programático; Veja os documentos da API abaixo.Comparação de recursos:
| UI da web | CLI/API | |
|---|---|---|
| Visualização instantânea | ✅ | |
| Conjuntos de cores premium | ✅ | |
| Formato de cores suportado | Qualquer formato CSS | Apenas hexadecimal |
| Formato de saída do papel de parede | Png + svg | Apenas SVG |
| Integração de Dotfiles sem costura | ✅ |
A partir do V5, themer é distribuído como um único pacote de texto datilografado/javascript que contém todos os conjuntos de cores e modelos de cores embutidos para facilitar o uso-mas ainda suporta o uso de conjuntos de cores ou modelos de cores personalizados.
Instale themer no NPM com o gerente de pacote JavaScript de escolha.
npm install themer themer também pode ser instalado globalmente. Ou, se você preferir não instalá -lo, ele pode ser usado com npx .
themer [options] themer um ou mais conjuntos de cores, quantos modelos desejar, quantas resoluções de papel de parede desejar e um diretório de saída.
| Opção | Descrição | Valor padrão | Opções disponíveis |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | os conjuntos de cores para renderizar | default | Nome do conjunto de cores, ou caminho para o arquivo JS contendo um conjunto de cores personalizado ou um caminho de arquivo para um arquivo BASE16 YAML |
-t, --template <built-in template name or file path...> | o (s) tema (s) para renderizar | * (todos os modelos embutidos) | Nome do modelo ou caminho para o arquivo JS contendo um modelo personalizado |
-s, --size <wallpaper resolution...> | Resolução para renderizar em pixels, no formato [largura] x [altura] | 2880x1800 | qualquer |
-o, --output <path> | o diretório de saída | themer-output | qualquer |
--color-set , --template e --size podem ser especificados várias vezes.
Seus arquivos de temas gerados, bem como um ReadMe sobre como instalá -los, serão gravados no diretório de saída.
Digamos que você queira gerar um tema Vim e um fundo de mesa usando o conjunto de cores padrão do themer . Primeiro, instale themer :
cd my-dotfiles
npm install themer Em seguida, edite seu package.json :
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}Em seguida, execute seu novo script:
npm run build Agora verifique a pasta gen/ para seus arquivos gerados. Aqui está o resultado:
Este comando gerará um tema Vim e o papel de parede de onda de bloco, usando o conjunto de cores padrão do themer , e os colocará em uma pasta chamada output :
npx themer -c default -t vim -t wallpaper-block-wave -o output No lugar de um conjunto de cores temer, você também pode fornecer themer qualquer arquivo YAML do esquema Base16.
themer --color-set path/to/base16-scheme.yml ...
Consulte o repositório Base16 para obter uma lista de esquemas base16.
themer é enviado com uma API JavaScript (com definições de tipo de texto datilografado) para uso na geração de temas programaticamente.
npm install themer A exportação padrão de themer é uma função de gerador assíncrono que leva três argumentos:
ColorSet ou identificadores de string dos conjuntos de cores embutidos de themerTemplate ou identificadores de string dos modelos internos de themerRenderOptions usados para especificar a resolução das imagens de papel de parede em saídaOutputFileTransform Async que transforma os arquivos gerados pelos modelos fornecidos. Esta função é executada entre as funções de render e renderInstructions de cada modelo. Os objetos produzidos pelo gerador são OutputFile S ou o tipo produzido pelo 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 personalizado 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 ; Dica profissional: você pode usar a interface da usuário da themer para selecionar mais facilmente suas cores e clique no botão "Download" para gerar um arquivo colors.js no formato correto. Com a interface do usuário da web, você também pode inserir qualquer formato de cor CSS válido (palavra -chave, hsl, rgb etc.) e ela converterá automaticamente a cor em hexadecimal para você.
Para ajudá -lo a escolher as cores para o seu próprio conjunto de cores, é aproximadamente como a maioria dos modelos themer utilizará suas cores:
| Chave de cor | Uso típico | Cor convencional* |
|---|---|---|
accent0 | Erro, exclusão do VCS | Vermelho |
accent1 | sintaxe | Laranja |
accent2 | Aviso, modificação do VCS | Amarelo |
accent3 | Sucesso, adição de VCS | Verde |
accent4 | sintaxe | Ciano |
accent5 | sintaxe | Azul |
accent6 | Sintaxe, Caret/Cursor | |
accent7 | Sintaxe, especial | Magenta |
shade0 | cor de fundo | |
shade1 | Ui | |
shade2 | UI, seleção de texto | |
shade3 | UI, comentários de código | |
shade4 | Ui | |
shade5 | Ui | |
shade6 | texto em primeiro plano | |
shade7 | texto em primeiro plano |
*A cor convencional é sugerida para consistência com nomes de cores ANSI em temas de terminais, mas não é um requisito difícil.
Veja a interface do usuário da themer para uma representação mais visual dos mapeamentos de cores.
Template personalizados 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 ; (Disponível apenas no themer.dev.)
| Nome | Visualização escura | Visualização de luz |
|---|---|---|
| Jamstacker | (Somente escuro) | |
| Victor Mono | ||
| Future Pro |
| Nome | Visualização escura | Visualização de luz |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (Somente escuro) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| Nome | Visualização escura | Visualização de luz |
|---|---|---|
dracula | (Somente escuro) | |
github-universe | (Somente escuro) | |
lucid | ||
mojave | ||
nova | (Somente escuro) | |
one | ||
rivet | ||
seti | (Somente escuro) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources Veja a interface do usuário da Web de themer para visualizações de papel de parede.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer é inspirado em TreVordmiller/Nova e Chriskempson/Base16.
Conceitualmente, themer é muito semelhante ao Base16, mas:
Para obter instruções sobre como contribuir com themer , consulte o Código de Conduta Contribuindo.md e themer .
themer estrela no githubthemer
