2025年対応！CSSでブランドカラーを一元管理する効率的な方法

  <div class="color-system-demo">
      <button class="primary-button">
          プライマリーボタン
      </button>
      <div class="primary-area">
          プライマリーカラーを使用したエリア
      </div>
  </div>

  <style>
      .color-system-demo {
          --color-primary: #3b82f6;
          --color-primary-hover: #2563eb;
          --color-primary-light: #dbeafe;
      }

      .primary-button {
          background-color: var(--color-primary);
          color: white;
          padding: 12px 24px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          transition: background-color 0.2s;
      }

      .primary-button:hover {
          background-color: var(--color-primary-hover);
      }

      .primary-area {
          background-color: var(--color-primary-light);
          color: var(--color-primary);
          padding: 16px;
          border-radius: 6px;
          margin-top: 12px;
      }
  </style>

  <div class="brand-demo-container">
      <div class="site-card main-site">
          <h3 class="site-title">メインサイト</h3>
          <p class="site-description">同じカラー変数を使用</p>
      </div>
      <div class="site-card sub-site">
          <h3 class="site-title">サブサイト</h3>
          <p class="site-description">統一されたブランドカラー</p>
      </div>
  </div>

  <style>
      .brand-demo-container {
          --brand-primary: #3b82f6;
          --brand-secondary: #10b981;
          --theme-background: #ffffff;
          --theme-foreground: #000000;
          display: flex;
          gap: 20px;
          font-family: system-ui, -apple-system, sans-serif;
      }

      .site-card {
          padding: 20px;
          border-radius: 8px;
          background: var(--theme-background);
          color: var(--theme-foreground);
          border: 2px solid;
      }

      .main-site {
          border-color: var(--brand-primary);
      }

      .sub-site {
          border-color: var(--brand-secondary);
      }

      .site-title {
          margin: 0 0 10px 0;
      }

      .main-site .site-title {
          color: var(--brand-primary);
      }

      .sub-site .site-title {
          color: var(--brand-secondary);
      }

      .site-description {
          margin: 0;
          font-size: 14px;
      }
  </style>

  <div id="theme-demo">
      <div class="demo-header">
          <h3 class="demo-title">テーマ切り替えデモ</h3>
          <button class="theme-toggle-btn" onclick="toggleTheme()">
              テーマ切り替え
          </button>
      </div>
      <p class="demo-description">
          このデモでは、CSS変数を使用したテーマ切り替えが確認できます。
      </p>
  </div>

  <style>
      #theme-demo {
          --bg-primary: #ffffff;
          --bg-secondary: #f8fafc;
          --text-primary: #1e293b;
          --text-secondary: #64748b;
          --border-color: #e2e8f0;
          background: var(--bg-primary);
          color: var(--text-primary);
          padding: 20px;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          transition: all 0.3s ease;
      }

      .demo-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
      }

      .demo-title {
          margin: 0;
      }

      .theme-toggle-btn {
          background: var(--bg-secondary);
          color: var(--text-primary);
          border: 1px solid var(--border-color);
          padding: 8px 16px;
          border-radius: 4px;
          cursor: pointer;
      }

      .demo-description {
          margin: 0;
          color: var(--text-secondary);
      }
  </style>

  <script>
      function toggleTheme() {
          const demo = document.getElementById('theme-demo');
          const isDark = demo.style.getPropertyValue('--bg-primary') === '#0f172a';

          if (isDark) {
              demo.style.setProperty('--bg-primary', '#ffffff');
              demo.style.setProperty('--bg-secondary', '#f8fafc');
              demo.style.setProperty('--text-primary', '#1e293b');
              demo.style.setProperty('--text-secondary', '#64748b');
              demo.style.setProperty('--border-color', '#e2e8f0');
          } else {
              demo.style.setProperty('--bg-primary', '#0f172a');
              demo.style.setProperty('--bg-secondary', '#1e293b');
              demo.style.setProperty('--text-primary', '#f1f5f9');
              demo.style.setProperty('--text-secondary', '#94a3b8');
              demo.style.setProperty('--border-color', '#334155');
          }
      }
  </script>