ForcedSkinForcedSkin
テーママーケット作成ガイド

🎨 テーマ作成ガイド

ForcedSkin のテーマ JSON スキーマとパレットフィールドのルールを学び、任意のサイト向けパレットを設計してコミュニティに投稿しましょう。

クイックスタート

モードを選ぶ

テーマを light （ライトパレット）か dark （ダークパレット）のどちらで動かすか決めます。

色を入力する

下記のフィールド仕様に従ってください — 最低限、必須キーをすべて JSON に含める必要があります。

審査に提出する

テーマ のページで「テーマを投稿」をクリックしてください。管理者の承認後、全員に公開されます。

カラーフィールド

すべてのパレット値は hex (#RRGGBB) 文字列または CSS rgba(...) 値である必要があります。

background必須

ページの主背景 — ライトテーマは白に近く、ダークテーマは深いニュートラル色。CSS var: --color-background

例: #F8FFF8 / #101410

foreground必須

主要テキスト — 背景に対して読みやすいコントラスト。CSS var: --color-foreground

例: #2C3E2C / #E0E0E0

surface必須

カード/パネル/コンテナの塗り — 背景よりわずかに浮いた色。CSS var: --color-surface

例: #F0FFF0 / #1E221E

surfaceMuted任意

控えめな hover/サブコンテナ — surface から一段階下げた色。CSS var: --color-surface-muted

例: #F5FDF5 / #161816

border必須

区切り線 — 通常は低彩度のグレー/半透明トーン。CSS var: --color-border

例: #D8E8D8 / #333633

muted必須

控えめなテキストとプレースホルダー。CSS var: --color-muted

例: #6C7E6C / #A0A0A0

primary必須

ボタン/リンク/フォーカス用の主要ブランドランプ — 単色またはランプ (50–950) 可。最低限シェード 500/600/700 が必要。CSS 変数 --color-primary- とシェードトークン (50–950) にマップ

例: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondary任意

チップ/ゴーストボタン用の二次アクセントランプ — primary と同構造。--color-secondary- とシェードトークンにマップ

例: { "500": "#AAA", ... }

accent任意

ハイライト、バッジ、スポットライト色 — primary と同構造。--color-accent- とシェードトークンにマップ

例: { "500": "#FFEB3B", ... }

vars任意

任意の CSS カスタムプロパティ — キーから「--」を省略。値は :root にそのまま適用

例: { "custom-radius": "8px" }

カラーランプ

JSON キー primary、secondary、accent は、以下のいずれかの作成スタイルを受け付けます:

コンパクト（3つのコアシェード）

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

エンジンはシェード 500 をデフォルトの色相として扱い、600/700 は hover/active の状態をカバーします。

フルランプ（50 → 950、11段階）

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

完全なランプを公開すると、あらゆる箇所でより滑らかなトーン遷移が得られます。

ヒント: シェード ID は Tailwind 形式のランプに従います: 50 が最も明るく、950 が最も暗いです。ライトテーマは主に 500/600/700、ダークテーマは 400/500/600 を使うことが多いです。

完全サンプル

🌿 ライトサンプル (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 ダークサンプル (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

カスタム変数 (vars)

デフォルトトークンで足りない場合は、 vars ノードの下に追加の CSS 変数を置きます — 各キーから -- プレフィックスは省略してください。

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Slug ルール (name)

  • 小文字 ASCII 英字、数字、ハイフン（ a-z 0-9 - ）のみ使用可能。
  • 「dark-ocean」や「light-sakura」のような簡潔な「モード-スタイル」形式を推奨します。
  • Slug はグローバルに一意である必要があります — 公開後は変更できないため、事前に十分確認してください。
  • 最大長は 50 文字です。

投稿と審査

🔐 投稿前にサインインしてください。

⏳ 提出物は審査キューに入り、スタッフは通常 1〜3 営業日以内に対応します。

✅ 承認されたテーマはマーケットプレイスに表示され、誰でもお気に入り登録できます。

❌ 無効な色、重複する名前、ポリシー違反は却下されます — 削除して修正版を再提出してください。

🚫 悪意のあるコード、ヘイトコンテンツ、明らかな権利侵害パレットは禁止です。

準備はできましたか？テーママーケットでパレットを公開しましょう。

🎨 テーマを投稿