> ## Documentation Index
> Fetch the complete documentation index at: https://docs.myrmagent.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# テーマスタジオ

> ワークスペース全体のパーソナライズ — 壁紙・プリセット・コミュニティマーケット・ゼロフリッカー永続化。

# テーマスタジオ

Myrm のテーマスタジオはワークスペース全体の外観カスタマイズ — 壁紙・配色・フォント・レイアウト — を提供します。4 ステップのエディタ、17 種の組み込み精品プリセット、AI 生成スキル、コミュニティテーママーケットを備えています。

## コア能力

* **17 種の組み込みプリセット** — 5 つのスタイルを網羅（目の負担軽減・自然・効率・穏やか・カラフル）。各プリセットは WCAG AA コントラスト認証済みで、フォントとレイアウトの連動にも対応
* **全ウィンドウ壁紙** — PNG / JPEG / WebP / MP4 動画壁紙（最大 80MB）をアップロード。動画からは自動でカバー帧を抽出。スマホと低速回線では自動的に静的画像へ縮退
* **テーマエディタ** — 4 ステップのウィザード（壁紙を選ぶ → テーマ色を設定（OKLCh が色相を自動派生）→ レイアウトを選ぶ → `.myrmtheme` ポータブルパッケージとして書き出す）。DOM でリアルタイムプレビュー、Apply 前に設定書き込みはゼロ
* **コミュニティテーママーケット** — コミュニティテーマの閲覧・購入・ワンクリックインストール。クリエイターは制作センターから投稿し、Stripe で精算。管理者が投稿を却下する場合は却下理由を必ず記入

## ルーティング対応的可読性

Myrm はページを自動的に **集中型**（チャットページ）と **機能型**（カンバン・設定・Brain など 20 以上の機能ページ）の 2 つのシーンに分類します。機能ページでは surface の不透明度の下限が自動で上がり（ナビバー 0.92 / サイドバー 0.90 / メインコンテンツ 0.94 / カード 0.96）、壁紙の色彩が鮮やかでも文字は鮮明に読めます。

レイアウト（あなたの美的選択）とシーン（ルーティング駆動の可読性）は直交しています — ページを切り替えると自動で適応し、設定は不要です。

## ゼロフリッカーの永続化

テーマは Refresh・新しいウィンドウ・再起動の後も 3 層の仕組みで保持されます。

1. **プリ初期化スクリプト** — `beforeInteractive` のブロッキングスクリプトが React hydration より前に `localStorage` からすべてのテーマ token を復元し、デフォルトの白画面フリッカーを消します
2. **ThemeProfileProvider** — Root Layout レベルの React Context が、有効化されている theme profile をリアルタイムにコンパイルし、CSS 変数を同期します
3. **ConfigSync** — テーマ設定のメタデータをサーバーへ同期し、デバイス変更後に自動復元します（壁紙の素材は `.myrmtheme` で再インポート）

## ポータブルな `.myrmtheme` パッケージ

`.myrmtheme` ファイルへ書き出しできます — 安全な ZIP パッケージで、`recipe.json` マニフェスト、ヒーロー画像、プレビューサムネイル、メディア素材を含みます。サーバーはパッケージごとに検証します。zip 爆弾検出、パストラバーサル防御、MIME ホワイトリスト、animated WebP の拒否。

Tauri デスクトップ（Windows / macOS / Linux）では、`.myrmtheme` ファイルをダブルクリックするだけでインポートプレビューが開きます。

## AI によるテーマ生成

組み込みの `generate-myrm-theme` スキルが、自然言語の説明から構造化された Recipe JSON を生成します。出力はそのまま Theme Studio のプレビューに入り、ワンクリックで適用できます — **生の CSS も JavaScript も注入しません**。

## アーティファクトのテーマ継承

AI 生成の HTML アーティファクトと MCP App の iframe は、ワークスペースのテーマを自動的に継承します。widget-theme-bridge が 22 の CSS 変数を意味的な widget token へマッピングし、70 以上の Tailwind 風ユーティリティクラスとフォームのプリスタイルを含みます。

デスクトップペットのレアリティオーラと状態バブルは同じホスト購読を共有します — Theme Studio でパレットをリアルタイムにプレビューしたりプリセットを切り替えたりすると、アーティファクトとペットのアクセントが同期して更新され、ページの再読み込みは不要です。

## モーションの削減

OS の「モーションを減らす」設定が有効なとき、Myrm は**すべての**レンダリング面のすべてでこの設定に従います — メインウィンドウだけではありません。メイン画面、AI 生成の埋め込み Widget と MCP App の iframe、ブラウザ拡張のサイドバーとポップアップ、デスクトップのプライバシーロック画面は、それぞれ独立してアニメーションを止めます。**お互いに独立した document なので、メインのスタイルシートでは制御できない**からです。

実際にぶつかる詳細が 2 つ:

* **移動系のアニメーションは停止、フェードは残す。** 不快感を起こすのは大きな移動なので、スライドとズームは即座に完了します。短い不透明度のフェードは残し、状態が変わったことは察知できるようにしています
* **ポップアップは通常どおり閉じられます。** オーバーレイは「アニメーション終了」イベントでアンマウントします。ガードを `animation: none` と書くとイベントが発火せず、ポップアップが閉じられなくなります；そのためここではアニメーションを 0.01 ミリ秒に圧縮して 1 回だけ再生します — 効果は止まりますが、閉じる経路は有効です。

この検査は lint ゲートに組み込まれています。独立 document にアニメーションを追加しながらガードを忘れると、ビルドが直接失敗します。Canvas で描画する表示テンプレートはこの設定の影響外です — 既知の制限であり、隠さず明記します。

## 3 つのデプロイ形態での一貫性

| デプロイ形態 | テーマ機能 |
| - | - |
| **クラウドサンドボックス** | 完全なマーケット + ConfigSync + ギャラリー |
| **ローカル Web UI** | 完全な Theme Studio + `.myrmtheme` インポート + 全プリセット |
| **Tauri デスクトップ** | 上記すべて + `.myrmtheme` のファイル関連付け + マルチウィンドウ同期 |

## クイックスタート

1. **設定 → テーマスタジオ** を開きます（設定の外観タブからでも可）。
2. 組み込みプリセットを選ぶか、ゼロから作り始めます。
3. 壁紙のアップロード、テーマ色の調整、レイアウトの選択。
4. **適用** で保存するか、**書き出し** で `.myrmtheme` ポータブルパッケージを生成します。
5. **ギャラリー** タブでコミュニティテーマを見るか、**制作センター** から自分の作品を投稿します。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.