▲

Zed Editor 테마 빌더

 (zed.dev)
1P by GN⁺ 4시간전 | ★ favorite | 댓글 1개
  • Zed의 Theme Builder는 전체 기능을 사용하려면 데스크톱에서 열어야 하며, 웹에서는 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이 보임

함께 보면 좋은 글 β

▲
GN⁺ 4시간전  [-]
Hacker News 의견들

  • 이런 기능이 나와서 정말 반가움. Zed를 여러 번 써보려 했지만, 사소해 보이는 테마 관련 디테일들이 꽤 크게 느껴졌음
    예를 들어 https://imgur.com/a/ia2GCgg에서 위는 VSCode, 아래는 Zed이고, 둘 다 Svelte에 비슷한 테마를 사용함
    꺾쇠괄호 색, 대문자로 시작하는 내장 컴포넌트 색, 불리언 속성 색, 괄호와 텍스트 색이 다름
    검사기는 판도를 바꾸는 기능이고, 제공되는 미리보기에서 특정 요소를 클릭해 들어갈 수 있는 점이 아주 유용함

    • Zed나 Svelte를 쓰지는 않지만, 이 화면은 Zed 쪽에 Svelte용 tree-sitter 파서가 빠진 것처럼 보임. 많은 편집기는 여러 언어에 기본 정규식 기반 강조를 제공하고, 확장으로 더 고급 강조를 추가할 수 있음
      편집기가 Language Server Protocol을 쓴다면 언어 서버가 제공하는 의미 기반 강조도 받을 수 있음
      검색해 보니 확장이 하나 나오는데, 이건 시도해 봤는지 궁금함: 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 텍스트의 줄 높이 같은 작은 시각 조정은 설정이 충분하지 않고, 옵션이 두 개뿐임
    스크롤에는 부드러운 옵션이 있어야 함. 막을 이유가 없고 추가도 쉬울 텐데, 특히 240Hz 모니터에서 코드를 이동할 때 눈이 더 편함
    편집 경험 자체는 좋고, 빠른 실행, 크래시 없음, 반응성, 메모리 사용량 모두 괜찮음

    • Mos를 쓰면 됨. 부드러운 스크롤이 모든 앱에서 같은 방식으로 동작한다는 장점도 있음. 속도나 가속도도 통일됨
      https://mos.caldis.me/
    • 처음 써봤는데 5분 만에 큰 버그가 나왔고, UI가 완전히 멈췄음. 처음에는 스크롤만 멈춘 줄 알았지만 다시 재현해 보니 전체 UI가 멈추는 거였음
      앱을 전환하면 다시 동작함. 다른 앱에서는 이런 동작을 본 적이 없음
      버그를 신고하려고 하니 세금 신고서보다 긴 양식이 나왔음. 버그 신고는 입력과 이후 분류 모두에서 AI가 잘 맞는 영역 같음
    • 트랙패드를 쓰면 스크롤은 완전히 부드러움. 개인적으로 클릭 휠 마우스는 스크롤용으로는 낡은 기술이라고 봄
      Windows를 쓸 때도 왼손으로 Magic Trackpad를 써서 여전히 부드러운 아날로그 스크롤을 사용함

  • 얕은 이유처럼 느껴지지만, Zed를 쓰지 못하게 하는 가장 큰 이유 중 하나는 괜찮은 기본 다크 테마가 없다는 점임
    기본 테마들은 전부 대비가 낮고 회색 위에 회색이라, 편집기 자체가 훌륭해도 사용 경험이 칙칙하고 거부감 있게 느껴짐

    • 모든 다크 테마에서 대비를 고치려면 이 설정을 추가하면 됨:
      "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만 허용되고, 무료 자동완성이나 코드를 제3자에게 보내는 기능은 원하지 않는다” 같은 플래그가 있는지 궁금함

답변달기