================================================================
BuMoSm PDF Viewer — テーマファイルの説明
================================================================

このフォルダに .json ファイルを置くと、アプリ起動時に
テーマとして読み込まれます。
ファイルを変更すると自動的に再読み込みされるため、
再起動しなくても結果を確認しながら編集できます。

同梱の dark.json と light.json は見本です。
アプリを更新すると元の内容に戻ります。
変更したいときは別の名前でコピーし、中の "name" も変えてください。


----------------------------------------------------------------
2つの "name" について（最初に読んでください）
----------------------------------------------------------------

テーマファイルには "name" というキーが2箇所に出てきます。
役割がまったく違うので、間違えないでください。

  {
    "name": "BuMoSm PDF Viewer Theme",   <- 【1つめ】3行目あたり
    "themes": [
      {
        "name": "Light",                  <- 【2つめ】設定画面に出るのはこちら
        ...
      }
    ]
  }

【1つめ】トップレベルの "name"

  意味   : テーマファイル全体の名前。
  表示   : 設定画面には表示されません。
  編集   : 編集する必要はありません。
           このアプリのテーマファイルはすべて
           "BuMoSm PDF Viewer Theme" で統一しています。
           新しくファイルを作るときも、この値のまま
           コピーして使ってください。
  注意   : 読み込み後に破棄される値のため、他のファイルと
           同じ名前でも問題ありません。
           ここを書き換えても画面の表示は何も変わりません。

【2つめ】"themes" の中の "name"

  意味   : 個々のテーマの名前。
  表示   : 設定画面の配色一覧に表示されます。
  編集   : 表示名を変えたい場合はこちらを編集してください。
  注意   : すべてのテーマファイルを通して、重複しない名前に
           してください。
           同じ名前のテーマが複数あると、あとから読み込まれた
           ものが先のものを上書きし、設定画面から片方が
           消えてしまいます。
           ファイルの読み込み順は決まっていないため、どちらが
           残るかも一定しません。


----------------------------------------------------------------
ファイルの構造
----------------------------------------------------------------

テーマファイルのトップレベルには2つのキーが必要です。

  "name"    — テーマファイル全体の名前。
               "BuMoSm PDF Viewer Theme" のまま変更しません。

  "themes"  — テーマオブジェクトの配列。
               1つのオブジェクトが設定画面の一覧の1項目に
               対応します。

各テーマオブジェクトのキー:

  "name"       — 設定画面に表示される名前。（必須）
                 他のファイルも含めて重複しないようにします。

  "mode"       — "light" または "dark"。（必須）
                 「OSの設定に従う」を選んでいるときに、
                 このテーマをライトとダークのどちらに
                 適用するかを決めます。

  "colors"     — 色を指定するオブジェクト。（必須）
                 指定できるキーは後述の一覧を参照してください。

  "is_default" — 省略できます。
                 設定画面の並び順で、先に表示されるように
                 なります。


----------------------------------------------------------------
色の書き方
----------------------------------------------------------------

"colors" の値には次の形式が使えます。

  16進カラー    — "#rrggbb" または "#rrggbbaa"
                 例: "#ffffff"、"#1a1a1aff"

  Tailwind名   — Tailwind CSS のカラー名とシェード番号の組み合わせ。
                 例: "neutral-950"、"blue-400"、"white"、"black"
                 番号は 50、100～900（100刻み）、950 が使えます。

  完全透明      — "#00000000"（スクロールバーの背景など、
                 透明にしたい場合に使います）

末尾の2桁でアルファ（透明度）を指定できます。
省略すると不透明として扱われます。

指定しなかったキーは、そのモード（light/dark）の内蔵デフォルト値が
使われます。すべてのキーを書く必要はありません。

名前を間違えたキーはエラーにならず黙って無視されます。
色を変えたのに反映されない場合は、キー名の綴りを
以下の一覧と見比べてください。


================================================================
色キーの一覧（69項目）
================================================================

このアプリで実際に効くキーをすべて記載します。


----------------------------------------------------------------
■ 基本の色（8項目）
----------------------------------------------------------------

  background
    ページを並べる領域の地の色。
    ウィンドウの中で最も広い面積を占めます。

  foreground
    基本の文字色。
    ツールバーのボタンの文字、ページ番号、タイトルバーの文字に
    使われます。

  border
    基本の枠線の色。
    ツールバー・検索バー下の線、サムネイルの枠に使われます。
    背景とページの境目が見分けにくいときは、ページの外側に回す
    枠にも使われます（ライトテーマの通常表示、ダークテーマの色の反転、
    背景が黒いPDFなど）。ページの縁の色は、表示したページから測ります。
    背景やページに溶けて見えないときは、見分けられる明るさまで
    自動で調整されます。もともと見分けられるときは、枠は描きません。

  window.border
    ウィンドウの外周の枠の色。OSへ渡されます（Windows 11 のみ）。
    指定しなければ border と同じ色になります。

  selection.background
    テキストを選択したときのハイライト色。

  overlay
    設定パネルを開いたときに背後の画面へ重ねる幕の色。
    半透明にしてください。

  ring
    キーボード操作でフォーカスが当たった要素を囲む線。

  caret
    入力欄で点滅するカーソル（縦棒）の色。
    ページ番号・倍率・検索・パスワードの各入力欄で使われます。


----------------------------------------------------------------
■ タイトルバーとステータスバー（4項目）
----------------------------------------------------------------

  title_bar.background
    タイトルバーの地の色。
    このアプリではツールバーと検索バーの地にも使われます。
    変更の影響が最も大きいキーのひとつです。

  title_bar.border
    タイトルバーの下に引く線。

  status_bar.background
    ウィンドウ下端のステータスバーの地の色。

  status_bar.border
    ステータスバーの上に引く線。


----------------------------------------------------------------
■ サイドバー（7項目）
----------------------------------------------------------------

目次・サムネイル・検索結果を表示する左側のパネルです。

  sidebar.background
    サイドバーの地の色。

  sidebar.foreground
    サイドバーの文字色。目次の見出しなど。

  sidebar.border
    サイドバーと本文の境界線。

  sidebar.accent.background
    サイドバー内で強調する部分の背景。

  sidebar.accent.foreground
    その文字色。

  sidebar.primary.background
    サイドバー内で最も目立たせる部分の背景。

  sidebar.primary.foreground
    その文字色。


----------------------------------------------------------------
■ タブ（6項目）
----------------------------------------------------------------

上部のタブバーと、サイドバーのタブに使われます。

  tab_bar.background
    タブが並ぶ帯の地の色。サイドバーのタブの帯にも使われます。

  tab_bar.segmented.background
    連結型タブの帯の地。

  tab.background
    非アクティブなタブの地。
    light.json では "#00000000"（透明）にして、
    帯の色をそのまま見せています。

  tab.foreground
    非アクティブなタブの文字色。

  tab.active.background
    いま選ばれているタブの地。

  tab.active.foreground
    いま選ばれているタブの文字色。


----------------------------------------------------------------
■ ボタン（12項目）
----------------------------------------------------------------

ツールバーのボタンと設定パネルのボタンに使われます。

  button.background
    通常のボタンの地。

  button.foreground
    通常のボタンの文字色。

  button.hover.background
    マウスを乗せたときの地。ツールバーで頻繁に見える色です。

  button.active.background
    押している間の地。ツールバーで頻繁に見える色です。

  button.primary.background
    強調するボタンの地。設定パネルの「適用」など。

  button.primary.foreground
    その文字色。

  button.primary.hover.background
    マウスを乗せたときの地。

  button.primary.active.background
    押している間の地。

  button.secondary.background
    控えめなボタンの地。設定パネルの「キャンセル」など。

  button.secondary.foreground
    その文字色。

  button.secondary.hover.background
    マウスを乗せたときの地。

  button.secondary.active.background
    押している間の地。


----------------------------------------------------------------
■ アクセントと補助色（10項目）
----------------------------------------------------------------

  accent.background
    選択中の項目など、注目させる部分の地。
    設定パネルの選択欄で、いま選ばれている項目に使われます。

  accent.foreground
    その文字色。

  primary.background
    強調色。サムネイルの現在ページを囲む線に使われます。

  primary.foreground
    強調色の上に置く文字色。

  primary.hover.background
    マウスを乗せたときの強調色。

  primary.active.background
    押している間の強調色。

  secondary.background
    控えめな要素の地。

  secondary.foreground
    その文字色。

  secondary.hover.background
    マウスを乗せたときの地。

  secondary.active.background
    押している間の地。


----------------------------------------------------------------
■ 控えめな色とエラー色（4項目）
----------------------------------------------------------------

  muted.background
    目立たせない部分の地。

  muted.foreground
    控えめな文字色。
    「PDFファイルをここにドロップ」の案内文、ステータスバーの
    文字、目次で飛び先が無い項目に使われます。

  danger.background
    エラー色。パスワードが違うときのメッセージ色に使われます。

  danger.foreground
    エラー色の上に置く文字色。


----------------------------------------------------------------
■ 入力欄（1項目）
----------------------------------------------------------------

  input.border
    入力欄を囲む枠線。
    ページ番号・倍率・検索・パスワードの各欄と、
    設定パネルの数値入力欄で使われます。


----------------------------------------------------------------
■ ポップアップ（2項目）
----------------------------------------------------------------

  popover.background
    ポップアップの地。
    スクロールバードラッグ中のページ番号吹き出し、
    表示履歴の一覧、右クリックメニュー、
    ページ番号の省略メニューの地に使われます。

  popover.foreground
    ポップアップの文字色。


----------------------------------------------------------------
■ ドラッグ＆ドロップ（2項目）
----------------------------------------------------------------

  drag.border
    PDFファイルをウィンドウにドラッグしてきたときに、
    窓を囲む枠の色。

  drop_target.background
    ドラッグしたものを受け取れる場所を示す背景。


----------------------------------------------------------------
■ 一覧（6項目）
----------------------------------------------------------------

目次・サムネイル・検索結果・表示履歴の各一覧に使われます。

  list.background
    一覧の地の色。

  list.hover.background
    行にマウスを乗せたときの背景。
    目次や検索結果で頻繁に見える色です。

  list.active.background
    いま見ている場所に対応する行の背景。
    目次で現在位置を示すときに使われます。

  list.active.border
    その行を囲む線。

  list.even.background
    偶数行の背景（縞模様にする場合）。

  list.head.background
    一覧の見出し行の背景。


----------------------------------------------------------------
■ スクロールバー（3項目）
----------------------------------------------------------------

  scrollbar.background
    スクロールバーの溝の色。
    light.json では "#fafafa00" と透明にしています。

  scrollbar.thumb.background
    つまみの色。

  scrollbar.thumb.hover.background
    つまみにマウスを乗せたときの色。


----------------------------------------------------------------
■ スイッチ（2項目）
----------------------------------------------------------------

設定パネルのオン・オフ切り替えに使われます。

  switch.background
    スイッチの土台の色。

  switch.thumb.background
    スイッチのつまみの色。


----------------------------------------------------------------
■ 選択中のボタン（1項目）
----------------------------------------------------------------

  link
    ツールバーと検索バーで、効いているボタン（目次・サムネイル・
    しおり・検索の各オプション）のアイコンの色。
    light.json では "#fe4e4e"（赤）、dark.json では "#5ac1fe"（青）にしています。
    指定しなければ、ダークは青、ライトは赤になります。


----------------------------------------------------------------
■ その他（1項目）
----------------------------------------------------------------

  skeleton.background
    読み込み中に表示される灰色の仮置き背景。


================================================================
テーマで変えられない色
================================================================

次の3つはテーマの影響を受けません。紙の上に重ねて表示するもので、
周囲の明るさではなく紙の白を基準に決まるためです。
ダークテーマにしても変わりません。

  ・ビットマップが届くまでのページ位置に敷く色（薄い灰色）
  ・検索で一致した箇所のハイライト（黄色）
  ・いま選ばれている一致箇所のハイライト（橙色）


================================================================
最小構成の例
================================================================

{
  "name": "BuMoSm PDF Viewer Theme",
  "themes": [
    {
      "name": "My Dark",
      "mode": "dark",
      "colors": {
        "background": "#1e1e1e",
        "foreground": "#d4d4d4",
        "border": "#3e3e3e",
        "title_bar.background": "#3c3c3c",
        "status_bar.background": "#007acc",
        "sidebar.background": "#252526",
        "sidebar.foreground": "#cccccc",
        "tab_bar.background": "#2d2d2d",
        "tab.active.background": "#1e1e1e",
        "tab.active.foreground": "#ffffff",
        "tab.foreground": "#969696",
        "muted.foreground": "#8a8a8a",
        "selection.background": "#264f78",
        "primary.background": "#0e639c",
        "primary.foreground": "#ffffff",
        "list.hover.background": "#2a2d2e",
        "list.active.background": "#37373d",
        "popover.background": "#252526",
        "popover.foreground": "#cccccc",
        "input.border": "#3e3e3e",
        "scrollbar.thumb.background": "#4e4e4e",
        "drag.border": "#0e639c"
      }
    }
  ]
}

設定画面には "My Dark" と表示されます。
"BuMoSm PDF Viewer Theme" はどこにも表示されません。


================================================================
1つのファイルに複数のテーマを入れる
================================================================

"themes" の配列に複数のオブジェクトを並べられます。
ライトとダークの対になるテーマを1つのファイルにまとめる、
といった使い方ができます。

{
  "name": "BuMoSm PDF Viewer Theme",
  "themes": [
    { "name": "Solarized Light", "mode": "light", "colors": { ... } },
    { "name": "Solarized Dark",  "mode": "dark",  "colors": { ... } }
  ]
}

この場合、設定画面には「Solarized Light」と「Solarized Dark」の
2項目が別々に表示されます。


================================================================
補足
================================================================

- JSONの構文エラーがあるファイルは読み込み時に無視されます。
  設定画面の一覧にも表示されません。

- 名前を間違えたキーはエラーにならず黙って無視されます。
  色を変えたのに反映されない場合は、キー名の綴りを
  一覧と見比べてください。

- 内蔵テーマ（Light、Dark）と同じ名前を "themes" の "name" に
  付けると、内蔵テーマが置き換えられます。
  別のテーマとして追加したい場合は、別の名前にしてください。

================================================================
