Pembuat tema Zed Editor

 (zed.dev)
1 poin oleh GN⁺ 5 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Theme Builder milik Zed harus dibuka di desktop untuk menggunakan seluruh fitur, dan di web Anda dapat melihat-lihat ekstensi tema yang tersedia melalui View Theme Extensions
  • Layar editor terdiri dari Colors dan Syntax, dan warna dibagi ke dalam beberapa kategori seperti Surface, Border, Text, Icon, Editor, Navigation, Terminal, Players, dan lainnya
  • Kategori Surface memiliki nilai detail seperti Background, Surface Background, Elevated Surface Background, dan Panel Background; Background ditampilkan sebagai #3b414dff, sedangkan Surface Background sebagai #2f343eff
  • Beberapa nilai tema tidak menggunakan kode warna secara langsung, melainkan terhubung ke nilai lain; Elevated Surface Background dan Panel Background terhubung ke surface.background, sedangkan Panel Focused Border dan Pane Focused Border terhubung ke border.focused
  • Pratinjau menampilkan tombol tindakan seperti Create New Theme, Reset, Import, Export, serta status editor seperti scheduler.tsx, catware.rs, diagnosis TypeScript/React, zed.dev — zsh, Version: 1.1.7, dan 9 Changes

Rentang warna yang dapat diedit

  • Kategori warna dibagi menjadi Surface, Border, Text, Icon, Editor, Navigation, Element, Ghost Element, Drop Target, Tabs, Scrollbar, Minimap, Status, Version Control, Terminal, Players, dan lainnya
  • Bagian Surface menampilkan nilai detail seperti Background, Surface Background, Elevated Surface Background, Panel Background, Panel Focused Border, Panel Indent Guide, Panel Overlay Background, dan Pane Focused Border
  • Ada nilai yang ditampilkan sebagai kode warna langsung dan ada juga yang terhubung ke nilai lain; Background ditampilkan sebagai #3b414dff, sedangkan Surface Background sebagai #2f343eff
  • Elevated Surface Background dan Panel Background terhubung ke surface.background, sedangkan Panel Focused Border dan Pane Focused Border terhubung ke border.focused

Tombol tindakan dan status pratinjau

  • Layar menampilkan tombol pekerjaan tema seperti Create New Theme, One / One Dark, Reset, Import, dan Export
  • Pratinjau tema menampilkan tab file seperti scheduler.tsx dan catware.rs, serta status repositori zed.dev main/main
  • Pratinjau kode berupa contoh TypeScript/React, dengan diagnosis berupa peringatan variabel couldHaveBeenAnEmail yang tidak digunakan, kesalahan tipe saat menetapkan string ke number, saran menggunakan attendees alih-alih atendees, serta diagnosis bahwa agendaItem dapat dideklarasikan sebagai const
  • Pratinjau terminal menampilkan zed.dev — zsh, Editor: Zed, Version: 1.1.7, dan Platform: macOS
  • Pratinjau version control menampilkan 9 Changes, Stage All, Tracked, Untracked, Fetch, Commit Tracked, serta pesan commit Fixed the thing that broke the thing

Bacaan terkait

1 komentar

 
GN⁺ 5 jam lalu
Komentar Hacker News

  • Senang sekali fitur seperti ini akhirnya hadir. Saya sudah beberapa kali mencoba memakai Zed, tetapi detail terkait tema yang tampaknya sepele terasa cukup besar.
    Misalnya di https://imgur.com/a/ia2GCgg, yang atas adalah VSCode, yang bawah Zed, dan keduanya memakai tema yang mirip untuk Svelte.
    Warna tanda kurung siku, warna komponen bawaan yang diawali huruf besar, warna atribut boolean, serta warna kurung dan teks berbeda.
    Inspector adalah fitur yang benar-benar mengubah permainan, dan sangat berguna karena di pratinjau yang disediakan kita bisa mengklik elemen tertentu lalu masuk ke sana.

    • Saya tidak memakai Zed maupun Svelte, tetapi tampilan ini terlihat seperti Zed tidak memiliki parser tree-sitter untuk Svelte. Banyak editor menyediakan penyorotan berbasis regex secara bawaan untuk berbagai bahasa, lalu menambahkan penyorotan yang lebih canggih lewat ekstensi.
      Jika editornya memakai Language Server Protocol, editor juga bisa mendapatkan penyorotan semantik yang disediakan language server.
      Saya cari dan menemukan sebuah ekstensi; penasaran apakah ini sudah dicoba: https://zed.dev/extensions/svelte
    • Itu lebih dekat ke syntax highlighting daripada tema. Saya kurang paham apa hubungannya dengan tema.
      Saya bukan pengguna Zed, tetapi melihat https://zed.dev/docs/reference/all-settings#colorize-brackets, sepertinya hal seperti ini bisa diatur.
    • Sebagai catatan, konversi tema antar aplikasi/IDE memberi hasil yang cukup bagus saat diserahkan ke LLM.

  • Akhirnya kini jadi realistis untuk membuat sesuatu yang benar-benar mendekati kontras tinggi, bukan seperti tema bawaan lama yang hanya “hampir kontras tinggi”. Perubahan kecil, tetapi Zed terus merapikan detail-detail seperti ini, jadi setelah 15 tahun memakai vim, Zed berubah dari “editor yang menarik” menjadi “editor pilihan saya”.
    Follow mode di Git juga sangat bagus, terutama saat penggunaan LLM dalam pengembangan makin besar, dan menyenangkan melihat timnya terus memperbaiki hal-hal kecil seperti ini.

  • Buat saya, Zed sudah hampir sampai. Theme builder-nya bagus dan mudah dipakai, jadi dalam beberapa menit saya sudah bisa membuat tema sendiri.
    Warna sintaks hampir bagus, tetapi masih kurang, dan dari sudut pandang pengguna C/C++ masih ada yang disayangkan.
    Penyesuaian visual kecil seperti tinggi baris teks UI belum punya pengaturan yang memadai, opsinya hanya dua.
    Scroll seharusnya punya opsi yang halus. Tidak ada alasan untuk mencegahnya, dan mestinya juga mudah ditambahkan; terutama di monitor 240Hz, mata terasa lebih nyaman saat memindahkan kode.
    Pengalaman mengeditnya sendiri bagus: startup cepat, tidak crash, responsif, dan pemakaian memorinya juga oke.

    • Tinggal pakai Mos. Keuntungannya, smooth scrolling bekerja dengan cara yang sama di semua aplikasi. Kecepatan dan akselerasinya juga konsisten.
      https://mos.caldis.me/
    • Saya baru mencobanya, dan dalam 5 menit muncul bug besar, UI benar-benar membeku. Awalnya saya kira hanya scrolling yang macet, tetapi setelah dicoba lagi ternyata seluruh UI yang macet.
      Begitu pindah aplikasi, semuanya berjalan lagi. Saya belum pernah melihat perilaku seperti ini di aplikasi lain.
      Saat mau melaporkan bug, muncul formulir yang lebih panjang daripada surat laporan pajak. Pelaporan bug terasa seperti area yang sangat cocok untuk AI, baik saat input maupun klasifikasi sesudahnya.
    • Kalau memakai trackpad, scrolling benar-benar mulus. Secara pribadi saya menganggap mouse click wheel sudah teknologi usang untuk scrolling.
      Bahkan saat memakai Windows pun saya menggunakan Magic Trackpad dengan tangan kiri, jadi tetap bisa menikmati scrolling analog yang mulus.

  • Mungkin terdengar dangkal, tetapi salah satu alasan terbesar saya tidak bisa memakai Zed adalah karena tidak ada tema gelap bawaan yang layak.
    Semua tema bawaannya berkontras rendah, abu-abu di atas abu-abu, jadi meskipun editornya sendiri hebat, pengalaman memakainya terasa suram dan membuat enggan.

    • Untuk memperbaiki kontras di semua dark theme, cukup tambahkan pengaturan ini:
      "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"
      }
    • Ini bukan masalah Zed saja; tema gelap pada umumnya memang sering berkontras rendah, abu-abu di atas abu-abu.
      Biasanya saya mencari dark theme yang enak dilihat, lalu membuat versi kustom dengan warna latar yang lebih gelap dan warna depan yang lebih terang.
      Sepertinya sekarang saatnya saya merilis dark theme kontras tinggi alih-alih hanya memperbaikinya untuk dipakai sendiri.
    • Mungkin ini terdengar lebih dangkal lagi, tetapi alasan saya tetap bertahan di emacs adalah modus-themes. Kalau beruntung, kita masih bisa menemukan tema yang lumayan di editor atau IDE yang kita inginkan, tetapi menemukan light theme kontras tinggi yang bagus itu nyaris mustahil.
    • Jika Anda mencari tema di jendela Extensions Zed, Anda mungkin bisa memasang tema gelap kontras tinggi yang lumayan dalam waktu kurang dari 1 menit.
      Meski begitu, saya setuju tidak ada alasan untuk tidak menyertakan beberapa dark theme kontras tinggi yang bagus secara bawaan.
    • Ini tema yang belakangan paling saya suka dan juga paling matang: https://zed.dev/extensions/amp-theme

  • Jika memakai Omarchy, pembaruan 3.8 menyertakan tema dinamis untuk Zed. Cukup keren: https://github.com/APS6/omazed

  • Senang melihat perkembangan Zed, tetapi rasanya terlalu terikat pada akun pengguna. Ada tombol “Sign In” yang mencolok dan iklan seperti “Try our new agentic...”.
    Saya paham mereka harus menghasilkan uang, tetapi insentif yang dimulai seperti ini terlalu sering berakhir mengarah ke perusakan aplikasi.
    Langkah berikutnya apa, iklan di dalam pencarian file? Ubuntu pernah membuat kesalahan seperti ini dan memicu antipati komunitas. Sesuatu seperti, “LQQKING for something? try new ai search by blah blah corp!”
    Karena itu, meskipun editor dan tema bisa disetel dengan menghabiskan waktu, sulit untuk berinvestasi karena terasa bisa mengkhianati kita nanti. VSCode sudah menempuh jalan ini, dan commit message pun dibuat ditandatangani oleh Copilot.

  • Saya mencoba mereplikasi kombinasi warna Soda Dark / Sunburst yang saya sukai di Sublime Text, dan itu benar-benar pekerjaan seperti Sisifus.
    Pada akhirnya saya memasukkan beberapa tangkapan layar dan pengaturan ST4 asli ke AI Studio, lalu memang keluar hasil yang lumayan, tetapi bukan replika yang akurat. Ini juga wajar karena token semantik tiap editor berbeda.

    • Sepertinya ini bisa diselesaikan cukup mudah kalau definisi JSON tema Sublime Text diberikan ke LLM lalu diminta mengubahnya ke spesifikasi tema Zed. Tidak perlu tangkapan layar.

  • Wah, bagus. Saya pernah mencoba Zed, tetapi tidak bisa membuat keseluruhan skema warnanya seperti cobalt klasik dari gedit/gtksourceview.
    Kalau ada yang membuatkan tema seperti itu, saya sungguh bersedia membayar jumlah yang wajar.

    • Saya benar-benar sudah mencoba menyuruh model AI membuat tema seperti itu, tetapi gagal melakukannya dengan benar. Hasilnya terus salah.
      Kalau ini nanti bisa bekerja dengan baik, saya tertarik.

  • Saya penasaran apakah di Zed ada semacam flag seperti, “di kantor misalnya hanya GitHub Copilot yang diizinkan, dan kami tidak ingin autocompletion gratis atau fitur yang mengirim kode ke pihak ketiga”.