Zed Editor Theme Builder

 (zed.dev)
1 Punkte von GN⁺ 5 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Der Theme Builder von Zed muss auf dem Desktop geöffnet werden, um den vollen Funktionsumfang zu nutzen; im Web kann man unter View Theme Extensions verfügbare Theme-Erweiterungen durchsuchen
  • Die Bearbeitungsansicht besteht aus Colors und Syntax; die Farben sind in mehrere Kategorien unterteilt, darunter Surface, Border, Text, Icon, Editor, Navigation, Terminal und Players
  • Die Kategorie Surface enthält Detailwerte wie Background, Surface Background, Elevated Surface Background und Panel Background; Background wird als #3b414dff, Surface Background als #2f343eff angezeigt
  • Einige Theme-Werte sind nicht direkt Farbwerte, sondern mit anderen Werten verknüpft; Elevated Surface Background und Panel Background sind mit surface.background verbunden, Panel Focused Border und Pane Focused Border mit border.focused
  • In der Vorschau werden zusammen mit dem Editorstatus Aktionsbuttons wie Create New Theme, Reset, Import und Export sowie scheduler.tsx, catware.rs, TypeScript/React-Diagnosen, zed.dev — zsh, Version: 1.1.7 und 9 Changes angezeigt

Bearbeitbarer Farbbereich

  • Die Farbkategorien sind in Surface, Border, Text, Icon, Editor, Navigation, Element, Ghost Element, Drop Target, Tabs, Scrollbar, Minimap, Status, Version Control, Terminal und Players unterteilt
  • Unter Surface sind Detailwerte wie Background, Surface Background, Elevated Surface Background, Panel Background, Panel Focused Border, Panel Indent Guide, Panel Overlay Background und Pane Focused Border sichtbar
  • Es gibt sowohl Werte, die als direkte Farbcodes angezeigt werden, als auch Werte, die mit anderen Werten verknüpft sind; Background wird als #3b414dff, Surface Background als #2f343eff angezeigt
  • Elevated Surface Background und Panel Background sind mit surface.background verbunden, Panel Focused Border und Pane Focused Border mit border.focused

Aktionsbuttons und Vorschauzustand

  • Auf dem Bildschirm sind Theme-Aktionsbuttons wie Create New Theme, One / One Dark, Reset, Import und Export zu sehen
  • In der Theme-Vorschau werden Dateireiter wie scheduler.tsx und catware.rs sowie der Repository-Status zed.dev main/main angezeigt
  • Die Code-Vorschau ist ein TypeScript/React-Beispiel; zusammen angezeigt werden eine Warnung über das ungenutzte couldHaveBeenAnEmail, ein Typfehler beim Zuweisen von string zu number, ein Vorschlag, statt atendees attendees zu verwenden, sowie eine Diagnose, dass agendaItem als const deklariert werden kann
  • In der Terminal-Vorschau werden zed.dev — zsh, Editor: Zed, Version: 1.1.7 und Platform: macOS angezeigt
  • In der Versionsverwaltungs-Vorschau sind 9 Changes, Stage All, Tracked, Untracked, Fetch, Commit Tracked und die Commit-Nachricht Fixed the thing that broke the thing zu sehen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 5 시간 전
Hacker-News-Kommentare

  • Ich freue mich wirklich, dass es so eine Funktion gibt. Ich habe mehrfach versucht, Zed zu nutzen, aber diese scheinbar kleinen Theme-Details fielen doch ziemlich stark ins Gewicht.
    Zum Beispiel ist in https://imgur.com/a/ia2GCgg oben VSCode und unten Zed zu sehen, beide mit Svelte und einem ähnlichen Theme.
    Die Farbe der spitzen Klammern, die Farbe eingebauter Komponenten mit Großbuchstaben am Anfang, die Farbe boolescher Attribute sowie die Farben von Klammern und Text unterscheiden sich.
    Der Inspektor ist ein echter Gamechanger, und es ist sehr nützlich, dass man in der bereitgestellten Vorschau bestimmte Elemente anklicken und direkt dorthin springen kann.

    • Ich nutze weder Zed noch Svelte, aber dieser Bildschirm sieht so aus, als würde auf der Zed-Seite ein tree-sitter-Parser für Svelte fehlen. Viele Editoren bieten für mehrere Sprachen standardmäßig regex-basiertes Highlighting und können per Erweiterung fortgeschritteneres Highlighting hinzufügen.
      Wenn der Editor das Language Server Protocol nutzt, kann er auch semantisches Highlighting vom Sprachserver erhalten.
      Ich habe gesucht und eine Erweiterung gefunden; mich würde interessieren, ob du die schon ausprobiert hast: https://zed.dev/extensions/svelte
    • Das ist eher Syntax-Highlighting als ein Theme. Ich bin mir nicht sicher, was das mit dem Theme zu tun hat.
      Ich bin kein Zed-Nutzer, aber laut https://zed.dev/docs/reference/all-settings#colorize-brackets scheint sich so etwas einstellen zu lassen.
    • Nur als Hinweis: Theme-Konvertierung zwischen Apps/IDEs hat bei mir ziemlich gute Ergebnisse geliefert, wenn ich sie einem LLM überlassen habe.

  • Endlich ist es realistisch möglich, etwas zu bauen, das wirklich hohen Kontrast hat statt wie die bisherigen mitgelieferten Themes nur „fast hoher Kontrast“ zu sein. Kleine Änderung, aber Zed bekommt die Details weiterhin gut in den Griff, sodass es nach 15 Jahren mit vim für mich von einem „interessanten Editor“ zu einem „bevorzugten Editor“ geworden ist.
    Der Follow Mode in Git war besonders gut, während der Einsatz von LLMs in der Entwicklung zunimmt, und ich freue mich, dass das Team weiter an solchen kleinen Dingen arbeitet.

  • Für mich ist Zed fast am Ziel. Der Theme Builder ist gut und einfach zu benutzen, sodass ich mein Theme in wenigen Minuten erstellen konnte.
    Die Syntaxfarben sind fast gut, aber noch nicht ganz, und aus Sicht eines C/C++-Nutzers bleibt da etwas zu wünschen übrig.
    Bei kleinen visuellen Anpassungen wie der Zeilenhöhe von UI-Text ist die Konfiguration noch nicht ausreichend, es gibt nur zwei Optionen.
    Für das Scrollen sollte es eine sanfte Option geben. Es gibt keinen Grund, das zu verhindern, und es dürfte leicht hinzuzufügen sein; besonders auf einem 240-Hz-Monitor ist es angenehmer für die Augen, wenn man sich durch Code bewegt.
    Die eigentliche Editor-Erfahrung ist gut: schneller Start, keine Abstürze, gute Reaktionsfähigkeit und ordentliche Speichernutzung.

    • Nimm einfach Mos. Das hat auch den Vorteil, dass sanftes Scrollen in allen Apps auf die gleiche Weise funktioniert. Geschwindigkeit und Beschleunigung sind dann ebenfalls einheitlich.
      https://mos.caldis.me/
    • Ich habe es gerade zum ersten Mal ausprobiert, und nach 5 Minuten trat ein großer Bug auf: Die UI ist komplett eingefroren. Zuerst dachte ich, nur das Scrollen sei hängen geblieben, aber beim erneuten Reproduzieren zeigte sich, dass die gesamte UI einfriert.
      Wenn ich die App wechsle, funktioniert es wieder. So ein Verhalten habe ich in anderen Apps nie gesehen.
      Als ich den Bug melden wollte, bekam ich ein Formular, das länger war als eine Steuererklärung. Bug-Reports scheinen ein Bereich zu sein, in dem AI sowohl bei der Eingabe als auch bei der nachträglichen Kategorisierung gut passen würde.
    • Mit einem Trackpad ist das Scrollen vollkommen flüssig. Persönlich halte ich eine Maus mit Klickrad zum Scrollen für veraltete Technik.
      Selbst unter Windows nutze ich links ein Magic Trackpad und habe damit weiterhin sanftes analoges Scrollen.

  • Es wirkt vielleicht wie ein oberflächlicher Grund, aber einer der größten Gründe, warum ich Zed nicht nutzen kann, ist, dass es kein vernünftiges Standard-Dark-Theme gibt.
    Die Standard-Themes haben alle wenig Kontrast und bestehen aus Grau auf Grau, sodass sich die Nutzung trotz eines an sich großartigen Editors fade und abstoßend anfühlt.

    • Um den Kontrast in jedem Dark Theme zu korrigieren, füge einfach diese Einstellung hinzu:
      "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"
      }
    • Das ist nicht nur ein Problem von Zed; Dark Themes sind generell oft kontrastarm mit Grau auf Grau.
      Normalerweise suche ich mir ein Dark Theme, das gut aussieht, und mache dann eine angepasste Version mit dunklerem Hintergrund und hellerem Vordergrund.
      Ich glaube, es ist an der Zeit, statt nur für mich selbst zu flicken endlich ein kontraststarkes Dark Theme zu veröffentlichen.
    • Das wirkt vielleicht noch oberflächlicher, aber ich bleibe vor allem wegen modus-themes bei emacs. Mit etwas Glück findet man für den gewünschten Editor oder die gewünschte IDE ein halbwegs brauchbares Theme, aber ein gutes kontraststarkes Light Theme zu finden ist fast unmöglich.
    • Wenn du im Extensions-Fenster von Zed nach Themes suchst, kannst du wahrscheinlich in weniger als einer Minute ein ordentliches kontraststarkes Dark Theme installieren.
      Ich stimme aber zu, dass es keinen Grund gibt, warum nicht ein paar gute kontraststarke Dark Themes standardmäßig enthalten sein sollten.
    • Das ist in letzter Zeit mein Lieblingsthema und zugleich das ausgereifteste Theme: https://zed.dev/extensions/amp-theme

  • Wenn du Omarchy nutzt, enthält Update 3.8 ein dynamisches Theme für Zed. Ziemlich cool: https://github.com/APS6/omazed

  • Es ist schön zu sehen, wie Zed Fortschritte macht, aber für mich wirkt es zu stark an Benutzerkonten gebunden. Da gibt es einen auffälligen „Sign In“-Button und Werbung wie „Try our new agentic...“.
    Ich verstehe, dass Geld verdient werden muss, aber diese Art von anfänglichem Anreiz entwickelt sich allzu oft in eine Richtung, die Anwendungen kaputtmacht.
    Kommt als Nächstes Werbung in der Dateisuche? Ubuntu hat mit so etwas schon einmal einen Fehltritt hingelegt und sich den Unmut der Community eingehandelt. So nach dem Motto: „LQQKING for something? try new ai search by blah blah corp!“
    Deshalb ist es schwer, Zeit in die Anpassung von Editor und Theme zu investieren, wenn man das Gefühl hat, später doch verraten zu werden. VSCode ist diesen Weg bereits gegangen und lässt Commit-Messages von Copilot signieren.

  • Ich habe versucht, die Soda Dark / Sunburst-Farben, die ich in Sublime Text mochte, nachzubauen, und es war wirklich eine Sisyphusarbeit.
    Am Ende habe ich ein paar Screenshots und die ursprüngliche ST4-Konfiguration in AI Studio geworfen und ein brauchbares Ergebnis bekommen, aber keine exakte Kopie. Das ist auch nicht überraschend, weil die semantischen Tokens je nach Editor unterschiedlich sind.

    • Wenn man dem LLM die JSON-Definition des Sublime-Text-Themes gibt und es in die Zed-Theme-Spezifikation umwandeln lässt, dürfte sich das ziemlich leicht lösen lassen. Screenshots sind nicht nötig.

  • Wow, sehr gut. Ich habe Zed ausprobiert, konnte aber die gesamte Farbgestaltung nicht so hinbekommen wie das klassische cobalt von gedit/gtksourceview.
    Wenn jemand so ein Theme bauen würde, wäre ich ernsthaft bereit, einen angemessenen Betrag dafür zu zahlen.

    • Ich habe tatsächlich versucht, AI-Modelle so ein Theme erstellen zu lassen, aber sie haben es nicht richtig hinbekommen. Sie haben immer wieder falsche Ergebnisse erzeugt.
      Wenn das zuverlässig funktioniert, hätte ich Interesse.

  • Ich frage mich, ob es in Zed ein Flag gibt wie: „In der Firma ist zum Beispiel nur GitHub Copilot erlaubt, und wir wollen keine kostenlose Autovervollständigung oder Funktionen, die Code an Dritte senden.“

    • Ja, das geht. Du kannst Zed AI deaktivieren und über die LLM Providers UI eine Verbindung zu GitHub Copilot herstellen.
    • https://zed.dev/business
    • Wenn du Zeds prädiktive AI Zeta nutzen und 2000 kostenlose Vervollständigungen erhalten willst, musst du ein Zed-Konto erstellen und dich anmelden.
      https://zed.dev/docs/ai/edit-prediction