themer
v6.0.0
themer prend un ensemble de couleurs et génère des thèmes d'éditeur, des thèmes de terminaux, des thèmes pour d'autres applications et des fonds d'écran de bureau.
ColorSet personnalisées STemplate personnalisé Sthemer Il existe différentes façons de mettre à niveau votre configuration de développement avec themer :
themer a une application Web progressive officielle située sur themer.dev.themer peut être utilisé pour générer des thèmes sur la CLI, voir les documents CLI ci-dessous.themer expose une API JavaScript (complète avec des définitions de types de typeScript) pour une utilisation programmatique; Voir les documents API ci-dessous.Comparaison des fonctionnalités:
| Ui Web | CLI / API | |
|---|---|---|
| Aperçu instantané | ✅ | |
| Ensembles de couleurs premium | ✅ | |
| Format de couleur pris en charge | Tout format CSS | Hex seulement |
| Format de sortie de fond d'écran | PNG + SVG | SVG uniquement |
| Intégration de dot-files sans couture | ✅ |
À partir de la V5, themer est distribué en tant que package de type TypeScript / JavaScript contenant tous les ensembles de couleurs et modèles intégrés pour faciliter l'utilisation, mais prend en charge l'utilisation des ensembles de couleurs ou des modèles personnalisés.
Installez themer à partir de NPM avec votre gestionnaire de package JavaScript de choix.
npm install themer themer peut également être installé à l'échelle mondiale. Ou si vous préférez ne pas l'installer du tout, il peut être utilisé avec npx .
themer [options] themer un ou plusieurs ensembles de couleurs, autant de modèles que vous le souhaitez, autant de résolutions de papier peint que vous le souhaitez et un répertoire de sortie.
| Option | Description | Valeur par défaut | Options disponibles |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | le ou les ensembles de couleurs pour rendre | default | Nom de la couleur ou chemin vers le fichier JS contenant un ensemble de couleurs personnalisés, ou un chemin de fichier vers un fichier YAML Base16 |
-t, --template <built-in template name or file path...> | le ou les modèles de thème à rendre | * (tous les modèles intégrés) | Nom du modèle ou chemin vers le fichier JS contenant un modèle personnalisé |
-s, --size <wallpaper resolution...> | Résolution à rendre en pixels, dans le format [largeur] x [hauteur] | 2880x1800 | n'importe lequel |
-o, --output <path> | le répertoire de sortie | themer-output | n'importe lequel |
--color-set , --template et --size peut être spécifié plusieurs fois.
Vos fichiers de thème générés, ainsi qu'une lecture sur la façon de les installer, seront écrits dans le répertoire de sortie.
Supposons que vous vouliez générer un thème VIM et un arrière-plan de bureau en utilisant le jeu de couleurs par défaut de themer . Tout d'abord, installez themer :
cd my-dotfiles
npm install themer Puis modifiez votre package.json :
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}Puis exécutez votre nouveau script:
npm run build Vérifiez maintenant le dossier gen/ pour vos fichiers générés. Voici le résultat:
Cette commande générera un thème VIM et le fond d'écran de l'onde de blocs, en utilisant le jeu de couleurs par défaut de themer , et les mettra dans un dossier appelé output :
npx themer -c default -t vim -t wallpaper-block-wave -o output À la place d'un ensemble de couleurs de thème, vous pouvez également fournir à themer n'importe quel fichier YAML du schéma Base16.
themer --color-set path/to/base16-scheme.yml ...
Reportez-vous au référentiel Base16 pour une liste de schémas Base16.
themer est expédié avec une API JavaScript (avec des définitions de types de typeScript) à utiliser dans des thèmes générateurs programmaticants.
npm install themer L'exportation par défaut de themer est une fonction de générateur asynchrone qui prend trois arguments:
themer tableau d'objets ColorSetTemplate ou d'identifiants de chaîne des modèles intégrés de themerRenderOptions utilisé pour spécifier la résolution des images de papier peint sortiesOutputFileTransform qui transforme les fichiers générés par les modèles fournis. Cette fonction s'exécute entre les fonctions render et renderInstructions . Les objets donnés par le générateur sont OutputFile S ou le type donné par 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 personnalisées 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 ; Conseil de pro: vous pouvez utiliser l'interface utilisateur Web de themer pour sélectionner plus facilement vos couleurs, puis cliquez sur le bouton "Télécharger" pour générer un fichier colors.js dans le bon format. Avec l'interface utilisateur Web, vous pouvez également saisir n'importe quel format de couleur CSS valide (mot-clé, HSL, RVB, etc.) et il convertira automatiquement la couleur en HEX pour vous.
Pour vous aider à choisir des couleurs pour votre propre ensemble de couleurs, c'est à peu près comment la plupart themer utiliseront vos couleurs:
| Clé de couleur | Utilisation typique | Couleur conventionnelle * |
|---|---|---|
accent0 | Erreur, suppression de VCS | Rouge |
accent1 | syntaxe | Orange |
accent2 | avertissement, modification VCS | Jaune |
accent3 | succès, ajout VCS | Vert |
accent4 | syntaxe | Cyan |
accent5 | syntaxe | Bleu |
accent6 | Syntaxe, curseur / curseur | |
accent7 | syntaxe, spécial | Magenta |
shade0 | couleur de fond | |
shade1 | Ui | |
shade2 | Ui, sélection de texte | |
shade3 | UI, commentaires de code | |
shade4 | Ui | |
shade5 | Ui | |
shade6 | texte de premier plan | |
shade7 | texte de premier plan |
* La couleur conventionnelle est suggérée pour être cohérente avec les noms de couleur ANSI dans les thèmes terminaux, mais n'est pas une exigence difficile.
Voir l'interface utilisateur Web de themer pour une représentation plus visuelle des mappages de couleurs.
Template personnalisé 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 ; (Uniquement disponible sur themer.dev.)
| Nom | Aperçu sombre | Aperçu léger |
|---|---|---|
| Amorce | (sombre seulement) | |
| Victor Mono | ||
| Future Pro |
| Nom | Aperçu sombre | Aperçu léger |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (sombre seulement) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| Nom | Aperçu sombre | Aperçu léger |
|---|---|---|
dracula | (sombre seulement) | |
github-universe | (sombre seulement) | |
lucid | ||
mojave | ||
nova | (sombre seulement) | |
one | ||
rivet | ||
seti | (sombre seulement) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources Voir l'interface utilisateur Web de themer pour les aperçus de fond d'écran.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer est inspiré par Trevordmiller / Nova et Chriskempson / Base16.
Conceptuellement, themer est très similaire à Base16, mais:
Pour des instructions sur la façon de contribuer au themer , voir le code de conduite de Contribution.MD et themer .
themer Githubthemer
