themer
v6.0.0
themer nimmt eine Reihe von Farben an und generiert Editor -Themen, Terminalthemen, Themen für andere Apps und Desktop -Hintergrundbilder.
ColorSet sTemplate s sthemer Es gibt verschiedene Möglichkeiten, Ihr Entwicklungsaufbau mit themer aufzunehmen:
themer verfügt über eine offizielle progressive Web -App bei These.dev.themer können Sie Themen auf der CLI generieren. Siehe die folgenden Cli -Dokumente.themer enthüllt eine JavaScript -API (komplett mit Definitionen TypeScript -Typ) für die programmatische Verwendung. Siehe die API -Dokumente unten.Feature -Vergleich:
| Web UI | CLI/API | |
|---|---|---|
| Sofortige Vorschau | ✅ | |
| Premium -Farbsets | ✅ | |
| Unterstütztes Farbformat | Jedes CSS -Format | Nur Hex |
| Tapetenausgangsformat | PNG + SVG | Nur SVG |
| Nahlose Dotfiles -Integration | ✅ |
Ab V5 wird themer als ein einzelnes Typecript/JavaScript-Paket verteilt, das alle integrierten Farbsätze und Vorlagen zur einfachen Verwendung enthält-aber unterstützt immer noch die Verwendung benutzerdefinierter Farbsätze oder Vorlagen.
Installieren Sie themer von NPM mit Ihrem JavaScript -Paket -Manager der Wahl.
npm install themer themer kann auch weltweit installiert werden. Oder wenn Sie es vorziehen, es überhaupt nicht zu installieren, kann es mit npx verwendet werden.
themer [options] Geben Sie themer eine oder mehrere Farbsätze, so viele Vorlagen, wie Sie wünschen, so viele Tapetenauflösungen wie Sie wünschen, und ein Ausgangsverzeichnis.
| Option | Beschreibung | Standardwert | Verfügbare Optionen |
|---|---|---|---|
-c, --color-set <built-in color set name or file path...> | die Farbsets (en) zu rendern | default | Farbsatz Name oder Pfad zu JS -Datei mit einem benutzerdefinierten Farbsatz oder einem Dateipfad zu einer Basis16 -YAML -Datei |
-t, --template <built-in template name or file path...> | Die Themenvorlage (n) zu rendern | * (alle eingebauten Vorlagen) | Vorlagenname oder Pfad zur JS -Datei mit einer benutzerdefinierten Vorlage |
-s, --size <wallpaper resolution...> | Auflösung zum Rendern in Pixeln im Format [Breite] x [Höhe] | 2880x1800 | beliebig |
-o, --output <path> | das Ausgabeverzeichnis | themer-output | beliebig |
--color-set , --template und --size können mehrmals angegeben werden.
Ihre generierten Themendateien sowie ein Readme zur Installation werden in das Ausgabemittel geschrieben.
Angenommen, Sie wollten einen VIM -Themen- und Desktop -Hintergrund mit dem Standardfarbset von themer generieren. Installieren Sie zuerst themer :
cd my-dotfiles
npm install themer Dann bearbeiten Sie Ihr package.json :
{
"scripts" : {
"build" : " themer -c default -t vim -t vim-lightline -t hyper -t wallpaper-block-wave -o gen "
}
}Dann führen Sie Ihr neues Skript aus:
npm run build Überprüfen Sie nun den gen/ den Ordner für Ihre generierten Dateien. Hier ist das Ergebnis:
Dieser Befehl erzeugt ein VIM -Thema und die Blockwellenwallpaper unter Verwendung des Standardfarbsets von themer und steckt sie in einen Ordner namens output :
npx themer -c default -t vim -t wallpaper-block-wave -o output Anstelle eines Themer -Farb -Sets können Sie themer auch eine beliebige YAML -Datei von Base16 -Schema zur Verfügung stellen.
themer --color-set path/to/base16-scheme.yml ...
Eine Liste von Base16 -Schemata finden Sie im Base16 -Repository.
themer wird mit einer JavaScript -API (mit Definitionen TypeScript -Typ) zur Verwendung bei programmatisch generierenden Themen geliefert.
npm install themer Der Standard -Export von themer ist eine asynchrische Generatorfunktion, die drei Argumente aufnimmt:
ColorSet oder String-Identifikatoren der integrierten Farbsätze von themerTemplate oder String-Identifikatoren der integrierten Vorlagen von themerRenderOptions -Objekt, das verwendet wird, um die Auflösung der ausgegebenen Tapetenbilder anzugebenOutputFileTransform , die die von den bereitgestellten Vorlagen generierten Dateien transformiert. Diese Funktion läuft zwischen den render und renderInstructions -Funktionen jeder Vorlage. Die vom Generator ergebenen Objekte sind OutputFile s oder der Typ, der durch OutputFileTransform ergibt.
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 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 ; Profi -Tipp: Sie können die Web -Benutzeroberfläche von themer verwenden, um Ihre Farben einfacher auszuwählen, und klicken Sie dann auf die Schaltfläche "Download", um eine colors.js -Datei im richtigen Format zu generieren. Mit der Web -Benutzeroberfläche können Sie auch jedes gültige CSS -Farbformat (Keyword, HSL, RGB usw.) eingeben und die Farbe automatisch in Hex für Sie umwandeln.
Um Ihnen bei der Auswahl von Farben für Ihr eigenes Farbset zu helfen, werden Sie ungefähr darauf hinweisen, wie die meisten themer Ihre Farben verwenden:
| Farbschlüssel | Typische Verwendung | Herkömmliche Farbe* |
|---|---|---|
accent0 | Fehler, VCS -Löschen | Rot |
accent1 | Syntax | Orange |
accent2 | Warnung, VCS -Modifikation | Gelb |
accent3 | Erfolg, VCS -Addition | Grün |
accent4 | Syntax | Cyan |
accent5 | Syntax | Blau |
accent6 | Syntax, Pflege/Cursor | |
accent7 | Syntax, Spezial | Magenta |
shade0 | Hintergrundfarbe | |
shade1 | Ui | |
shade2 | UI, Textauswahl | |
shade3 | UI, Codekommentare | |
shade4 | Ui | |
shade5 | Ui | |
shade6 | Vordergrundtext | |
shade7 | Vordergrundtext |
*Die konventionelle Farbe wird für die Konsistenz mit ANSI -Farbnamen in Terminalthemen vorgeschlagen, ist jedoch keine schwierige Anforderung.
Sehen Sie die Web -Benutzeroberfläche des themer für eine visuellere Darstellung der Farbzuordnungen.
Template s 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 ; (Nur für theer.dev.)
| Name | Dunkle Vorschau | Lichtvorschau |
|---|---|---|
| Jamstacker | (nur dunkel) | |
| Victor Mono | ||
| Future Pro |
| Name | Dunkle Vorschau | Lichtvorschau |
|---|---|---|
default | ||
finger-paint | ||
green-as-a-whistle | ||
monkey | ||
night-sky | (nur dunkel) | |
polar-ice | ||
right-in-the-teals | ||
shoulder-pads |
| Name | Dunkle Vorschau | Lichtvorschau |
|---|---|---|
dracula | (nur dunkel) | |
github-universe | (nur dunkel) | |
lucid | ||
mojave | ||
nova | (nur dunkel) | |
one | ||
rivet | ||
seti | (nur dunkel) | |
solarized |
alacrittycmdconemuhyperitermkittykonsoleterminalterminatorwarpwindows-terminalbbeditemacssublime-textvim-lightlinevimvisual-studiovs-codexcodealfredbravechromecssfirefox-addonfirefox-colorkde-plasma-colorskeypirinhaprismsketch-palettesslackwoxxresources Sehen Sie die Web -Benutzeroberfläche des themer für Wallpaper -Vorschau.
wallpaper-block-wavewallpaper-burstwallpaper-circuitswallpaper-diamondswallpaper-dot-gridwallpaper-octagonwallpaper-shirtswallpaper-triangleswallpaper-trianglify themer ist von Trevordmiller/Nova und Chriskempson/Base16 inspiriert.
Konzeptionell ist themer Base16 sehr ähnlich, aber:
Anweisungen zum Beitrag zum themer finden Sie unter dem Verhaltenskodex von und dem themer .
themer auf GitHubthemer
