テーマカラー構築ツール - Theme Construction Tool

Primaryカラー

Primary Light（明るい色）

Primary Main（メインカラー）

Primary Dark（濃い色）

Secondaryカラー

Secondary Light（明るい色）

Secondary Main（メインカラー）

Secondary Dark（濃い色）

👁️ プレビュー

リンクテキストのサンプル

通常のカード

カードコンテンツのサンプル

アクセントカード

Primaryカラーを使用したカード

📋 生成されたコード

CSS変数（:root用）

          /* テーマ切り替えシステム用変数 */
          --primary-light: #FFB366;
          --primary-main: #FFA347;
          --primary-dark: #FF8C42;
          --secondary-light: #FF7B7B;
          --secondary-main: #FF6B6B;
          --secondary-dark: #FF5C5C;
        

JavaScript定義（theme-switcher.js用）

          themename: {
            primary: ['#FFB366', '#FFA347', '#FF8C42'],
            secondary: ['#FF7B7B', '#FF6B6B', '#FF5C5C']
          },
        

テーマパネル用CSS（theme-switcher.css用）

.theme-themename { background: linear-gradient(135deg, #FFB366, #FF8C42); }

🎨 テーマカラー構築ツール