Creador de temas de Zed Editor

 (zed.dev)
1 puntos por GN⁺ 5 시간 전 | 1 comentarios | Compartir por WhatsApp
  • El Theme Builder de Zed debe abrirse en escritorio para usar todas sus funciones, y en la web se pueden explorar las extensiones de temas disponibles en View Theme Extensions
  • La pantalla de edición está compuesta por Colors y Syntax, y los colores se dividen en varias categorías como Surface, Border, Text, Icon, Editor, Navigation, Terminal y Players
  • La categoría Surface incluye valores detallados como Background, Surface Background, Elevated Surface Background y Panel Background; Background se muestra como #3b414dff y Surface Background como #2f343eff
  • Algunos valores del tema no usan un código de color directo, sino que están vinculados a otros valores: Elevated Surface Background y Panel Background están vinculados a surface.background, mientras que Panel Focused Border y Pane Focused Border están vinculados a border.focused
  • En la vista previa también aparecen botones de acción como Create New Theme, Reset, Import y Export, junto con el estado del editor como scheduler.tsx, catware.rs, diagnósticos de TypeScript/React, zed.dev — zsh, Version: 1.1.7 y 9 Changes

Rango de colores editable

  • Las categorías de color se dividen en Surface, Border, Text, Icon, Editor, Navigation, Element, Ghost Element, Drop Target, Tabs, Scrollbar, Minimap, Status, Version Control, Terminal y Players
  • Los elementos de Surface muestran valores detallados como Background, Surface Background, Elevated Surface Background, Panel Background, Panel Focused Border, Panel Indent Guide, Panel Overlay Background y Pane Focused Border
  • Hay valores mostrados con código de color directo y otros vinculados a valores distintos; Background se muestra como #3b414dff y Surface Background como #2f343eff
  • Elevated Surface Background y Panel Background están vinculados a surface.background, mientras que Panel Focused Border y Pane Focused Border están vinculados a border.focused

Botones de acción y estado de la vista previa

  • En la pantalla se ven botones de trabajo del tema como Create New Theme, One / One Dark, Reset, Import y Export
  • La vista previa del tema muestra pestañas de archivos como scheduler.tsx y catware.rs, además del estado del repositorio zed.dev main/main
  • La vista previa de código usa un ejemplo de TypeScript/React e incluye un aviso por couldHaveBeenAnEmail sin usar, un error de tipo por asignar string a number, una sugerencia para usar attendees en lugar de atendees y un diagnóstico indicando que agendaItem podría declararse con const
  • La vista previa de la terminal muestra zed.dev — zsh, Editor: Zed, Version: 1.1.7 y Platform: macOS
  • La vista previa de control de versiones muestra 9 Changes, Stage All, Tracked, Untracked, Fetch, Commit Tracked y el mensaje de commit Fixed the thing that broke the thing

Lecturas relacionadas

1 comentarios

 
GN⁺ 5 시간 전
Comentarios en Hacker News

  • Me da mucho gusto ver que salió esta función. Intenté usar Zed varias veces, pero varios detalles del tema que parecen menores se sentían bastante importantes
    Por ejemplo, en https://imgur.com/a/ia2GCgg arriba está VSCode y abajo Zed, y ambos usan Svelte con un tema parecido
    El color de los corchetes angulares, el color de los componentes integrados que empiezan con mayúscula, el color de los atributos booleanos, y los colores de los paréntesis y del texto son distintos
    El inspector cambia por completo el panorama, y es muy útil poder entrar a un elemento específico haciendo clic en él desde la vista previa incluida

    • No uso Zed ni Svelte, pero esta pantalla parece indicar que del lado de Zed falta un parser de tree-sitter para Svelte. Muchos editores ofrecen resaltado básico basado en expresiones regulares para varios lenguajes y pueden añadir un resaltado más avanzado mediante extensiones
      Si el editor usa Language Server Protocol, también puede recibir resaltado semántico proporcionado por el servidor de lenguaje
      Busqué y apareció una extensión; me pregunto si ya probaste esta: https://zed.dev/extensions/svelte
    • Eso se parece más a resaltado de sintaxis que a un tema. No me queda claro qué tiene que ver eso con el tema
      No uso Zed, pero viendo https://zed.dev/docs/reference/all-settings#colorize-brackets parece que algo así se puede configurar
    • Como referencia, la conversión de temas entre apps/IDEs me ha dado resultados bastante buenos cuando se la dejo a un LLM

  • Por fin será realista crear algo verdaderamente cercano al alto contraste, en lugar de “casi alto contraste” como los temas incluidos hasta ahora. Es un cambio pequeño, pero Zed sigue afinando bien los detalles, al punto de que después de 15 años usando vim pasó de ser un “editor interesante” a mi “editor preferido”
    El follow mode de Git ha sido especialmente bueno mientras crece el uso de LLM en el desarrollo, y da gusto ver que el equipo siga mejorando este tipo de detalles

  • Para mí, Zed ya casi está. El constructor de temas está bien y es fácil de usar; pude crear mi tema en unos minutos
    Los colores de sintaxis están casi bien, pero todavía les falta, y como alguien que usa C/C++ sí se siente esa carencia
    Los pequeños ajustes visuales, como la altura de línea del texto de la UI, no tienen suficiente configuración y solo hay dos opciones
    El scroll debería tener una opción suave. No veo razón para bloquearlo y parecería fácil de añadir; especialmente en un monitor de 240Hz, cansa menos la vista al desplazarse por el código
    La experiencia de edición en sí es buena: arranque rápido, sin crashes, buena respuesta y uso de memoria aceptable

    • Solo usa Mos. Además tiene la ventaja de que el scroll suave funciona igual en todas las apps. También unifica velocidad y aceleración
      https://mos.caldis.me/
    • Lo probé por primera vez y en 5 minutos apareció un bug fuerte: la UI se congeló por completo. Al principio pensé que solo se había trabado el scroll, pero al reproducirlo vi que se congelaba toda la interfaz
      Si cambio de app, vuelve a funcionar. Nunca he visto ese comportamiento en otras apps
      Quise reportar el bug y me encontré un formulario más largo que una declaración de impuestos. Reportar bugs parece un área donde la IA encaja muy bien, tanto en la captura como en la clasificación posterior
    • Si usas trackpad, el scroll es totalmente suave. Personalmente creo que el mouse con rueda de clic ya es una tecnología anticuada para hacer scroll
      Incluso cuando uso Windows, uso un Magic Trackpad con la mano izquierda para seguir teniendo scroll analógico y suave

  • Puede sonar superficial, pero una de las principales razones por las que no puedo usar Zed es que no tiene un tema oscuro predeterminado decente
    Todos los temas por defecto tienen poco contraste y son gris sobre gris, así que aunque el editor en sí sea excelente, la experiencia de uso se siente apagada y poco atractiva

    • Para corregir el contraste en cualquier tema oscuro, basta con añadir esta configuración:
      "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"
      }
    • No es solo problema de Zed; los temas oscuros en general tienden mucho a ser de bajo contraste, gris sobre gris
      Normalmente encuentro un tema oscuro que se vea bien y luego hago una versión personalizada con un fondo más oscuro y un color de primer plano más claro
      Creo que ya es hora de publicar temas oscuros de alto contraste en vez de seguir arreglándolos solo para mí
    • Puede sonar todavía más superficial, pero una razón por la que sigo en emacs es modus-themes. Con suerte puedes encontrar un tema más o menos decente en el editor o IDE que quieras, pero encontrar un buen tema claro de alto contraste es casi imposible
    • Si buscas temas en la ventana de Extensions de Zed, probablemente puedas instalar un tema oscuro de alto contraste decente en menos de un minuto
      Aun así, estoy de acuerdo en que no hay razón para que no vengan incluidos por defecto varios buenos temas oscuros de alto contraste
    • Últimamente este es el tema que más me gusta y el que se siente más pulido: https://zed.dev/extensions/amp-theme

  • Si usas Omarchy, la actualización 3.8 incluye un tema dinámico para Zed. Está bastante bueno: https://github.com/APS6/omazed

  • Me gusta ver cómo progresa Zed, pero se siente demasiado atado a una cuenta de usuario. Hay un botón muy visible de “Sign In” y anuncios tipo “Try our new agentic...”
    Entiendo que tienen que ganar dinero, pero demasiadas veces este tipo de incentivos terminan empujando a las aplicaciones en una dirección que las arruina
    ¿Lo siguiente será meter anuncios dentro de la búsqueda de archivos? Ubuntu ya se equivocó así y se ganó el rechazo de la comunidad. Algo como “LQQKING for something? try new ai search by blah blah corp!”
    Por eso, aunque invierta tiempo afinando el editor y el tema, cuesta comprometerse porque siento que después podrían traicionarlo. VSCode ya va por ese camino y ahora hace que los mensajes de commit los firme Copilot

  • Intenté recrear la combinación de colores Soda Dark / Sunburst que me gustaba en Sublime Text, y fue una tarea realmente sisífica
    Al final metí unas capturas de pantalla y la configuración original de ST4 en AI Studio, y sí salió algo utilizable, pero no fue una copia exacta. También es lógico: cada editor usa tokens semánticos distintos

    • Creo que se resolvería bastante fácil si le das a un LLM la definición JSON del tema de Sublime Text y le pides convertirla a la especificación de temas de Zed. No harían falta capturas de pantalla

  • Vaya, qué bien. Probé Zed, pero no pude hacer que todo el esquema de colores se pareciera al clásico cobalt de gedit/gtksourceview
    Si alguien hiciera un tema así, de verdad estaría dispuesto a pagar una cantidad razonable

    • De hecho intenté que modelos de IA generaran ese tema, pero no lo lograron bien. Seguían produciendo resultados incorrectos
      Si esto llega a funcionar bien, me interesa

  • Me pregunto si Zed tiene algún flag del tipo “en la empresa solo se permite GitHub Copilot, por ejemplo, y no queremos autocompletado gratis ni funciones que envíen código a terceros”