본문 바로가기
ColliePWA

테마: 스타일을 선택하거나 직접 추가하십시오.

테마는 하나의 작은 JSON 파일입니다. 색상, 서체, 형태, 모양새 및 터미널 팔레트를 포함합니다. ColliePWA는 네 가지 테마를 기본 제공하며, 휴대폰의 파일에서 추가로 가져올 수 있습니다.

01/테마의 구성

테마는 모양새를 정의하는 파일입니다.

테마는 라이트 모드와 다크 모드 각각에 대해 앱의 색상을 지정합니다. 또한 서체, 제목용 서체, 형태, 모양새 및 터미널 미러의 색상을 지정할 수도 있습니다. 형태와 모양새는 radius, shadow, density와 같은 열 개의 단어입니다. 레이아웃, 탭 크기, 상태의 의미는 그대로 유지되므로, 모든 테마에서 blocked는 여전히 blocked를 의미합니다.

파일의 모든 값은 지정된 단어이거나 검증된 색상입니다. 파일은 코드를 실행할 수 없으며 파일, 글꼴, 이미지를 로드할 수 없습니다.

테마와 화면은 서로 다른 두 가지 설정입니다. 테마는 어떤 색상을 사용할지 지정합니다. 화면은 시스템 기본값, 라이트, 다크 중 어떤 모드를 표시할지 지정합니다.

02/선택

설정에서 테마를 선택하십시오.

설정을 열고 화면으로 이동한 후 테마를 누르십시오. 새로고침 없이 즉시 적용되며, 다음에 ColliePWA를 열 때 첫 프레임부터 해당 테마로 표시됩니다. Collie를 한 번 누르면 기본값으로 돌아갑니다.

서체를 지정하는 테마는 서체를 한 번 설정합니다. 설정 후에도 UI 글꼴 카드에서 언제든지 변경할 수 있습니다.

Collie

UI 글꼴: Aldrich

익숙한 스타일: 중립적인 회색과 Aldrich 서체.

Nightwatch

UI 글꼴: IBM Plex Sans

flat · bold · strong · band · heavy

야간 대기 중인 휴대폰을 위한 테마입니다. 굵은 선, 어두운 호박색 악센트, 헤더와 표시줄 뒤의 어두운 호박색 띠가 있는 평면적이고 각진 트루 블랙 다크 모드를 제공합니다.

터미널 팔레트

Daylight

UI 글꼴: Geist

제목: Atkinson Hyperlegible Next

round · lifted · roomy · gradient · cards · sentence

밝은 햇빛과 저시력을 위한 테마입니다. AAA 대비의 본문 텍스트, 둥글고 여유 있는 카드, 하단 쪽으로 이동하는 페이지, 그리고 빨간색에서 녹색이 아닌 파란색에서 주황색으로 이어지는 상태 색상을 제공합니다.

터미널 팔레트

Harbour

UI 글꼴: Atkinson Hyperlegible Next

제목: Space Grotesk

soft · lifted · grain · thin

터미널 사용자들을 위한 테마입니다. 청록색 악센트가 하나 들어간 차분한 블루 그레이, 부드러운 모서리, 고운 입자 질감과 얇은 아이콘, 그리고 거의 검정에 가까운 파란색 위의 Solarized 기반 터미널 팔레트를 제공합니다.

터미널 팔레트

03/가져오기

파일에서 테마를 가져옵니다.

  1. 1휴대폰에 테마 파일을 넣으십시오. 확장자는 .json이어야 하며 64 KiB보다 작아야 합니다.
  2. 2설정의 모양에서 테마 카드를 열고, 가져오기를 누른 뒤 파일을 선택하십시오.
  3. 3미리보기를 확인하십시오. 두 모드의 색상, 형태, 터미널 색상 및 대비 보고서가 표시됩니다. 대비가 약하면 경고가 표시되지만, 테마를 그대로 적용할 수는 있습니다. 규칙을 위반한 파일은 거부되며 아무것도 변경되지 않습니다.

테마는 앱의 시각적 외형만을 변경합니다. 코드를 실행하거나, 파일을 로드하거나, 서버에 접속할 수 없습니다.

기기 하나당 가져온 테마를 최대 8개까지 보관할 수 있습니다. 링크를 통한 가져오기는 지원하지 않으며, 기기 간에 테마가 동기화되지 않습니다.

04/작성

직접 작성하십시오.

가장 빠른 시작 방법은 기본 제공 테마를 사용하는 것입니다. 테마를 내보내고, id와 name을 변경하고, 색상, 형태 단어 또는 터미널 팔레트를 수정한 다음 다시 가져오십시오. 가져온 테마는 기본 제공 테마의 id를 사용할 수 없습니다.

이것은 축약된 harbour.json이며, version 2 파일입니다. ... 행은 생략된 부분을 나타냅니다.

{
  "version": 2,
  "id": "harbour",
  "name": "Harbour",
  "author": "Collie",
  "light": {
    "background": "oklch(0.95 0.01 235)",
    "foreground": "oklch(0.26 0.025 250)",
    "card": "oklch(0.985 0.004 235)",
    "...": "..."
  },
  "dark": {
    "background": "oklch(0.21 0.018 250)",
    "foreground": "oklch(0.93 0.012 240)",
    "card": "oklch(0.255 0.02 252)",
    "...": "..."
  },
  "fonts": { "ui": "atkinson", "display": "grotesk" },
  "surface": {
    "radius": "soft",
    "shadow": "lifted",
    "density": "default",
    "weight": "default",
    "border": "default",
    "ground": "grain",
    "chrome": "page",
    "rows": "rules",
    "icons": "thin",
    "labels": "caps"
  },
  "ansi": {
    "0": "#073642",
    "1": "#f0504a",
    "2": "#859900",
    "...": "..."
  }
}

43개 토큰

테마 파일은 4개 그룹에 속한 다음 토큰만 지정할 수 있습니다. 다른 키가 포함된 파일은 거부됩니다.

그룹적용 대상토큰
표면 및 텍스트 색상21페이지, 카드, 헤더와 바, 텍스트, 버튼, 테두리, 포커스 링.
  • background
  • foreground
  • card
  • card-foreground
  • chrome
  • primary
  • primary-foreground
  • secondary
  • secondary-foreground
  • muted
  • muted-foreground
  • accent
  • accent-foreground
  • control-on
  • control-on-foreground
  • destructive
  • destructive-foreground
  • border
  • input
  • rule
  • ring
상태6에이전트 상태 및 정보 색상.
  • status-blocked
  • status-working
  • status-done
  • status-idle
  • status-unknown
  • status-info
구문6diff 및 코드의 텍스트 색상.
  • syntax-keyword
  • syntax-string
  • syntax-constant
  • syntax-property
  • syntax-entity
  • syntax-comment
호스트 식별10머신을 구별하는 색상.
  • host-0
  • host-1
  • host-2
  • host-3
  • host-4
  • host-5
  • host-6
  • host-7
  • host-8
  • host-9

형태 및 모양새

surface 블록은 열 개의 단어를 포함합니다. 각 단어는 지정된 목록에서 가져오며, 생략된 토큰은 해당 목록의 첫 번째 단어인 기본값을 유지합니다. 임의의 숫자는 허용되지 않으므로 테마가 탭 크기를 손상시킬 수 없습니다.

radius
카드, 행, 입력란, 버튼의 모서리 둥글기입니다.
  • sharp
  • soft
  • round
shadow
돌출된 패널 아래의 그림자입니다.
  • default
  • flat
  • lifted
density
컨트롤 내부 및 컨트롤 사이의 여백 크기입니다.
  • default
  • roomy
weight
medium 및 semibold 텍스트가 얼마나 굵게 그려지는지 나타냅니다.
  • default
  • bold
border
가는 선의 너비입니다.
  • default
  • strong
ground
모든 요소 뒤에 위치하는 배경 페이지 스타일입니다. 단색, 부드러운 그라데이션, 고운 입자 질감 중 하나입니다.
  • flat
  • gradient
  • grain
chrome
헤더와 표시줄의 배치 위치입니다. 페이지 색상 위 또는 전용 띠 위 중에서 선택합니다.
  • page
  • band
rows
구분선이 있는 하나의 테두리 그룹 형태 목록, 또는 각 행마다 카드 형태인 목록입니다.
  • rules
  • cards
icons
모든 아이콘의 선 두께입니다.
  • default
  • thin
  • heavy
labels
대문자 또는 문장형 대소문자로 표시되는 작은 섹션 레이블입니다.
  • caps
  • sentence

터미널 팔레트

ansi 블록은 18개의 색상을 포함하거나 비어 있습니다. 16개의 터미널 색상, ink, ground입니다. 각 색상은 #rrggbb 또는 oklch(L C H) 형식이며, 검증 절차를 통과해야 합니다.

값
값은 색상입니다: #rrggbb, #rrggbbaa 또는 oklch(L C H) 형식이며, 불투명도는 / A로 지정합니다. L은 0부터 1까지, C는 0부터 0.5까지, H는 0부터 360까지 모두 일반 숫자로 지정합니다.
모드
light, dark 중 하나 또는 둘 다 지정하십시오. 생략된 모드는 토큰별로 Collie의 값으로 채워집니다.
서체
선택적 항목인 fonts.ui는 ColliePWA에 번들로 포함된 서체 중 하나를 지정합니다. 선택적 항목인 fonts.display는 제목용 서체를 지정합니다. 다른 글꼴은 허용되지 않습니다.
거부 대상
목록 외의 키, 1 또는 2 이외의 version, 색상이나 형태 단어가 아닌 값, var(), url() 또는 기타 함수, 기본 제공 테마의 id, 64 KiB를 초과하는 파일이 해당합니다. 메시지에 원인이 표시되며, 아무것도 적용되지 않습니다.
버전
version은 1 또는 2입니다. surface 블록, fonts.display 서체 또는 ansi 블록이 있는 파일은 2로 지정합니다. version 2 파일에는 ColliePWA 1.22.0 이상이 필요합니다.

05/공유

내보내기 및 공유.

내보내기는 활성 테마를 .collie-theme.json 파일로 작성합니다. 이를 다른 사람에게 보내거나 저장소에 보관하면, 상대방도 동일한 방식으로 가져올 수 있습니다.

상세 내용: 테마