themer

พวกเขา

themer ใช้ชุดสีและสร้างธีมตัวแก้ไขธีมเทอร์มินัลธีมสำหรับแอพอื่น ๆ และวอลเปเปอร์เดสก์ท็อป

สารบัญ

• เริ่มต้น
• เอกสาร CLI
  • การติดตั้ง
  • การใช้งาน
  • ตัวอย่างเวิร์กโฟลว์: การรวม dotfiles
  • ตัวอย่างเวิร์กโฟลว์: NPX
  • ตัวอย่างเวิร์กโฟลว์: การใช้พื้นฐาน 12 รูปแบบกับ Themer
• เอกสาร API
  • การติดตั้ง
  • ส่วนต่อประสาน
  • สร้าง ColorSet conctic
    • การแมปสี
  • สร้าง Template ที่กำหนดเอง s
• ชุดสี The Mer
  • ชุดสีพรีเมี่ยม
  • ชุดสีดั้งเดิม
  • พอร์ตจากธีมบุคคลที่สาม
• เทมเพลต The Mer
  • อาคารผู้โดยสาร
  • บรรณาธิการ/ides
  • แอพอื่น ๆ
  • วอลเปเปอร์
• ศิลปะก่อนหน้านี้
• การบริจาค
• ขั้นตอนต่อไป
  • เข้าร่วมชุมชน
  • สนับสนุน themer

เริ่มต้น

มีหลายวิธีในการเพิ่มระดับการตั้งค่าการพัฒนาของคุณด้วย themer :

1. อินเทอร์เฟซผู้ใช้กราฟิกบนเว็บ themer มีเว็บแอปพลิเคชันแบบก้าวหน้าอย่างเป็นทางการตั้งอยู่ที่ Themer.dev
2. อินเทอร์เฟซบรรทัดคำสั่ง themer สามารถใช้ในการสร้างธีมบน CLI ดูเอกสาร CLI ด้านล่าง
3. อินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน themer เปิดเผย JavaScript API (สมบูรณ์ด้วยคำจำกัดความประเภท typeScript) สำหรับการใช้โปรแกรม ดูเอกสาร API ด้านล่าง

การเปรียบเทียบคุณสมบัติ:

	เว็บ UI	CLI/API
ตัวอย่างทันที
ชุดสีพรีเมี่ยม
รูปแบบสีที่รองรับ	รูปแบบ CSS ใด ๆ	hex เท่านั้น
รูปแบบเอาต์พุตวอลล์เปเปอร์	PNG + SVG	SVG เท่านั้น
การรวม dotfiles ไร้รอยต่อ

เอกสาร CLI

ในฐานะที่เป็น V5, themer ถูกแจกจ่ายเป็นแพ็คเกจ Typescript/JavaScript เดียวที่มีชุดสีและเทมเพลตทั้งหมดในตัวเพื่อความสะดวกในการใช้งาน-แต่ยังคงรองรับการใช้ชุดสีหรือเทมเพลตที่กำหนดเอง

การติดตั้ง

ติดตั้ง themer จาก NPM ด้วย JavaScript Package Manager ที่คุณเลือก

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 เกี่ยวกับวิธีการติดตั้งจะถูกเขียนลงในไดเรกทอรีเอาต์พุต

ตัวอย่างเวิร์กโฟลว์: การรวม dotfiles

สมมติว่าคุณต้องการสร้างธีม 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/ Folder สำหรับไฟล์ที่สร้างขึ้นของคุณ นี่คือผลลัพธ์:

ตัวอย่างเวิร์กโฟลว์: NPX

คำสั่งนี้จะสร้างธีม VIM และวอลล์เปเปอร์คลื่นบล็อกโดยใช้ชุดสีเริ่มต้นของ themer และใส่ไว้ในโฟลเดอร์ที่เรียกว่า output :

npx themer -c default -t vim -t wallpaper-block-wave -o output

ตัวอย่างเวิร์กโฟลว์: การใช้พื้นฐาน 12 รูปแบบกับ Themer

ในสถานที่ของชุดสี Themer คุณยังสามารถจัดเตรียมไฟล์ฐาน YAML ฐานฐาน themer ได้

 themer --color-set path/to/base16-scheme.yml ...

อ้างถึงพื้นที่เก็บข้อมูลฐาน 16 สำหรับรายการฐาน 12 แผน

เอกสาร API

themer จัดส่งด้วย JavaScript API (พร้อมคำจำกัดความประเภท TypeScript) สำหรับใช้ในการสร้างชุดรูปแบบแบบโปรแกรม

การติดตั้ง

npm install themer

ส่วนต่อประสาน

การส่งออกเริ่มต้นของ themer เป็นฟังก์ชั่น Async Generator ที่ใช้สามอาร์กิวเมนต์:

1. อาร์เรย์ของวัตถุ ColorSet หรือตัวระบุสตริงของชุดสีในตัวของ themer
2. อาร์เรย์ของวัตถุ Template หรือตัวระบุสตริงของเทมเพลตในตัวของ themer
3. วัตถุ RenderOptions ที่ใช้เพื่อระบุความละเอียดของภาพวอลล์เปเปอร์ที่ส่งออก
4. (ไม่บังคับ) ฟังก์ชั่น OutputFileTransform Async Generator ที่แปลงไฟล์ที่สร้างโดยเทมเพลตที่ให้ไว้ ฟังก์ชั่นนี้ทำงานระหว่างฟังก์ render น renderInstructions ของเทมเพลตแต่ละรายการ

วัตถุที่ให้โดยเครื่องกำเนิดคือ OutputFile S หรือประเภทที่ได้จาก 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 conctic

 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 ;

เคล็ดลับ PRO: คุณสามารถใช้ Web UI ของ themer เพื่อเลือกสีของคุณได้ง่ายขึ้นจากนั้นคลิกปุ่ม "ดาวน์โหลด" เพื่อสร้างไฟล์ colors.js ในรูปแบบที่ถูกต้อง ด้วยเว็บ UI คุณสามารถป้อนรูปแบบสี CSS ที่ถูกต้อง (คำหลัก, HSL, RGB ฯลฯ ) และจะแปลงสีเป็น Hex ให้คุณโดยอัตโนมัติ

การแมปสี

เพื่อช่วยให้คุณเลือกสีสำหรับชุดสีของคุณเองนี่เป็นเทมเพลต themer ส่วนใหญ่ที่จะใช้สีของคุณ:

คีย์สี	การใช้งานทั่วไป	สีธรรมดา*
accent0	ข้อผิดพลาดการลบ VCS	สีแดง
accent1	ไวยากรณ์	ส้ม
accent2	คำเตือนการปรับเปลี่ยน VCS	สีเหลือง
accent3	ความสำเร็จการเพิ่ม VCS	สีเขียว
accent4	ไวยากรณ์	สีฟ้า
accent5	ไวยากรณ์	สีฟ้า
accent6	ไวยากรณ์, Caret/เคอร์เซอร์
accent7	ไวยากรณ์พิเศษ	สีม่วงแดง
shade0	สีพื้นหลัง
shade1	UI
shade2	UI การเลือกข้อความ
shade3	UI, รหัสความคิดเห็น
shade4	UI
shade5	UI
shade6	ข้อความเบื้องหน้า
shade7	ข้อความเบื้องหน้า

*แนะนำให้ใช้สีทั่วไปเพื่อความสอดคล้องกับชื่อสี ANSI ในธีมเทอร์มินัล แต่ไม่ใช่ความต้องการที่ยาก

ดูเว็บ UI ของ 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 ; 

ชุดสี The Mer

ชุดสีพรีเมี่ยม

(มีเฉพาะใน Themer.dev.)

ชื่อ	ตัวอย่างมืด	ตัวอย่างแสง
ผู้ใช้งาน		(มืดเท่านั้น)
วิกเตอร์โมโน
Future 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

เทมเพลต The Mer

อาคารผู้โดยสาร

• alacritty
• cmd
• conemu
• hyper
• iterm
• kitty
• konsole
• terminal
• terminator
• warp
• windows-terminal

บรรณาธิการ/ides

• bbedit
• emacs
• sublime-text
• vim-lightline
• vim
• visual-studio
• vs-code
• xcode

แอพอื่น ๆ

• alfred
• brave
• chrome
• css
• firefox-addon
• firefox-color
• kde-plasma-colors
• keypirinha
• prism
• sketch-palettes
• slack
• wox
• xresources

วอลเปเปอร์

ดูเว็บ UI ของ themer สำหรับตัวอย่างวอลล์เปเปอร์

• wallpaper-block-wave
• wallpaper-burst
• wallpaper-circuits
• wallpaper-diamonds
• wallpaper-dot-grid
• wallpaper-octagon
• wallpaper-shirts
• wallpaper-triangles
• wallpaper-trianglify

ศิลปะก่อนหน้านี้

themer ได้รับแรงบันดาลใจจาก Trevordmiller/Nova และ Chriskempson/Base16

แนวคิดเรื่อง themer คล้ายกับ Base16 มาก แต่::

1. มันเบากว่าและใช้งานง่ายกว่า
2. มันสามารถขยายได้ง่ายขึ้นด้วยชุดสีและเทมเพลตของคุณเอง
3. มันรวมดีขึ้นกับ dotfiles ของคุณโดยเฉพาะอย่างยิ่งถ้าคุณควบคุมเวอร์ชัน

การบริจาค

สำหรับคำแนะนำเกี่ยวกับวิธีการมีส่วนร่วมกับ themer ให้ดูที่จรรยาบรรณของ MD และ themer

ขั้นตอนต่อไป

เข้าร่วมชุมชน

• ️ดาว themer บน GitHub
• - ติดตาม @TheMer บน mastodon
• - เข้าร่วมจดหมายข่าว

สนับสนุน themer

• - ซื้อธีมพรีเมี่ยมจาก Themer.dev
• - สนับสนุน @themerdev github org