カスタム Codex テーマの作り方
読みやすさを犠牲にせず、サーフェス、インク、アクセント、セマンティックカラー、フォント、コードハイライトの調和の取れた Codex パレットをデザインします。
要約
組み込みのライトまたはダークの外観から始め、サーフェス、前景のインク、アクセント、コントラスト、コードテーマ、UI フォント、コードフォント、セマンティックカラーという役割を一度に1つずつ定義します。共有する前にすべての状態をプレビューしてください。
Codex App は、ベーステーマ、アクセント、背景、前景、UI フォント、コードフォント、共有のコントロールを公式に文書化しています。このワークフローは macOS 向けビルド 26.707.72221 でレビューされました。
役割ベースのパレットを構築する
魅力的な5色を先に決めてランダムに割り当てるのはやめましょう。役割から始めます。
- サーフェスはメインのキャンバスです。
- インクは主要な前景色です。
- アクセントはアクションと選択状態を示します。
- diff 追加とdiff 削除には、区別できるセマンティックな意味が必要です。
- スキルはメインのアクセントと競合せずに認識できる色にします。
視覚的な検討ではパネル用に近い2つ目のサーフェスを使っても構いませんが、ネイティブの共有ペイロードが保存するのはメインのサーフェスであり、多くのインターフェース状態はコントラストから導出されることを覚えておいてください。
エクスポート前にテストする
長い段落、小さなメタデータ、無効化されたコントロール、キーボードフォーカス、コードブロック、インラインコード、追加、削除、選択行を確認してください。操作が多いタスクと空のホーム画面の両方でテストします。5色の帯では上品に見えるパレットでも、薄いテキストが導出されたパネル色の上に載ると読めなくなることがあります。
テーマ名、対応バリアント、Codex ビルド、プラットフォーム、作成日、ソース、ライセンスを記録しておきます。復元用に、既知の正常な組み込みテーマを使える状態にしておきましょう。
テーマが安定したら、文書化されていない形式を手作業で再構成するのではなく、Codex 経由でエクスポートしてください。公開する前に、テーマを安全に共有する方法、セキュリティポリシー、ライセンスに関する注記を読んでください。