본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

cdredfox/workbuddy-skin-studio

JavaScript0 / 0

로컬 CDP 주입으로 WorkBuddy 데스크톱에 이미지 기반 테마를 실시간 적용하고 메뉴에서 즉시 전환한다.

TL;DR

이 프로젝트는 WorkBuddy 데스크톱의 설치 파일을 수정하지 않고 로컬 CDP를 통해 CSS 변수와 DOM을 주입해 이미지 하나로 테마를 생성하고 즉시 적용하는 도구이다. 툴은 WorkBuddy를 --remote-debugging-port로 재시작해 renderer를 찾아 Runtime.evaluate로 스타일과 우측 상단 메뉴를 삽입하며 색상 추출과 localStorage 기반 영구화를 지원한다. 이 방식은 앱 서명을 보존하면서 라이트·다크 자동 적응과 빠른 전환을 제공하나 CDP 주입 특성상 WorkBuddy를 수동 재실행하면 주입이 해제되므로 재적용이 필요하다.

핵심 포인트

  • 비파괴적 CDP 주입 방식을 사용해 app.asar와 설치 디렉토리를 변경하지 않고 테마를 적용한다.
  • 이미지 하나에서 자동 색상 추출과 webp 압축을 거쳐 즉시 사용할 수 있는 테마를 생성하고 localStorage에 보관한다.
  • WorkBuddy의 data-vscode-theme-kind을 기준으로 라이트/다크 전환을 자동으로 적용해 네이티브 컨트롤과 시각적 일관성을 유지한다.
  • 즉시 전환한다. 테마 적용 시 WorkBuddy 우측 상단에 테마 메뉴가 추가되어 설치된 테마와 원본 인터페이스 간을 클릭으로 지연 없이 전환할 수 있다. 전환 동작은 런타임에서 DOM과 CSS를 주입해 수행된다.

이미지 분석

WorkBuddy 메인 인터페이스에 Miku 테마가 적용된 상태와 중앙의 테마 적용 위젯을 캡처한 스크린샷이다.
배경 이미지와 투명 컨테이너가 적용된 렌더러 화면이 보이며 상단 중앙에 WorkBuddy 타이틀과 우측 상단에 테마 메뉴 버튼 삽입 위치가 확인된다. 이 이미지는 배경 hero 이미지와 CSS 변수 오버라이드로 UI가 어떻게 시각적으로 바뀌는지를 시각적으로 증명한다.
우측 상단 테마 메뉴가 펼쳐진 상태를 보여주는 스크린샷으로 커스텀 이미지 업로드와 테마 목록 동작을 캡처하고 있다.
메뉴 항목에 내장 프리셋과 + 커스텀 이미지 버튼이 표시되어 사용자가 메뉴에서 즉시 테마를 업로드하고 선택할 수 있음을 확인할 수 있다. 메뉴 내 삭제 동작과 원본 복구 옵션의 존재가 UI 조작 경로를 명확하게 보여준다.
어두운 배경의 원신 테마 적용 상태를 캡처한 스크린샷으로 라이트/다크 전환 결과를 보여준다.
dark 테마에서는 전체적인 표면 색과 텍스트 대비가 변경되어 data-vscode-theme-kind 기반의 자동 전환 동작이 실제로 반영된 것을 확인할 수 있다. 이 이미지는 라이트/다크 자동 적응 로직이 UI 컨트롤과 편집기 배경에 어떻게 영향 주는지 시각적 증거를 제공한다.

56

STARS

13

FORKS

+204

TRENDING

0

조회수

watchers 56open issues 2MIT License

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.