テーマ

テーマは、アプリケーション全体の見た目を変更します。キャンバス、チャート、ライセンス管理の地球儀の色に加えて、コントロールの形状、フォント、アイコンも変わります。

テーマの選択

外観の設定を開く

「設定」を開き（Windows と Linux では Ctrl+,、macOS では Cmd+,）、「外観」を選択します。

テーマを選ぶ

「設定 > 外観 > テーマ」でテーマを選択します。「システム」はオペレーティングシステムのライトまたはダークの外観に従います。「ライト」と「ダーク」は組み込みのテーマで、有効になっている拡張機能はそれぞれ自身のテーマを一覧に追加します。Copper Night と Copper Day のように、テーマファミリーにライトテーマとダークテーマの両方がある場合、一覧には「Copper（システムに従う）」も表示されます。これを選ぶと、オペレーティングシステムの切り替えに合わせて 2 つのテーマが切り替わります。

結果を確認する

テーマはすぐに切り替わります。ライセンス管理のダッシュボードの「地球儀のスタイル」も、同じダイアログで設定します。

設定を開かずにテーマを切り替えることもできます。コマンドパレットからそのテーマの「外観」コマンド（たとえば「外観: Pixel」）を実行するか、アクティビティバーの下部にある「設定」アイコンをクリックして「テーマ」サブメニューでテーマを選択します。

Copper Night テーマで表示された「Settings」ダイアログの「Appearance」ページ。「Interface language」、Copper Night に設定された「Theme」、「Globe style」の各設定と「Application」カテゴリが表示されています — Copper Night テーマでの設定

Copper Night テーマで表示されたライセンス管理のダッシュボード。タイル、サイドバー、アクティビティバーにテーマが適用されています — Copper Night テーマでのライセンス管理のダッシュボード

密度と文字サイズ

テーマは、コントロールの間隔の詰まり具合と文字の大きさを決めます。「設定 > 外観」の「密度」と「文字サイズ」を使うと、この 2 つの値をすべてのテーマについて変更できます。

設定	値
密度	「テーマに従う」、「コンパクト」、「標準」、「ゆったり」
文字サイズ	「テーマに従う」、「小」、「標準」、「大」

既定値の「テーマに従う」では、現在のテーマの値が使用されます。

サンプルテーマ

Babel は、サンプルとして一連のテーマパッケージを公開しています。これらは拡張機能ビューに一覧表示されます。パッケージをインストールすると、そのテーマが「設定 > 外観 > テーマ」に表示されます。

パッケージ	テーマ	外観
Copper	Copper Night、Copper Day	チャコールまたは羊皮紙色の地に銅色のアクセント。XML ルールを開くコマンド付き
Amethyst	Amethyst Night、Amethyst Day	深いプラム色またはライラック色の地にアメジスト色のアクセント。独自のアクティビティバーアイコン付き
Parchment	Parchment Day、Parchment Night	紙とインク：質感のある面、スタンプ風のボタン、手描きのアイコン
Pixel	Pixel	ライトグレーの配色に、ピクセルフォント、ピクセルアートのアイコン、角ばったコントロール

Parchment と Pixel には画像が含まれており、Babel Desktop 0.3.0 以降が必要です。それより古いバージョンでは、より新しい Babel Desktop が必要なものとして一覧に表示され、インストールされません。

Pixel

Pixel はライトテーマ 1 つだけで構成されているため、オペレーティングシステムの外観には従いません。パッケージにコードは含まれていません。カラートークン、形状の設定、3 つのフォントファイル、SVG 画像によってアプリケーションの見た目を変更します。

変更されるのは次の点です。

色：パネルとステータスバーはライトグレーで、アクティビティバー、主要なボタン、アクティブなタブ、フォーカスリングには 1 色のダークグレーが使われます。チャートには、グレーの階調と、スチールブルーとオーカーという 2 つの落ち着いた色相が使われます。
フォント：インターフェイスには Pixel Operator、等幅のテキストには Departure Mono が使われます。どちらのフォントもパッケージに含まれています。
形状：四角い角、太い枠線、ボックス型のタブ、輪郭線付きのフィールド。
アイコンとロゴ：インターフェイスの 44 個のアイコンが 16 × 16 のグリッド上にピクセルアートとして描き直され、Babel ロゴもピクセルで描かれています。
チェックボックスとラジオボタン：システムのコントロールの代わりに、四角いピクセルの枠と階段状の円が使われます。

Pixel テーマでの保護の統計。「Renaming」が選択されたボックス型のタブ、ピクセルフォントで表示されたカウンター（リネームされたシンボル 540 個、対象となるシンボル 630 個、カバレッジ 85.71 パーセント）、ダークグレーとスチールブルーで描かれたレーダーチャートとシンボル数のバーが表示されています — Pixel テーマでの実行結果

Pixel テーマで表示された「Settings」ダイアログの「Appearance」ページ。「Interface language」は English、「Theme」は Pixel に設定され、「Globe style」があり、「Density」と「Text size」はどちらも「Follow theme」になっています — Pixel テーマでの設定

ピクセルフォントはピクセルのグリッドに合わせて描かれており、グリッドの整数倍のサイズで最もくっきり表示されます。文字がぼやけて見えたり小さく見えたりする場合は、「文字サイズ」を大きくしてください。

テーマの作成

テーマは小さな拡張機能です。組み込みのライトまたはダークのパレット（base）を出発点にして、列挙したカラートークンだけを上書きし、残りは継承されます。たとえば accent を設定するだけで、ボタン、リンク、選択範囲、地球儀のマーカーの色が変わります。

マニフェストを書く

テーマを 1 つ、またはライトとダークのテーマファミリーを宣言する extension.json ファイルを作成します。

extension.json


{
  "apiVersion": 1,
  "id": "acme.teal",
  "name": "Teal",
  "version": "1.0.0",
  "author": "Acme",
  "license": "MIT",
  "description": "A teal theme family for Babel Desktop.",
  "minApp": "0.1.0",
  "minEngine": "12.0.0",
  "permissions": ["themes"],
  "contributes": {
    "themes": [
      {
        "id": "teal-night",
        "name": "Teal Night",
        "base": "dark",
        "family": "Teal",
        "colors": { "accent": "#2cc7b5", "canvas": "#0f1a1c", "activity-bg": "#0b1416" }
      },
      {
        "id": "teal-day",
        "name": "Teal Day",
        "base": "light",
        "family": "Teal",
        "colors": { "accent": "#0f8a7c" }
      }
    ]
  }
}

マニフェストの規則に従う

id は小文字の publisher.name 形式で、version、minApp、minEngine は 3 つの部分からなるバージョンです。
base は light または dark です。1 つの family で組にできるのは、ライトテーマとダークテーマがそれぞれ 1 つまでです。
colors に指定できるのはドキュメントに記載されたトークンだけで、値はそれぞれ 6 桁の 16 進数です。トークンは、基本パレット（bg、panel、panel-alt、text、muted、line、accent、accent-hover、accent-soft、on-accent、selection、focus、link）、状態を表す色（success、warning、error と、それぞれの -bg の面）、キャンバス、ログ、ステータスバー、アクティビティバー、バッジ、ダッシュボードのタイル、チャートの系列、地球儀を対象としています。未知のトークンは拒否され、有効な名前の一覧が示されます。
省略可能な icons オブジェクトは、activity.settings や canvas.run などの名前の付いたアイコンを、単純なベクター図形に置き換えます。ここでは SVG マークアップは使用できません。SVG ファイルを使用するには、スキンを追加してください。
パッケージは、組み込みの操作（open-assembly、open-project、save、run、cancel、tab-settings、tab-rules、tab-activity、graph-fit、plugins）を実行する commands を追加することもできます。これには commands 権限が必要です。

テーマをインストールする

マニフェストを extension.json として保存し、拡張機能ビューの「ファイルからインストール…」でインストールします。

配布用にパッケージ化する

テーマに説明、画像、翻訳を付けて配布する場合は、.babelext パッケージにまとめます。これは ZIP アーカイブで、extension.json、「詳細」タブに表示される必須の README.md、任意の翻訳版 README.<locale>.md ファイル、media フォルダー内の画像、locales フォルダー内の拡張機能の翻訳が含まれます。MIT ライセンスの Babel Desktop Extension SDK には、マニフェストのスキーマと、パッケージの検証とパッケージ化を行う babel-extension コマンドが含まれています。

テーマを変更するたびに version を上げ、新しいパッケージを古いパッケージに上書きインストールしてください。

形状、コントロール、タイポグラフィ

テーマでは、colors のほかに shape、controls、type を設定できます。3 つとも省略可能で、省略したメンバーは既定値のままになります。

extension.json


{
  "id": "teal-night",
  "name": "Teal Night",
  "base": "dark",
  "family": "Teal",
  "shape": { "radius": "small", "density": "compact", "border": "thin" },
  "controls": { "button": "outline", "tabs": "boxed", "field": "underline" },
  "type": { "body": "sans", "size": "normal" },
  "colors": { "accent": "#2cc7b5" }
}

メンバー	値	既定値
`shape.radius`	`none`、`small`、`medium`、`large`、`round`	`medium`
`shape.density`	`compact`、`normal`、`comfortable`	`normal`
`shape.border`	`thin`、`normal`、`thick`	`normal`
`controls.button`	`solid`、`outline`、`pill`	`solid`
`controls.tabs`	`underline`、`pill`、`boxed`	`underline`
`controls.field`	`outlined`、`filled`、`underline`	`outlined`
`type.body`	`system`、`sans`、`serif`、`rounded`、`mono`、または `font:<fontId>`	`system`
`type.mono`	`mono` または `font:<fontId>`	`mono`
`type.size`	`small`、`normal`、`large`	`normal`

名前付きのフォントファミリーは、コンピューターにすでにインストールされているフォントです。何もダウンロードされません。ユーザーの「密度」と「文字サイズ」の設定が「テーマに従う」以外になっている場合は、そちらが shape.density と type.size より優先されます。これらのメンバーのいずれかを使用するマニフェストは、minApp に 0.2.0 以降を宣言する必要があります。

フォント

.babelext パッケージには独自のフォントを含めることができます。contributes.fonts で宣言し、font:<fontId> で選択します。

extension.json


"fonts": [
  { "id": "inter", "family": "Inter", "file": "fonts/Inter-Regular.woff2", "weight": 400, "style": "normal", "license": "OFL-1.1" },
  { "id": "inter-semibold", "family": "Inter", "file": "fonts/Inter-SemiBold.woff2", "weight": 600, "style": "normal", "license": "OFL-1.1" }
]

フォントファイルは fonts フォルダー内の WOFF2 ファイルで、1 ファイルあたり最大 1 MiB、合計で最大 4 MiB です。
license は必須で、OFL-1.1、Apache-2.0、MIT、CC0-1.0、Ubuntu-1.0 のいずれかでなければなりません。
宣言したファイルはすべてパッケージに含まれている必要があり、フォントファイルはすべて宣言されている必要があります。フォントがネットワークから読み込まれることはなく、extension.json 単体ではフォントを宣言できません。
type.body に使用するファミリーには、レギュラーのほかにウェイト 600 以上のフェイスが必要です。

スキン

skin は、テーマに画像を追加します。省略可能な 4 つの部分で構成されます。

部分	内容
`surfaces`	`window`、`titlebar`、`activitybar`、`sidebar`、`canvas`、`panel`、`dialog`、`statusbar` の背景に敷くテクスチャ
`controls`	`button.primary`、`button.secondary`、`button.icon`、`tab`、`tab.active`、`field` のフェイスと、`checkbox` と `radio` の画像
`icons`	アイコンスロット用の SVG ファイル
`logo`	スタート画面、「バージョン情報」ダイアログ、キャンバスのプライマリターゲットに表示される Babel ロゴの見た目を変える PNG または SVG ファイル

extension.json


"skin": {
  "surfaces": { "window": { "image": "skins/paper.png", "layout": "tile" } },
  "controls": { "button.primary": { "image": "skins/stamp.svg", "slice": [10, 12, 10, 12], "ink": "#ffffff", "tone": "#6b3fa0" } },
  "icons": { "canvas.run": { "file": "skins/run.svg" } },
  "logo": { "file": "skins/mark.svg", "mode": "tint" }
}

画像は skins フォルダーの直下に置きます。PNG ファイルは最大 512 KiB、一辺 2048 ピクセルまでで、2 倍のサイズの @2x ファイルを任意で追加できます。SVG ファイルは最大 64 KiB です。フォルダー全体は 4 MiB 以内に収めます。
コントロールのフェイスは、上、右、下、左を表す 4 つの整数からなる slice によって 9 つの部分に分割されるため、角を変形させずに伸縮できます。フェイスには文字色 ink と背景色 tone も宣言し、そのコントラスト比は 4.5:1 以上でなければなりません。
アイコンやロゴの mode が既定値の tint の場合は、アプリケーションがその場所ですでに使用している色で描画されます。color の場合は、ファイルの色が維持されます。
SVG ファイルは使用前に検査され、スクリプト、スタイル、外部参照、エンティティは拒否されます。
フォルダー内のファイルはすべて使用されている必要があり、マニフェストで指定したファイルはすべて存在している必要があります。extension.json 単体ではスキンを持てません。
スキンを含むマニフェストは、minApp に 0.3.0 以降を宣言する必要があります。アプリケーションのアイコンとインストーラーにはテーマを適用できません。