테마

테마는 앱의 시각적 형태입니다. 색상, 서체, 컨트롤 모양, 페이지 느낌, 터미널 색상을 설정합니다. 테마는 하나의 작은 JSON 파일입니다. Collie는 네 가지 테마를 기본 제공합니다. 파일에서 더 많은 테마를 가져올 수 있으며, 복사하고 편집할 수 있도록 임의의 테마를 내보낼 수 있습니다. 테마는 브라우저에 보관되는 단일 기기 설정이며, 브리지의 설정은 변경하지 않습니다.

모든 테마에는 두 가지 구성 요소가 있습니다. 밝은 쪽은 라이트 모드용 색상 집합입니다. 어두운 쪽은 다크 모드용 색상 집합입니다. 테마의 색상에는 background 또는 primary과 같은 이름이 지정되며, 해당 이름을 토큰이라고 합니다.

네 가지 테마

Collie는 네 가지 테마를 기본 제공하며, 그중 세 가지는 테마 파일의 모든 요소를 사용합니다. 각 그림은 왼쪽이 라이트 모드, 오른쪽이 다크 모드인 Dashboard를 보여줍니다.

• —
  Collie은 앱이 항상 유지해 온 모양입니다. 기본값이며, 이를 선택하면 모든 테마가 비활성화됩니다. 모양, 룩, 팔레트를 지정하지 않으므로 각 목록의 기본값이 그대로 적용됩니다.

  !Dashboard의 Collie 테마(라이트 및 다크).

• —
  Nightwatch은 침대에서 사용하는 당직용 휴대폰을 위한 테마입니다. 어두운 쪽은 완전한 검은색에 흐린 앰버 색상 하나가 적용되어 있고, 밝은 쪽은 따뜻한 황혼 종이 색상입니다. 각진 평면 형태로 굵은 선, 굵은 텍스트, 헤더와 막대 뒤의 흐린 앰버 색상 띠가 특징입니다. 터미널은 완전한 검은색 배경에 앰버 팔레트를 그립니다.

  !Dashboard의 Nightwatch 테마(라이트 및 다크).

• —
  Daylight은 직사광선 환경과 저시력자를 위한 테마입니다. 본문 텍스트 명암비는 7:1 이상이고 테두리가 더 뚜렷하며, 빨간색과 초록색 없이도 둘을 구분할 수 있도록 blocked는 주황색, done은 파란색으로 표시합니다. 둥근 모서리, 하단으로 갈수록 밝아지거나 어두워지는 페이지 위에 띄워진 카드 형태의 행(라이트 모드에서는 더 어둡게, 다크 모드에서는 더 밝게), 넉넉한 간격이 특징입니다. 터미널은 선명하고 대비가 높은 팔레트를 그립니다.

  !Dashboard의 Daylight 테마(라이트 및 다크).

• —
  Harbour은 터미널 환경을 주로 사용하는 사용자를 위한 테마입니다. Nord 및 Solarized 느낌의 쿨 블루그레이에 틸 강조 색상이 하나 적용되어 있으며, 에디터처럼 읽기 쉬운 코드 색상을 제공합니다. 부드러운 모서리, 페이지 아래의 미세한 질감, 얇은 아이콘이 특징입니다. 터미널은 Solarized 기반 팔레트를 그립니다.

  !Dashboard의 Harbour 테마(라이트 및 다크).

표에는 각 테마가 사용하는 모든 단어가 나열되어 있습니다. 각 목록의 첫 번째 단어는 현재 모양인 sharp, default, flat, page, rules, caps입니다. 해당 단어에 대한 설명은 Shape, Look, 터미널 팔레트에 나와 있습니다.

테마를 선택하십시오

Settings → Appearance에서 테마를 선택하면 앱 전체가 한 번에 변경됩니다.

테마 카드가 첫 번째 카드입니다. 이름을 탭하면 앱이 즉시 변경됩니다. 각 이름에는 해당 테마의 모서리와 두께가 적용되어 있으므로 탭하기 전에 모양을 확인할 수 있습니다. 이 카드는 시스템, 라이트, 다크가 있는 모양 카드 위에 위치합니다. 이 둘은 서로 다른 설정입니다. 테마는 색상, 모양, 외형을 결정하고 시스템, 라이트, 다크는 표시할 색상 영역을 결정합니다.

서체가 지정된 테마를 선택하면 서체 카드에 해당 서체가 한 번 적용됩니다. 그 이후에는 서체 카드가 우선 적용됩니다. 해당 카드에서 다른 서체를 선택하면 테마를 다시 선택할 때까지 유지됩니다. 테마의 디스플레이 서체는 이 카드의 일부가 아니며 제목에 계속 유지됩니다. 서체에는 별도의 섹션이 있습니다.

이 테마들이 사용하는 서체는 라틴 문자 및 라틴 확장-A만 제공하므로, 해당 테마에서는 키릴 자모와 CJK 텍스트가 시스템 서체로 대체됩니다(Collie 테마는 키릴 자모 대응 서체를 유지합니다).

테마 가져오기

테마 카드에서 .json 파일을 가져오고 미리보기를 확인한 뒤 적용 키를 누릅니다.

1. 01
   테마 카드에서 가져오기 키를 누르고 .json 파일을 선택합니다.
2. 02
   Collie가 파일을 읽고 미리보기를 표시합니다. 이름, 작성자, 견본 형태의 양쪽 구성, 각 구성에 대한 작은 페이지, 샘플에 적용된 모양, 터미널 색상, 대비 보고서가 표시됩니다.
3. 03
   테마를 유지하고 해당 테마로 전환하려면 적용 키를 누르고, 아무것도 유지하지 않으려면 취소 키를 누릅니다.

경고은(는) "dark: status-blocked chip on card measures 3.9. The floor is 4.5"와 같은 대비 보고서 항목입니다. 이는 특정 위치에서 테마를 읽기 어렵다는 것을 의미합니다. 선택은 사용자의 몫이므로 적용 상태가 유지됩니다.

거부은(는) 파일이 규칙을 위반했음을 의미합니다. Collie는 원인을 나열하며, 아무것도 유지하지 않고 아무것도 적용하지 않습니다. 목록에는 최대 25개의 원인이 표시된 후 "and N more"라는 한 줄이 표시됩니다. 다음 중 하나에 해당하면 파일이 거부됩니다.

• —
  JSON 객체가 아니거나 64KiB를 초과하는 경우.
• —
  색상을 지정하지 않은 경우.
• —
  알 수 없는 키, Collie가 읽을 수 없는 버전, 색상이 아닌 값, Collie가 제공하지 않는 서체가 포함된 경우.
• —
  모양 단어가 목록에 없거나 단어가 들어가야 할 자리에 숫자가 있는 경우.
• —
  surface 블록, fonts.display 서체 또는 ansi 블록이 포함되어 있으면서 버전 1로 명시된 경우.
• —
  ansi 블록에 키가 누락되었거나, 알파 값이 포함된 색상이 있거나, 터미널 팔레트 기준 게이트를 통과하지 못한 경우.
• —
  잘못된 id, name 또는 author이(가) 포함되어 있거나 id이(가) 기본 제공 테마에 속한 경우.
• —
  가져온 9번째 테마가 되는 경우. Collie는 파일을 선택하기 전 가져오기 키를 누르는 시점에 거부하고, 적용 시점에 다시 거부합니다.

Collie는 적용 시점에 한 가지를 더 확인합니다. 기기에 id이(가) 이미 존재하는 파일은 "already imported" 표시와 함께 거부됩니다. 이전 테마를 먼저 삭제하거나 id을(를) 변경하십시오.

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

기기 하나에는 가져온 테마를 최대 8개까지 저장할 수 있습니다. 제거은(는) 가져온 테마가 적용되어 있는 동안에만 작동합니다. 해당 테마를 삭제하고 앱은 Collie 기본 상태로 돌아갑니다. 서체는 기존 상태를 유지합니다.

대비 보고서

보고서는 양쪽 구성 모두에서 테마의 색상을 측정하며, 통과하지 못한 항목은 사용자가 승인할 수 있는 경고로 처리됩니다.

터미널 팔레트는 게이트 기준 미달 시 파일을 거부하므로 유일한 예외입니다. 표에는 다른 부분의 하한선이 나열되어 있습니다. 하한선은 대비 비율이므로 수치가 높을수록 읽기 쉽습니다.

• —
  파괴적 작업(destructive) 텍스트는 색상을 유지할 경우 Collie가 측정한 값을 유지합니다. Collie 자체 페이지의 연한 빨간색은 4.38로 측정됩니다. 쌍을 이루는 두 색상을 모두 유지하는 테마는 해당 값을 유지하며 3 미만으로 내려가지 않습니다. 둘 중 하나의 색상을 변경하는 테마는 4.5를 유지합니다.
• —
  그라디언트나 그레인은 가장 끝 지점에서 측정합니다. 보고서는 페이지 텍스트, 칩, destructive 텍스트, status-blocked 텍스트, 그리고 그라디언트 하단이나 그레인의 라인 색상 위에서 rule을 동일한 최소 기준으로 다시 측정합니다.
• —
  띠 역시 측정 대상입니다. chrome: band 아래에서 foreground, muted-foreground, status-blocked는 띠의 색상인 secondary 위에서 4.5로 측정됩니다.

테마 내보내기 및 공유

테마를 선택한 다음 내보내기을 누릅니다. Collie가 <id>.collie-theme.json을 저장합니다. 파일을 저장할 수 없는 브라우저는 복사 버튼이 포함된 시트에 텍스트를 표시합니다. 기본 제공 테마로 커스텀 테마를 만들려면 다음을 수행합니다.

1. 01
   Nightwatch, Daylight, Harbour 또는 Collie를 내보냅니다.
2. 02
   id 및 name을 변경합니다. 기본 제공 테마의 id는 거부됩니다.
3. 03
   색상과 텍스트를 편집하고, 변경하지 않으려는 토큰은 삭제합니다.
4. 04
   휴대폰으로 파일을 전송한 다음 가져옵니다.

내보내기는 테마의 콘텐츠를 수용할 수 있는 가장 낮은 version을 기록합니다.

테마 작성

파일에는 다음 키만 포함되어야 합니다. 알 수 없는 키가 포함되어 있으면 해당 키의 이름과 함께 거부됩니다. 다음은 완성된 버전 2 파일이며, 더 짧은 색상 목록과 전체 팔레트가 포함된 Daylight 테마입니다.

{
  "version": 2,
  "id": "my-day",
  "name": "My day",
  "author": "Sam",
  "light": { "background": "oklch(0.985 0 0)", "primary": "oklch(0.18 0 0)" },
  "dark": { "background": "oklch(0.12 0 0)", "status-blocked": "oklch(0.81 0.13 60)" },
  "fonts": { "ui": "geist", "display": "atkinson" },
  "surface": {
    "radius": "round", "shadow": "lifted", "density": "roomy",
    "weight": "default", "border": "default", "ground": "gradient",
    "chrome": "page", "rows": "cards", "icons": "default", "labels": "sentence"
  },
  "ansi": {
    "0": "#3a332c", "1": "#ff5f56", "2": "#5fd068", "3": "#ffd84a",
    "4": "#5aa9ff", "5": "#e07ce8", "6": "#3fd6d0", "7": "#f2efe9",
    "8": "#8a827a", "9": "#ff8a80", "10": "#7ad683", "11": "#ffeb8a",
    "12": "#8cc4ff", "13": "#f0a6f5", "14": "#6ad8d2", "15": "#ffffff",
    "ink": "#f5f0e8", "ground": "#1a1612"
  }
}

• —
  version은 1 또는 2입니다. 버전을 참조하십시오. 다른 숫자는 거부됩니다.
• —
  id은 1~32자여야 합니다. 소문자, 숫자, 하이픈으로 구성되며 문자나 숫자로 시작해야 합니다.
• —
  name은 1~40자이고, author은 최대 60자입니다. 둘 다 제어 문자를 포함할 수 없습니다.
• —
  light 및 dark은 토큰의 객체입니다. 한쪽 또는 양쪽을 모두 지정합니다. 생략한 쪽 및 생략한 모든 토큰은 Collie 테마의 값을 사용합니다. 한쪽만 토큰을 설정하면 다른 쪽은 해당 토큰에 대해 Collie 테마의 값을 가져옵니다.
• —
  fonts.ui은 선택 사항입니다: system, grotesk, aldrich, plex, geist 또는 atkinson.
• —
  fonts.display은 선택 사항이며 동일한 6개의 이름을 가집니다. Look을 참조하십시오.
• —
  surface은 선택 사항입니다. 내부의 모든 키 역시 선택 사항이며, 생략한 키는 해당 목록의 기본 단어를 사용합니다. Shape 및 Look를 참조하십시오.
• —
  ansi은(는) 선택 사항이며, 18개 키를 모두 포함하거나 전혀 포함하지 않습니다. 터미널 팔레트을(를) 참조하십시오.
• —
  $schema은(는) 허용되지만 무시됩니다. 파일 크기는 최대 64KiB입니다.

값은 일반 숫자로 된 #rrggbb, #rrggbbaa, 또는 oklch(L C H) 및 oklch(L C H / A)입니다. L은 0~1, C는 0~0.5, H는 0~360, A는 0~1 또는 백분율입니다. 이름이 지정된 색상, rgb(), var(), url() 등 다른 값은 작동하지 않습니다. ansi의 색상에는 알파가 없습니다.

버전

파일은 자신의 버전을 명시하며, Collie는 파일 내용을 수용하는 가장 낮은 버전을 작성합니다.

• —
  surface 블록, fonts.display 서체 또는 ansi 블록이 있는 파일은 2를 명시해야 합니다. 1을 명시하면서 이들 중 하나를 포함하는 파일은 거부됩니다.
• —
  이러한 블록이 없는 파일은 둘 중 어느 쪽을 명시해도 됩니다. Collie는 두 버전을 모두 읽으며, 색상과 fonts.ui만 있는 테마를 내보내면 1로 명시됩니다.
• —
  버전 2 파일에는 Collie 1.22.0 이상이 필요합니다.
• —
  버전 1 파일은 surface의 모든 토큰에 대해 각 목록의 기본 단어를 의미합니다.

43개의 토큰

각 절반은 네 개 그룹에서 다음 중 임의의 항목을 가져옵니다.

Shape

surface 블록의 단어 5개가 컨트롤의 형태를 설정하며, 각 키는 고정 목록의 단어 하나를 받습니다.

단어는 이름이며 숫자가 아닙니다. 임의의 반경이나 간격 단계를 사용하면 탭 영역의 최소 기준이 깨지거나 정사각형 컨트롤이 스타디움 형태가 될 수 있습니다. 각 목록의 첫 번째 단어는 버전 2 이전의 앱 모양입니다.

• —
  원은 원으로 유지됩니다. 상태 점처럼 너비와 높이가 같은 형태는 모서리 단계에 해당하지 않으므로 radius의 영향을 받지 않습니다.
• —
  표시된 행은 반경 설정을 따릅니다. sharp에서는 선택되거나 차단된 행의 왼쪽 가장자리에 2px 두께의 막대가 표시됩니다. soft 및 round에서는 모서리가 둥글 때 왼쪽 막대를 조합하지 않으므로, 사방에 2px 링과 부드러운 그림자가 표시됩니다.
• —
  roomy 설정은 기본값 미만으로 내려가지 않습니다. 탭 대상 크기는 44px 이상으로 유지됩니다. 헤더의 아이콘과 강아지 모양은 크기가 유지되므로 주변 여백만 늘어납니다.

Look

surface 블록의 추가 키 5개와 글꼴 키 1개가 페이지 모양을 설정합니다. 동일한 고정 단어 규칙을 따릅니다.

fonts.display 속성은 페이지 제목과 헤더의 이름에 사용할 6개 서체 중 하나를 지정합니다. 서체를 지정하지 않는 테마는 이전처럼 기본 서체로 제목을 그립니다. Collie는 테마가 지정한 경우에만 디스플레이 서체를 가져옵니다.

• —
  배경은 이미지 파일을 그리지 않습니다. 그라디언트와 그레인은 테마 자체의 색상으로 구성됩니다. 앱 패널은 불투명하므로 패널 사이의 간격으로 배경이 드러납니다.
• —
  페이지 텍스트는 배경을 기준으로 측정됩니다. 대비 보고서 검사는 그라디언트의 끝부분과 그레인의 선 색상을 확인하므로 배경이 텍스트를 가릴 수 없습니다.
• —
  그라디언트 아래에서도 바는 단색 페이지 색상을 유지합니다. 태블릿에서는 헤더와 바가 아래쪽으로 갈수록 어두워지는 페이지 상단의 상자처럼 보일 수 있습니다. 텍스트 하나로 이를 바꿀 수는 없습니다.
• —
  상태 표시줄이 밴드를 따릅니다. chrome: band 환경에서는 브라우저 상태 표시줄이 밴드 색상을 따르고, page 환경에서는 페이지 색상을 따릅니다.
• —
  rows 설정은 모든 목록 그룹에 적용됩니다. Settings 색인의 목록도 여기에 포함됩니다.

터미널 팔레트

ansi 블록은 터미널 미러에 고유한 16가지 색상, 잉크 및 배경을 부여합니다.

블록은 18개 키를 모두 포함하거나 전혀 포함하지 않아야 합니다. 16개 슬롯에는 "0"부터 "15"까지, 텍스트에는 ink, 배경에는 ground을 사용합니다. 팔레트가 절반만 있으면 한 창에 두 팔레트가 들어갑니다. 각 색상은 알파가 없는 #rrggbb 또는 oklch() 형식입니다.

참고. 다크 모드를 기준으로 팔레트를 작성하십시오. 미러는 항상 어두운 배경에 그려지며, 라이트 모드에서 Collie는 색상을 다시 칠하는 대신 미러 전체를 반전시킵니다(이유). 라이트 모드에서는 색상의 반전 이미지가 표시됩니다. 테마의 라이트 background 색상으로 반전되는 ground 색상을 선택하면 미러가 두 모드 모두에서 페이지와 어우러집니다.

게이트 검사를 통과하지 못한 색상은 키 이름과 함께 거부됩니다. 터미널은 가장 자주 읽는 공간이므로 단순 경고로 처리되지 않습니다.

밝은 세트는 고정된 목록입니다. Muse 미러는 해당 네 개 슬롯을 밝은 전경색으로 처리합니다. 나머지 12개 슬롯은 동일한 기준선 아래로 유지되므로, 사용자의 팔레트에서도 이 목록이 그대로 유지됩니다.

테마로 변경할 수 없는 항목

테마는 색상 값, 서체, 컨트롤 형태, 페이지 느낌, 터미널 팔레트를 변경합니다. 그 외의 항목은 변경할 수 없습니다.

• —
  레이아웃 및 탭 크기. 모바일 레이아웃은 깨지기 쉽습니다. radius, shadow, density, weight, border는 지정된 키워드만 허용하며 임의의 값을 사용할 수 없습니다. roomy 또한 기본값 미만으로 내려가지 않습니다.
• —
  글꼴 크기 및 움직임. 테마는 크기가 아닌 서체와 두께만 선택하며, 요소의 동작 방식은 변경할 수 없습니다.
• —
  Collie 강아지 심볼. 헤더, 홈 화면 아이콘, 스플래시 화면은 모든 테마에서 동일하게 표시됩니다.
• —
  상태의 의미. 아이콘과 텍스트는 그대로 유지되므로, 사용자가 선택한 빨간색이나 주황색 때문에 차단된 상태가 완료된 상태처럼 보이지 않습니다.
• —
  임의의 값, 원시 CSS, 원격 글꼴. 모든 키는 색상이나 목록에 지정된 키워드를 사용하며, 글꼴은 Collie와 함께 제공되는 목록에서 가져옵니다.

첫 번째 렌더링과 상태 표시줄

선택한 테마는 첫 프레임부터 화면에 표시됩니다. 앱이 로드되기 전에 작은 스크립트가 테마를 먼저 읽으므로 기본 제공 테마는 기본 설정으로 깜빡이지 않습니다. 가져온 테마도 동일하게 동작하지만 한 가지 예외가 있습니다. 토큰이 한쪽에만 설정된 경우 해당 토큰은 한 프레임 동안 기본 색상으로 표시됩니다. 앱은 로드 시 테마를 다시 확인합니다. 확인에 실패한 저장된 테마는 삭제되고 기기에는 Collie가 표시되며 브라우저 콘솔에 이유가 출력됩니다. 상태 표시줄은 테마의 두 가지 페이지 색상을 따르며, 테마에 chrome: band이(가) 지정된 경우 두 가지 밴드 색상을 따릅니다.

문제 해결

자주 발생하는 문제와 그 원인 및 해결 방법입니다.

• —
  테마의 특정 토큰에 기본 색상이 표시됩니다. 파일에서 해당 토큰 또는 절반이 누락되었습니다. 누락된 토큰은 Collie 테마에서 가져옵니다. 원하는 위치에 해당 토큰을 추가하십시오.
• —
  서체가 변경되지 않았습니다. 테마는 사용자가 선택할 때 서체를 한 번만 적용합니다. 이후 서체에서 다른 서체를 선택했다면 해당 선택이 우선 적용됩니다. 서체를 다시 선택하거나 테마를 다시 선택하십시오.
• —
  모양 키워드가 아무런 동작도 하지 않습니다. 단어가 해당 목록의 기본 단어이거나 키가 누락되었을 수 있습니다. 생략된 키에는 기본 단어가 적용됩니다. Shape 및 Look 아래의 표와 맞춤법을 대조해 확인하십시오.
• —
  파일이 거부되고 ansi이(가) 표시됩니다. 팔레트는 어두운 공간에 18개의 키를 모두 포함해야 하며, 각 색상은 검증 기준을 통과해야 합니다. 거부 메시지에는 키와 측정된 수치가 명시됩니다.
• —
  브라우저 데이터를 삭제하면 테마가 사라집니다. 가져온 테마는 이 브라우저에만 저장됩니다. 파일을 다시 가져오십시오.