本文へスキップ
ColliePWA

テーマ: 外観を選択するか、独自の外観を追加します。

テーマは単一の小さなJSONファイルです。色、書体、形状、外観、およびターミナルパレットが含まれます。ColliePWAには4つのテーマが同梱されており、スマートフォン内のファイルからさらにインポートできます。

01/テーマの概要

テーマは外観を定義したファイルです。

テーマはアプリケーションの色を、ライト面とダーク面それぞれに対して指定します。また、書体、タイトル用書体、形状、外観、ターミナルミラーの色も指定できます。形状と外観は、radius、shadow、densityなどの10個の単語で定義されます。レイアウト、タップ領域のサイズ、ステータスの意味は維持されるため、どのテーマでもブロック中の項目はブロック中のまま表示されます。

ファイル内のすべての値は、定義済みのキーワードまたは検証済みの色です。ファイルがコードを実行したり、ファイル、フォント、画像を読み込んだりすることはできません。

テーマと外観は別々の設定です。テーマは使用する色を指定します。外観は、システム、ライト、ダークのどちら側を表示するかを指定します。

02/選択

設定でテーマを選択します。

設定を開き、外観を選択して、テーマをタップします。再読み込みなしですぐに適用され、次回ColliePWAを開いたときには最初のフレームからそのテーマが適用されています。Collieを1回タップすると、デフォルトに戻ります。

UIフォントを指定しているテーマは、UIフォントを一度設定します。その後も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

ターミナル環境に慣れ親しんだユーザー向け。クールなブルーグレーに1色のティールアクセント、柔らかな角、微細なグレインと細いアイコン、そして黒に近いブルーを基調とする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ブロックには10個の単語が含まれます。各単語は定義済みのリストから選択し、省略されたトークンにはデフォルト値（そのリストの最初の単語）が適用されます。任意の数値は指定できないため、テーマによってタップ領域のサイズが損なわれることはありません。

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
罫線付きの1つの枠線付きグループとしてのリスト、または各行のカードとしてのリスト。
  • rules
  • cards
icons
すべてのアイコンの線幅。
  • default
  • thin
  • heavy
labels
大文字またはセンテンスケースによる、セクションの小さなラベル。
  • caps
  • sentence

ターミナルパレット

ansiブロックには、18色または0色が含まれます。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ファイルとして書き出されます。これを他の人に送るか、リポジトリに保存すれば、相手も同じ方法でインポートできます。

詳細は テーマ を参照