ComfyUI の外観をカスタマイズする

{
  "id": "dark",                     // 一意である必要があります。他のテーマ ID と同じにすることはできません
  "name": "Dark (Default)",         // テーマ名。テーマセレクターに表示されます
  "colors": {
    "node_slot": {                  // ノード接続スロットの色設定
      "CLIP": "#FFD500",            // CLIP モデル接続スロットの色
      "CLIP_VISION": "#A8DADC",     // CLIP Vision モデル接続スロットの色
      "CLIP_VISION_OUTPUT": "#ad7452", // CLIP Vision 出力接続スロットの色
      "CONDITIONING": "#FFA931",     // 条件制御接続スロットの色
      "CONTROL_NET": "#6EE7B7",     // ControlNet モデル接続スロットの色
      "IMAGE": "#64B5F6",           // 画像データ接続スロットの色
      "LATENT": "#FF9CF9",          // 潜在空間接続スロットの色
      "MASK": "#81C784",            // マスクデータ接続スロットの色
      "MODEL": "#B39DDB",           // モデル接続スロットの色
      "STYLE_MODEL": "#C2FFAE",     // スタイルモデル接続スロットの色
      "VAE": "#FF6E6E",             // VAE モデル接続スロットの色
      "NOISE": "#B0B0B0",           // ノイズデータ接続スロットの色
      "GUIDER": "#66FFFF",          // ガイダー接続スロットの色
      "SAMPLER": "#ECB4B4",         // サンプラー接続スロットの色
      "SIGMAS": "#CDFFCD",          // Sigmas データ接続スロットの色
      "TAESD": "#DCC274"            // TAESD モデル接続スロットの色
    },
    "litegraph_base": {             // LiteGraph ベースインターフェース設定
      "BACKGROUND_IMAGE": "",        // 背景画像。デフォルトは空
      "CLEAR_BACKGROUND_COLOR": "#222", // メインキャンバス背景色
      "NODE_TITLE_COLOR": "#999",    // ノードタイトルテキスト色
      "NODE_SELECTED_TITLE_COLOR": "#FFF", // 選択されたノードのタイトル色
      "NODE_TEXT_SIZE": 14,          // ノードテキストサイズ
      "NODE_TEXT_COLOR": "#AAA",     // ノードテキスト色
      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF", // ノードテキストハイライト色
      "NODE_SUBTEXT_SIZE": 12,       // ノードサブテキストサイズ
      "NODE_DEFAULT_COLOR": "#333",   // ノードデフォルト色
      "NODE_DEFAULT_BGCOLOR": "#353535", // ノードデフォルト背景色
      "NODE_DEFAULT_BOXCOLOR": "#666", // ノードデフォルト枠線色
      "NODE_DEFAULT_SHAPE": 2,        // ノードデフォルト形状
      "NODE_BOX_OUTLINE_COLOR": "#FFF", // ノード枠線アウトライン色
      "NODE_BYPASS_BGCOLOR": "#FF00FF", // ノードバイパス背景色
      "NODE_ERROR_COLOUR": "#E00",    // ノードエラー状態色
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", // デフォルトシャドウ色
      "DEFAULT_GROUP_FONT": 24,       // グループデフォルトフォントサイズ
      "WIDGET_BGCOLOR": "#222",       // ウィジェット背景色
      "WIDGET_OUTLINE_COLOR": "#666", // ウィジェットアウトライン色
      "WIDGET_TEXT_COLOR": "#DDD",    // ウィジェットテキスト色
      "WIDGET_SECONDARY_TEXT_COLOR": "#999", // ウィジェットセカンダリテキスト色
      "WIDGET_DISABLED_TEXT_COLOR": "#666", // ウィジェット無効状態テキスト色
      "LINK_COLOR": "#9A9",          // 接続線色
      "EVENT_LINK_COLOR": "#A86",    // イベント接続線色
      "CONNECTING_LINK_COLOR": "#AFA", // 接続中の線色
      "BADGE_FG_COLOR": "#FFF",      // バッジ前景色
      "BADGE_BG_COLOR": "#0F1F0F"    // バッジ背景色
    },
    "comfy_base": {                  // ComfyUI ベースインターフェース設定
      "fg-color": "#fff",            // 前景色
      "bg-color": "#202020",         // 背景色
      "comfy-menu-bg": "#353535",    // メニュー背景色
      "comfy-menu-secondary-bg": "#303030", // セカンダリメニュー背景色
      "comfy-input-bg": "#222",      // 入力フィールド背景色
      "input-text": "#ddd",          // 入力テキスト色
      "descrip-text": "#999",        // 説明テキスト色
      "drag-text": "#ccc",           // ドラッグテキスト色
      "error-text": "#ff4444",       // エラーテキスト色
      "border-color": "#4e4e4e",     // 枠線色
      "tr-even-bg-color": "#222",    // テーブル偶数行背景色
      "tr-odd-bg-color": "#353535",  // テーブル奇数行背景色
      "content-bg": "#4e4e4e",       // コンテンツエリア背景色
      "content-fg": "#fff",          // コンテンツエリア前景色
      "content-hover-bg": "#222",    // コンテンツエリアホバー背景色
      "content-hover-fg": "#fff",    // コンテンツエリアホバー前景色
      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem" // バーシャドウ効果
    }
  }
}

/* 可読性を向上させるために、入力欄とメニューのフォントサイズを大きくする */
.comfy-multiline-input, .litecontextmenu .litemenu-entry {
    font-size: 20px !important;
}

/* 選択しやすくするために、コンテキストメニューの項目を大きくする */
.litegraph .litemenu-entry,
.litemenu-title {
  font-size: 24px !important; 
}

/* カラーパレットで利用できない特定の要素のカスタムスタイル */
.comfy-menu {
    border: 1px solid rgb(126, 179, 189) !important;
    border-radius: 0px 0px 0px 10px !important;
    backdrop-filter: blur(2px);
}