Zed Editor テーマビルダー

 (zed.dev)
1 ポイント 投稿者 GN⁺ 5 시간 전 | 1件のコメント | WhatsAppで共有
  • Zed の Theme Builder は、すべての機能を使うにはデスクトップで開く必要があり、Web では 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 に代入する型エラー、atendees ではなく attendees を使う提案、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に似たテーマを使っている
    山かっこ<>の色、大文字で始まる組み込みコンポーネントの色、ブール属性の色、かっことテキストの色が違う
    インスペクタはゲームチェンジャーな機能で、用意されたプレビューから特定の要素をクリックして入っていける点がとても便利

    • ZedもSvelteも使ってはいないが、この画面はZed側にSvelte用のtree-sitterパーサーが欠けているように見える。多くのエディタは複数言語に基本的な正規表現ベースのハイライトを提供し、拡張でより高度なハイライトを追加できる
      エディタがLanguage Server Protocolを使っているなら、言語サーバーが提供するセマンティックハイライトも受け取れる
      検索してみると拡張が1つ出てくるが、これを試したか気になる: https://zed.dev/extensions/svelte
    • それはテーマというより構文ハイライトに近い。これがテーマとどう関係するのかよく分からない
      Zedユーザーではないが、https://zed.dev/docs/reference/all-settings#colorize-brackets を見ると、こういうことは設定できそうだ
    • 参考までに、アプリ/IDE間のテーマ変換はLLMに任せたときかなり良い結果だった

  • ついに、既存の提供テーマのような「ほぼ高コントラスト」ではなく、本当に高コントラストに近いものを現実的に作れるようになった。小さな変化だけど、Zedは細部を着実に詰め続けていて、vimを15年使ったあとでも「興味深いエディタ」から「好みのエディタ」になった
    Gitのfollow modeは開発でのLLM利用比率が高まる流れの中で特に良かったし、チームがこうした小さな部分を継続的に改善しているのはうれしい

  • Zedは自分にとってほぼ完成形に近い。テーマビルダーは良くできていて使いやすく、数分で自分のテーマを作れた
    構文の色はほぼ良いがまだ足りないところがあり、C/C++を使う立場では物足りなさがある
    UIテキストの行の高さのような細かな見た目の調整は設定が十分でなく、選択肢が2つしかない
    スクロールにはスムーズなオプションがあるべきだ。防ぐ理由もないし追加も簡単そうで、特に240Hzモニターでコードを移動するときは目が楽になる
    編集体験そのものは良く、起動の速さ、クラッシュのなさ、反応性、メモリ使用量もすべて問題ない

    • Mosを使えばよい。スムーズスクロールがすべてのアプリで同じように動くという利点もある。速度や加速度も統一される
      https://mos.caldis.me/
    • 初めて使ってみたが、5分で大きなバグに遭遇して、UIが完全に固まった。最初はスクロールだけ止まったのかと思ったが、再現してみるとUI全体が固まっていた
      アプリを切り替えるとまた動く。他のアプリでこんな挙動は見たことがない
      バグ報告をしようとしたら、税務申告書より長いフォームが出てきた。バグ報告は入力もその後の分類も、どちらもAIが得意そうな領域だと思う
    • トラックパッドを使えばスクロールは完全にスムーズ。個人的にはクリックホイールマウスはスクロール用途としては古い技術だと思う
      Windowsを使うときも左手でMagic Trackpadを使っていて、今でも滑らかなアナログスクロールを使っている

  • 浅い理由に聞こえるかもしれないが、Zedを使えない最大の理由の1つは、まともなデフォルトのダークテーマがないことだ
    デフォルトテーマはどれもコントラストが低く、グレーの上にグレーという感じで、エディタ自体が優れていても使用体験がくすんで拒否感のあるものに感じられる

    • どんなダークテーマでもコントラストを直したいなら、この設定を追加すればよい:
      "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だけの問題ではなく、ダークテーマ全般がグレーの上にグレーという低コントラストになりがちだ
      たいていは見た目の良いダークテーマを見つけてから、背景色をより暗く、前景色をより明るくしたカスタム版を作っている
      もう自分だけで直して使うのではなく、高コントラストのダークテーマを公開する時期なのかもしれない
    • さらに浅く聞こえるかもしれないが、emacsに居続けている理由はmodus-themesだ。運が良ければ使いたいエディタやIDEでそこそこ良いテーマを見つけられるが、優れた高コントラストのライトテーマを見つけるのはほぼ不可能だ
    • ZedのExtensionsウィンドウでテーマを検索すれば、まともな高コントラストのダークテーマを1分以内にインストールできるはずだ
      ただし、デフォルトで良い高コントラストのダークテーマがいくつか含まれていてもいいはずだ、という点には同意する
    • 最近でいちばん気に入っていて完成度も高いテーマ: https://zed.dev/extensions/amp-theme

  • Omarchyを使っているなら、3.8アップデートにZed向けの動的テーマが含まれている。かなりかっこいい: https://github.com/APS6/omazed

  • Zedの進化を見るのはうれしいが、ユーザーアカウントに結び付けすぎている感じがする。目立つ「Sign In」ボタンや「Try our new agentic...」のような宣伝がある
    収益化が必要なのは理解するが、こういう形で始まった誘因は、あまりにもしばしばアプリケーションを壊す方向に流れていく
    次はファイル検索の中に広告でも入るのか？ Ubuntuもこういうやり方で失敗してコミュニティの反感を買った。「LQQKING for something? try new ai search by blah blah corp!」みたいな感じだ
    だからエディタやテーマを時間をかけて調整しても、後で裏切られるかもしれないと思うと投資しにくい。VSCodeはすでにこの道を進んでいて、コミットメッセージをCopilotで署名させるようになった

  • Sublime Textで気に入っていたSoda Dark / Sunburstの色の組み合わせを再現しようとしたが、本当にシーシュポス的な作業だった
    結局、スクリーンショット数枚と元のST4設定をAI Studioに入れて、使える結果は出たが正確な再現ではなかった。エディタごとにセマンティックトークンが違うので当然でもある

    • Sublime TextテーマのJSON定義をLLMに渡して、Zedテーマ仕様へ変換させればかなり簡単に解決できそうだ。スクリーンショットは不要

  • わあ、いいね。Zedを使ってみたが、全体の配色をgedit/gtksourceviewの古典的なcobaltのようにはできなかった
    誰かがそういうテーマを作ってくれるなら、妥当な金額を本気で払う気がある

    • 実際にAIモデルでそういうテーマを作らせてみたが、うまくできなかった。間違った結果ばかり生成していた
      これがちゃんと動くようになるなら興味がある

  • Zedに「会社ではたとえばGitHub Copilotだけを許可し、無料の自動補完やコードを第三者へ送る機能は望まない」といったフラグがあるのか気になる