커스텀 테마 만들기
다음 단계를 따라 자신만의 테마를 만들고 커스터마이즈하세요.- Settings를 열고 User → Personalization(또는 Themes 섹션)으로 이동하세요
- Create new theme을 선택하세요
- 제목을 입력하고, 색상 구성(밝은 테마 또는 어두운 테마)을 선택하고, 선택적으로 설명을 추가하세요
- Create Theme을 선택해 Themes Editor를 여세요
- Background: 대부분의 UI 표면에 대한 기본 색상 설정
- Outline: 테두리와 구분선의 색상 제어
- Foreground: 텍스트와 아이콘 색상 결정
- Primary: 버튼과 대화형 요소의 색상 정의
- Positive: Run 버튼 같은 성공 표시에 적용
- Negative: 오류와 파괴적인 작업 경고에 표시
구문 강조
가독성과 이해도를 높이기 위해 다양한 코드 요소가 표시되는 방식을 커스터마이즈하세요.구문 강조 요소
구문 강조 요소
| 요소 | 설명 |
|---|---|
| Variable Names | 선언 키워드가 사용되지 않은 변수에 적용 |
| Variable Definitions | const나 var 같은 키워드로 정의된 변수 이름의 색상 지정 |
| Function References | 함수를 호출할 때 적용 |
| Function Definitions | 함수 이름을 선언할 때 색상 지정 |
| Keywords | import, function, return 같은 언어 키워드 강조 |
| Property Names | 변수에서의 속성 접근 색상 지정 |
| Property Definitions | 객체 속성을 정의할 때 사용 |
| Function Properties | 객체의 메서드를 호출할 때 적용 |
| Tag Names | HTML 및 JSX 태그에 사용 |
| Type Names | 타입이 있는 언어에서 타입 어노테이션의 색상 지정 |
| Class Names | 클래스 선언 및 참조에 적용 |
| Attribute Names | HTML 및 JSX 속성 강조 |
| Comments | 모든 코드 주석에 적용 |
| Strings | 문자열 리터럴의 색상 지정 |
| Numbers | 숫자 값 강조 |
| Booleans | 불리언 값(true/false) 서식 지정 |
| Regular Expressions | 정규식 패턴 색상 지정 |
| Operators | +, -, *, / 같은 연산자 강조 |
| Brackets | 필요한 경우 대괄호와 꺾쇠 괄호의 색상 지정 |
테마 디자인 모범 사례
다음 가이드라인을 따라 보기 좋고 실용적인 테마를 만드세요.색상과 대비
- 대비 균형 맞추기: 배경과 전면 요소 간에 충분한 차이를 확보하세요
- 일관된 팔레트 만들기: 서로 충돌하지 않고 어울리는 색상을 선택하세요
- 일관된 밝기 유지하기: 구문 요소 전체에서 비슷한 밝기 수준을 유지하세요
- 접근성을 고려한 디자인: 낮은 대비 조합을 피해 시각 장애가 있는 사용자를 고려하세요
테마 관리하기
Settings의 User → Personalization(또는 Themes 섹션)에서 설치한 모든 테마에 접근하고 관리하세요.테마 전환하기
테마 제목 옆의 버튼을 선택해 현재 테마로 활성화하세요.테마 편집하기
세 점 메뉴를 선택하고 Edit을 클릭해 커스텀 테마를 수정하세요.직접 만든 커스텀 테마만 편집하거나 삭제할 수 있습니다. 기본 테마와 다른 사람이 만든 테마는 수정할 수 없습니다.
테마 삭제하기
세 점 메뉴를 사용해 Delete를 선택하면 커스텀 테마를 제거할 수 있습니다.커뮤니티 테마 살펴보기
Themes Explore Page에서 Replit 커뮤니티가 만든 테마를 발견하세요.테마 찾기
- 이름으로 검색해 “Atom One Dark” 같은 특정 테마 찾기
- 작성자로 필터링해 특정 크리에이터의 테마 탐색
- 색상 구성으로 찾아보며 밝은 테마 또는 어두운 테마 찾기
- 특정 색상으로 검색해 원하는 취향에 맞추기
VS Code에서 가져오기
테마 생성 과정에서 동일한 색상을 매핑하여 즐겨 쓰는 VS Code 테마를 Replit로 가져오세요.테마 게시하기
다음 단계를 따라 커스텀 테마를 Replit 커뮤니티와 공유하세요.- 커스텀 테마의 Themes Editor를 여세요
- Publish 버튼을 선택하세요
- 제목과 설명 필드를 작성하세요
- 테마를 제출하세요
관련 자료
- Project Editor 기능 - Console, Shell, Multiplayer 같은 다른 Project Editor 기능 살펴보기
- 사용자 설정 - Project Editor 환경설정 구성하기
- 키보드 단축키 - 키보드 단축키로 워크플로 속도 높이기
- 팀원 초대하기 - 팀원과 실시간으로 협업하기