テーマ

テーマはアプリの外観です。色、書体、コントロールの形状、ページの手触り、ターミナルの色を設定します。単一の小さなJSONファイルです。Collieには4つ同梱されています。ファイルから追加でインポートすることも、任意のテーマをエクスポートして複製・編集することもできます。テーマは1台のデバイスの設定であり、そのブラウザ内に保持され、ブリッジ側では何も変更しません。

各テーマには2つの面があります。ライト側はライトモード用の色のセットです。ダーク側はダークモード用の色のセットです。テーマ内の色にはbackgroundやprimaryなどの名前があり、その名前をトークンと呼びます。

4つのテーマ

Collieには4つのテーマが同梱されており、そのうち3つはテーマファイルのすべての要素を使用しています。各画像はダッシュボードを示しており、左がライト、右がダークです。

• —
  Collieは、このアプリが最初から持っていた外観です。これがデフォルトであり、これを選択するとすべてのテーマ設定が解除されます。形状、外観、パレットを指定しないため、すべての項目がリストのデフォルト値になります。

  !ダッシュボードでのCollieテーマ（ライトとダーク）。

• —
  Nightwatchは、ベッドの中で確認するオンコール端末向けです。ダーク側は完全な黒に淡いアンバーが1色、ライト側は温かみのある夕暮れの紙のような色です。スクエアでフラットなデザインで、太い線、太字テキスト、ヘッダーとバーの背後に淡いアンバーの帯を備えています。ターミナルは完全な黒の上にアンバーのパレットを描画します。

  !ダッシュボードでのNightwatchテーマ（ライトとダーク）。

• —
  Daylightは、直射日光下やロービジョン向けです。本文テキストのコントラスト比は7:1以上で、枠線は強調されており、赤と緑を使わずに識別できるよう、ブロック中はオレンジ、完了は青になっています。角丸、ページ下部に向かってグラデーションする浮き上がったカード形状の行（ライトでは暗く、ダークでは明るくなります）、広めのステップが特徴です。ターミナルは鮮やかで高コントラストなパレットを描画します。

  !ダッシュボードでのDaylightテーマ（ライトとダーク）。

• —
  Harbourは、ターミナルで作業する人向けです。NordやSolarized調の落ち着いたブルーグレーにティールのアクセントが1色あり、エディタのように読みやすいコードカラーを備えています。柔らかな角丸、ページ下の微細なグレイン、細いアイコンが特徴です。ターミナルはSolarizedベースのパレットを描画します。

  !ダッシュボードでのHarbourテーマ（ライトとダーク）。

表は各テーマが使用するすべての設定項目を一覧表示しています。各リストの最初の項目は現在の外観です: sharp、default、flat、page、rules、caps。各項目の説明はShape、Look、ターミナルパレットにあります。

テーマの選択

Settings → Appearanceでテーマを選ぶと、アプリ全体に即座に反映されます。

Themeカードが最初のカードです。名前をタップするとアプリ全体が即座に切り替わります。各テーマ名は自身の角丸やウェイトで表示されるため、タップ前に外観を確認できます。このカードは、System、Light、Darkを含むAppearanceカードの上に配置されています。これらは独立した2つの設定項目です。テーマは色、形状、外観を決定し、System、Light、Darkのいずれかが色の明暗を決定します。

書体を指定するテーマを選ぶと、その書体が書体カードに一度書き込まれます。それ以降はTypefaceカードの設定が優先されます。そこで別の書体を選んだ場合、再度テーマを選択するまでその書体が維持されます。テーマの見出し用書体はそのカードの対象外であり、タイトルに適用され続けます。書体には専用のセクションがあります。

これらのテーマで使用される書体にはLatinおよびLatin Extended-Aのみが含まれているため、それらのテーマ下ではキリル文字およびCJKテキストはシステム書体にフォールバックされます（Collieテーマでは付属のキリル文字書体が維持されます）。

テーマをインポート

Themeカードで.jsonファイルをインポートし、プレビューを確認して適用をタップします。

1. 01
   Themeカードでインポートをタップし、.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」という1行が続きます。ファイルは以下のいずれかに該当する場合に拒絶されます。

• —
  JSONオブジェクトではない、または64 KiBを超えている。
• —
  色が設定されていない。
• —
  未知のキー、Collieが読み取れないバージョン、色以外の値、またはCollieに含まれない書体が存在する。
• —
  形状の指定値がリストに存在しない、または指定値が入るべき場所に数値が入力されている。
• —
  surfaceブロック、fonts.displayフォント、またはansiブロックを含んでおり、かつversion 1と記述されている。
• —
  ansiブロックに必要なキーがない、アルファ値を含む色がある、またはターミナルパレットの基準を満たしていない。
• —
  不正なid、name、またはauthorが含まれているか、idが同梱のテーマと一致している。
• —
  インポート済みテーマが9件目になる。Collieはファイルを選択する前のインポートタップ時と、適用時の両方で拒絶します。

Collieは適用でもう1点確認します。idがデバイス上にすでに存在するファイルは、「already imported」として拒絶されます。元のテーマを先に削除するか、idを変更してください。

テーマはアプリの外観のみを変更します。コードの実行、ファイルの読み込み、サーバーへの通信はできません。

1台のデバイスに保存できるインポートテーマは最大8件です。削除はインポートされたテーマの適用中のみ動作します。そのテーマを削除し、アプリはCollieのデフォルトに戻ります。書体はそのまま維持されます。

コントラストレポート

このレポートは両モードにおけるテーマの色を測定します。基準に満たない行は警告として表示され、そのまま受け入れることも可能です。

ターミナルパレットのみが例外であり、その基準を満たさないファイルは拒絶されます。表にはその他の要素の最低基準が記載されています。最低基準はコントラスト比を表し、数値が大きいほど視認性が高くなります。

• —
  破壊的なテキストは、その色を維持する場合、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
   ファイルをスマートフォンに送信し、インポートします。

エクスポートでは、テーマの内容を保持できる最小の バージョン を書き出します。

テーマの作成

ファイルにはこれらのキーのみを含めます。不明なキーが含まれていると、そのキー名とともに拒否されます。以下は完全なバージョン 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個のキーをすべて保持するか、1つも保持しないかのいずれかです。ターミナルパレットを参照してください。
• —
  $schemaは指定可能ですが無視されます。ファイルサイズは最大64 KiBです。

値は#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個のトークン

それぞれの半分には、4つのグループから以下を任意に設定できます。

Shape

surface ブロック内の5つのワードでコントロールの形状を設定します。各キーには定義済みのリストから1つのワードを指定します。

ワードは名前であり、数値ではありません。半径や余白のステップを自由に変更できるようにすると、タップ領域の最小サイズが崩れたり、正方形のコントロールがスタジアム形状になったりする可能性があります。各リストの最初のワードは、バージョン2より前の外観です。

• —
  円は円のまま維持されます。 ステータスドットのように幅と高さが等しい形状は角丸ステップではないため、radius による影響を受けません。
• —
  マークされた行は角丸の半径に従います。 sharp では、選択中またはブロック中の行の左端に2pxのバーが表示されます。soft および round では、四方に2pxのリングと薄いシャドウが表示されます。左側のバーは角丸と組み合わせられないためです。
• —
  roomy がデフォルトを下回ることはありません。 タップターゲットは44px以上を維持します。アイコンとヘッダー内の犬のサイズは維持されるため、周囲のスペースのみが拡大します。

Look

surface ブロックのさらに5つのキーと1つのフォントキーでページの外観を設定します。これらも定義済みワードの同じルールに従います。

fonts.displayには、ページタイトルおよびヘッダー内の名前で使用する6種類の書体のうち1つを指定します。書体を指定しないテーマでは、従来どおり標準の書体でタイトルを描画します。Collieは、テーマで指定されている場合にのみ表示用書体を取得します。

• —
  下地には画像ファイルを描画しません。 グラデーションとグレインは、テーマ自体の色から生成されます。アプリの各パネルは不透明なため、パネル同士の隙間から下地が見えます。
• —
  ページのテキストは下地に対してコントラストを計測します。 コントラストレポートがグラデーションの終端とグレインの線色をチェックするため、下地によってテキストが見えなくなることはありません。
• —
  グラデーション適用時、各バーには単色のページカラーが維持されます。 タブレットでは、ヘッダーと各バーがページ上部のボックスのように見え、その下が暗く見える場合があります。文字の設定だけでこれを変更することはできません。
• —
  ステータスバーはバンドに追従します。 chrome: bandではブラウザのステータスバーにバンドカラーが適用され、pageではページカラーが適用されます。
• —
  rowsはすべてのリストグループに適用されます。 これにはSettingsインデックス内のリストも含まれます。

ターミナルパレット

ansiブロックにより、ターミナルのミラーに独自の16色、文字色、下地色を指定できます。

このブロックには、18個のキーをすべて含めるか、1つも含めないかのどちらかです。16スロット分の"0"から"15"、テキスト用のink、背景用のgroundを指定します。パレットが不完全だと、1つのペインに2つのパレットが混在することになります。各色はアルファ値なしの#rrggbbまたはoklch()です。

注。 パレットはダークモード向けに記述してください。ミラーは常に暗い下地上に描画され、ライトモードではCollieがミラーの色を個別に変更するのではなく、ミラー全体を反転させます（理由）。ライトモードでは、指定した色の鏡像が表示されます。テーマのライトbackgroundへと反転するgroundを選択すると、両方のモードでミラーがページになじみます。

ゲートを通過できない色は拒否され、そのキー名が表示されます。ターミナルは最も目を通す場所であるため、警告ではなくエラーとして扱われます。

明色セットは固定のリストです。Muse ミラーはこれら 4 つのスロットを明るい前景色として扱います。他の 12 スロットはこの基準値以下に保たれるため、カスタムパレットでもこの定義が維持されます。

テーマで変更できないもの

テーマは色の値、書体、コントロールの形状、ページ全体の質感、ターミナルのパレットを変更します。それ以外のものは変更できません。

• —
  レイアウトとタップ領域のサイズ。 スマートフォン向けのレイアウトは崩れやすいため制限があります。radius、shadow、density、weight、border には固定のキーワードのみが使え、任意の値を指定することはできません。また、roomy をデフォルト値未満に設定することはできません。
• —
  フォントサイズとアニメーション。 テーマでは書体と太さを指定できますが、サイズは指定できません。また、アニメーションの動作を変更することもできません。
• —
  Collie の犬のアイコン。 ヘッダー、ホーム画面のアイコン、スプラッシュ画面は、どのテーマでも同じ見た目になります。
• —
  ステータスの意味。 アイコンと表示テキストは変更されないため、赤やオレンジを選択した場合でも、ブロック状態が完了状態のように見えることはありません。
• —
  任意の値、生の CSS、リモートフォント。 各キーには色、またはリストから選択したキーワードを指定します。フォントは Collie に同梱されているリストから指定します。

初回描画とステータスバー

選択したテーマは最初のフレームから画面に反映されます。アプリの読み込み前に小さなスクリプトが設定を読み出すため、同梱のテーマでデフォルト設定が一瞬表示されることはありません。インポートしたテーマも同様に動作しますが、1 点だけ例外があります。トークンが片方のモードにしか設定されていない場合、そのトークンは最初の 1 フレームだけデフォルト色で表示されます。アプリは読み込み時にもテーマを再検証します。検証に失敗した保存済みテーマは破棄され、Collie のデフォルトテーマが適用され、ブラウザコンソールに理由が出力されます。ステータスバーにはテーマの 2 つのページ色が反映されます。テーマに chrome: band が指定されている場合は、2 つの帯の色が反映されます。

トラブルシューティング

よくある問題と、それぞれの原因および解決方法を以下に示します。

• —
  テーマの特定のトークンにデフォルト色が適用される。 ファイル内で該当トークン、または該当するモードの設定が欠落しています。欠落したトークンには Collie デフォルトテーマの値が使われます。適用したい側のモードにトークンを追加してください。
• —
  書体が変更されない。 テーマの書体は、テーマを選択した時点で 1 度だけ適用されます。その後 書体 で別の書体を選択した場合は、その設定が優先されます。書体を再選択するか、テーマを再度選択してください。
• —
  形状キーワードを指定しても変化がない。 指定したキーワードがリストのデフォルト値であるか、キー自体が存在しない可能性があります。省略されたキーにはデフォルトのキーワードが適用されます。Shape と Look の表でスペルを確認してください。
• —
  ファイルが拒絶され、ansi が表示される。 パレットには暗色空間で 18 個のキーすべてが含まれている必要があり、各色はそれぞれの検証基準を満たさなければなりません。エラー時にはキー名と測定された数値が表示されます。
• —
  ブラウザのデータを消去すると、テーマは初期状態に戻ります。 インポートしたテーマはこのブラウザ内にのみ保存されます。ファイルを再度インポートしてください。