ตัวสร้างธีมของ Zed Editor

 (zed.dev)
1 คะแนน โดย GN⁺ 5 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Theme Builder ของ Zed ต้องเปิดบนเดสก์ท็อปหากต้องการใช้ความสามารถทั้งหมด และบนเว็บสามารถดูส่วนขยายธีมที่ใช้งานได้ผ่าน View Theme Extensions
  • หน้าจอแก้ไขประกอบด้วย Colors และ Syntax โดยสีแบ่งออกเป็นหลายหมวด เช่น Surface, Border, Text, Icon, Editor, Navigation, Terminal, Players เป็นต้น
  • ในหมวด Surface มีค่ารายละเอียดย่อยอย่าง Background, Surface Background, Elevated Surface Background, Panel Background โดย Background แสดงเป็น #3b414dff และ Surface Background แสดงเป็น #2f343eff
  • ค่าธีมบางส่วนไม่ได้เป็นโค้ดสีโดยตรง แต่ลิงก์ไปยังค่าอื่น โดย Elevated Surface Background และ Panel Background เชื่อมกับ surface.background ส่วน Panel Focused Border และ Pane Focused Border เชื่อมกับ border.focused
  • ในหน้าพรีวิวมีปุ่มการทำงานอย่าง Create New Theme, Reset, Import, Export และยังแสดงสถานะของตัวแก้ไข เช่น scheduler.tsx, catware.rs, การวินิจฉัย TypeScript/React, zed.dev — zsh, Version: 1.1.7, 9 Changes

ช่วงของสีที่แก้ไขได้

  • หมวดหมู่สีแบ่งเป็น Surface, Border, Text, Icon, Editor, Navigation, Element, Ghost Element, Drop Target, Tabs, Scrollbar, Minimap, Status, Version Control, Terminal, Players เป็นต้น
  • ในรายการ Surface จะเห็นค่ารายละเอียดย่อยอย่าง Background, Surface Background, Elevated Surface Background, Panel Background, Panel Focused Border, Panel Indent Guide, Panel Overlay Background, Pane Focused Border
  • มีทั้งค่าที่แสดงเป็นโค้ดสีโดยตรงและค่าที่เชื่อมกับค่าอื่น โดย Background แสดงเป็น #3b414dff และ Surface Background แสดงเป็น #2f343eff
  • Elevated Surface Background และ Panel Background เชื่อมกับ surface.background ส่วน Panel Focused Border และ Pane Focused Border เชื่อมกับ border.focused

ปุ่มการทำงานและสถานะพรีวิว

  • บนหน้าจอมีปุ่มจัดการธีมอย่าง Create New Theme, One / One Dark, Reset, Import, Export
  • ในพรีวิวธีมจะแสดงแท็บไฟล์อย่าง scheduler.tsx, catware.rs และสถานะรีโพซิทอรี zed.dev main/main
  • พรีวิวโค้ดเป็นตัวอย่าง TypeScript/React พร้อมการวินิจฉัย เช่น คำเตือนว่า couldHaveBeenAnEmail ไม่ได้ถูกใช้งาน, ข้อผิดพลาดชนิดข้อมูลที่กำหนด string ให้กับ number, ข้อเสนอให้ใช้ attendees แทน atendees, และการแจ้งว่า agendaItem สามารถประกาศเป็น const ได้
  • ในพรีวิวเทอร์มินัลจะแสดง zed.dev — zsh, Editor: Zed, Version: 1.1.7, Platform: macOS
  • ในพรีวิวการจัดการเวอร์ชันจะแสดง 9 Changes, Stage All, Tracked, Untracked, Fetch, Commit Tracked และข้อความคอมมิต Fixed the thing that broke the thing

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 5 시간 전
ความคิดเห็นจาก Hacker News

  • ดีใจมากที่มีฟีเจอร์แบบนี้ออกมา พยายามจะใช้ Zed อยู่หลายครั้ง แต่พวกรายละเอียดเล็กๆ ที่ดูเหมือนไม่สำคัญเกี่ยวกับ ธีม กลับรู้สึกว่าส่งผลมากพอสมควร
    ตัวอย่างเช่นใน https://imgur.com/a/ia2GCgg ด้านบนคือ VSCode ด้านล่างคือ Zed และทั้งคู่ใช้ธีมที่คล้ายกันกับ Svelte
    สีของวงเล็บมุม สีของคอมโพเนนต์ built-in ที่ขึ้นต้นด้วยตัวพิมพ์ใหญ่ สีของ boolean attribute รวมถึงสีของวงเล็บกับข้อความต่างกัน
    Inspector เป็นฟีเจอร์ที่เปลี่ยนเกมได้เลย และการที่คลิกเจาะเข้าไปยังองค์ประกอบเฉพาะจากพรีวิวที่ให้มานั้นมีประโยชน์มาก

    • ผมไม่ได้ใช้ Zed หรือ Svelte แต่หน้าจอนี้ดูเหมือนฝั่ง Zed จะขาด tree-sitter parser สำหรับ Svelte ไปนะ หลายเอดิเตอร์มี syntax highlight แบบ regex พื้นฐานให้หลายภาษา แล้วค่อยเพิ่ม highlight ที่ล้ำกว่าผ่าน extension ได้
      ถ้าเอดิเตอร์ใช้ Language Server Protocol ก็อาจรับ semantic highlighting จาก language server ได้ด้วย
      ลองค้นดูแล้วเจอ extension ตัวหนึ่ง ไม่แน่ใจว่าได้ลองหรือยัง: https://zed.dev/extensions/svelte
    • นั่นใกล้เคียงกับ syntax highlighting มากกว่าธีม ผมไม่ค่อยเข้าใจว่าเกี่ยวกับธีมตรงไหน
      แม้จะไม่ได้ใช้ Zed แต่ดูจาก https://zed.dev/docs/reference/all-settings#colorize-brackets เหมือนว่าสามารถตั้งค่าพวกนี้ได้
    • เผื่อเป็นข้อมูล การ แปลงธีม ระหว่างแอป/IDE ให้ LLM ทำ ผลออกมาค่อนข้างดีทีเดียว

  • ในที่สุดก็ทำสิ่งที่เข้าใกล้ คอนทราสต์สูง จริงๆ ได้อย่างใช้งานได้จริง แทนที่จะเป็นแบบ “เกือบคอนทราสต์สูง” เหมือนธีมที่มีมาให้ก่อนหน้านี้ เป็นการเปลี่ยนเล็กๆ แต่ Zed ยังปรับรายละเอียดได้ดีต่อเนื่อง จนหลังจากใช้ vim มา 15 ปี มันเปลี่ยนจาก “เอดิเตอร์ที่น่าสนใจ” เป็น “เอดิเตอร์ที่ชอบ” สำหรับผมแล้ว
    follow mode ของ Git ดีมากเป็นพิเศษในช่วงที่การใช้ LLM ในงานพัฒนามีสัดส่วนมากขึ้น และก็ดีใจที่ทีมยังคงปรับปรุงรายละเอียดเล็กๆ แบบนี้ต่อไป

  • สำหรับผม Zed แทบจะมาถึงจุดนั้นแล้ว Theme Builder ดีและใช้ง่ายมาก จนสร้างธีมของตัวเองได้ภายในไม่กี่นาที
    สี syntax โดยรวมเกือบดีแล้วแต่ยังไม่สุด และในฐานะคนใช้ C/C++ ก็ยังมีจุดที่น่าเสียดาย
    การปรับภาพเล็กๆ อย่างความสูงบรรทัดของข้อความใน UI ยังตั้งค่าได้ไม่พอ มีตัวเลือกแค่สองแบบ
    การเลื่อนหน้าจอควรมีตัวเลือกแบบ smooth ไม่มีเหตุผลให้ปิดกั้น และก็ดูเหมือนจะเพิ่มได้ไม่ยาก โดยเฉพาะบนจอ 240Hz เวลาขยับดูโค้ดแล้วสบายตากว่า
    ประสบการณ์การแก้ไขโดยรวมดี เปิดเร็ว ไม่แครช ตอบสนองไว และใช้หน่วยความจำได้โอเค

    • ใช้ Mos ก็ได้ ข้อดีคือ smooth scrolling ทำงานเหมือนกันในทุกแอป ความเร็วกับอัตราเร่งก็สม่ำเสมอด้วย
      https://mos.caldis.me/
    • เพิ่งลองใช้ แล้วภายใน 5 นาทีเจอบั๊กใหญ่ UI ค้างทั้งชุด ตอนแรกคิดว่าแค่เลื่อนไม่ได้ แต่พอลองทำซ้ำดูอีกที กลายเป็นว่า UI ทั้งหมดค้าง
      พอสลับแอปแล้วมันกลับมาทำงานต่อได้ ผมไม่เคยเห็นอาการแบบนี้ในแอปอื่น
      พอจะไปรายงานบั๊ก ก็เจอฟอร์มที่ยาวกว่ายื่นภาษีอีก รู้สึกว่าการรายงานบั๊กน่าจะเป็นงานที่ AI เหมาะทั้งตอนรับข้อมูลและตอนคัดแยกหลังจากนั้น
    • ถ้าใช้ trackpad การเลื่อนจะลื่นสมบูรณ์แบบ สำหรับผม เมาส์ล้อคลิก เป็นเทคโนโลยีที่เก่าไปแล้วสำหรับการเลื่อน
      แม้ตอนใช้ Windows ผมก็ยังใช้ Magic Trackpad ด้วยมือซ้าย เพื่อให้ยังได้การเลื่อนแบบแอนะล็อกที่ลื่นไหล

  • ฟังดูอาจเป็นเหตุผลตื้นๆ แต่หนึ่งในเหตุผลใหญ่ที่สุดที่ทำให้ผมใช้ Zed ไม่ได้คือมันไม่มี ธีมมืดเริ่มต้น ที่ดีพอ
    ธีมเริ่มต้นทั้งหมดคอนทราสต์ต่ำและเป็นเทาบนเทา ทำให้แม้ตัวเอดิเตอร์จะยอดเยี่ยม แต่ประสบการณ์ใช้งานกลับดูหม่นและชวนให้ไม่อยากใช้

    • ถ้าจะปรับคอนทราสต์ของทุก dark theme ให้เพิ่มการตั้งค่านี้:
      "experimental.theme_overrides": {
      "background": "#111",
      "panel.background": "#111",
      "text": "#eee",
      "text.muted": "#ccc",
      "title_bar.background": "#111",
      "tab_bar.background": "#111",
      "toolbar.background": "#111",
      "status_bar.background": "#111",
      "element.selected": "#333",
      "editor.background": "#000",
      "editor.gutter.background": "#000"
      }
    • ไม่ใช่ปัญหาเฉพาะของ Zed ด้วย เพราะ dark theme โดยทั่วไปมักเป็นคอนทราสต์ต่ำแบบเทาบนเทา
      ปกติผมจะหา dark theme ที่หน้าตาดีสักตัว แล้วทำเวอร์ชันปรับแต่งเองโดยทำพื้นหลังให้มืดขึ้นและสีตัวอักษรให้สว่างขึ้น
      ตอนนี้คงถึงเวลาปล่อยธีมมืดคอนทราสต์สูงให้สาธารณะแล้ว แทนที่จะเก็บไว้แก้ใช้คนเดียว
    • อาจฟังดูตื้นยิ่งกว่าเดิม แต่เหตุผลที่ผมยังอยู่กับ emacs ก็เพราะ modus-themes นี่แหละ ถ้าโชคดีก็พอจะหา theme ที่ใช้ได้พอประมาณในเอดิเตอร์หรือ IDE ที่อยากใช้ แต่การหาธีมสว่างคอนทราสต์สูงที่ดีนั้นแทบเป็นไปไม่ได้เลย
    • ถ้าค้นหาธีมในหน้าต่าง Extensions ของ Zed ก็น่าจะติดตั้ง ธีมมืดคอนทราสต์สูง ที่ใช้ได้ดีภายใน 1 นาที
      แต่ก็เห็นด้วยว่าไม่มีเหตุผลอะไรที่ไม่ใส่ธีมมืดคอนทราสต์สูงดีๆ มาสักไม่กี่ตัวเป็นค่าเริ่มต้น
    • ช่วงหลังธีมที่ผมชอบที่สุดและทำออกมาได้สมบูรณ์ที่สุดคืออันนี้: https://zed.dev/extensions/amp-theme

  • ถ้าใช้ Omarchy อยู่ ในอัปเดต 3.8 มี dynamic theme สำหรับ Zed มาด้วย ค่อนข้างเท่เลย: https://github.com/APS6/omazed

    • มันเท่อยู่หรอก แค่เสียดายที่ DDH เป็นคนแบบนั้น เลยทำให้ผมไม่อยากใช้
    • DankShell ก็มีฟีเจอร์นี้ผ่าน Matugen เช่นกัน: https://danklinux.com/docs/dankmaterialshell/application-themes

  • ดีที่ได้เห็น Zed พัฒนาไปเรื่อยๆ แต่รู้สึกว่ามันผูกกับ บัญชีผู้ใช้ มากเกินไป มีปุ่ม “Sign In” เด่นๆ แล้วก็โฆษณาอย่าง “Try our new agentic...”
    ผมเข้าใจนะว่าต้องหารายได้ แต่แรงจูงใจที่เริ่มต้นแบบนี้บ่อยครั้งเกินไปที่พาแอปพลิเคชันไปในทิศทางที่แย่ลง
    ถัดไปจะเป็นโฆษณาในช่องค้นหาไฟล์หรือเปล่า? Ubuntu ก็เคยพลาดแนวนี้จนโดนชุมชนต่อต้านมาแล้ว ประมาณว่า “LQQKING for something? try new ai search by blah blah corp!”
    เพราะงั้นต่อให้จะใช้เวลาปรับเอดิเตอร์กับธีมไปมากแค่ไหน ก็ยังรู้สึกลำบากที่จะลงทุน เพราะมันอาจหักหลังเราในภายหลังได้ VSCode ก็เดินเส้นทางนี้ไปแล้ว และถึงขั้นให้เซ็น commit message ด้วย Copilot

  • ผมพยายามจะทำสีแบบ Soda Dark / Sunburst ที่เคยชอบใน Sublime Text ให้กลับมา แต่เป็นงานแบบซิซิฟัสจริงๆ
    สุดท้ายเลยเอาสกรีนช็อตไม่กี่ภาพกับค่าตั้งต้น ST4 เดิมใส่เข้าไปใน AI Studio แล้วก็ได้ผลที่พอใช้ได้ แต่ไม่ใช่การคัดลอกแบบเป๊ะๆ อยู่ดี ก็สมเหตุสมผลเพราะแต่ละเอดิเตอร์มี semantic token ไม่เหมือนกัน

    • ถ้าเอา JSON definition ของธีม Sublime Text ให้ LLM แล้วให้มันแปลงเป็นสเปกธีมของ Zed ก็น่าจะแก้ได้ค่อนข้างง่าย ไม่ต้องใช้สกรีนช็อตเลย

  • ว้าว ดีเลย ผมเคยลอง Zed แต่ทำโทนสีรวมให้เหมือน cobalt แบบคลาสสิกของ gedit/gtksourceview ไม่ได้เลย
    ถ้ามีใครทำธีมแบบนั้นให้ ผมยินดีจ่ายเงินจริงจังในราคาที่เหมาะสม

    • อันที่จริงผมเคยลองให้โมเดล AI สร้างธีมแบบนั้นแล้ว แต่ทำไม่สำเร็จเลย มันสร้างผลลัพธ์ผิดๆ ออกมาตลอด
      ถ้าทำให้มันเวิร์กได้ ผมสนใจนะ

  • สงสัยว่าใน Zed มีแฟล็กประมาณ “ที่บริษัทอนุญาตแค่ GitHub Copilot เท่านั้น และไม่ต้องการ autocomplete ฟรีหรือฟีเจอร์ที่ส่งโค้ดไปยังบุคคลที่สาม” หรือเปล่า

    • ทำได้ ปิด Zed AI แล้วเชื่อมต่อ GitHub Copilot ผ่าน LLM Providers UI ได้
    • https://zed.dev/business
    • ถ้าอยากใช้ Zeta ซึ่งเป็น predictive AI ของ Zed เพื่อรับสิทธิ์ทำนายฟรี 2000 ครั้ง ต้องสร้างบัญชี Zed และล็อกอิน
      https://zed.dev/docs/ai/edit-prediction