AI向け説明AI Description

T-004 は親要素に .dark を付与し、CSS変数（--theme-stage-bg 等）を上書き。transition で色が滑らかに変わります。body に class を付けて全体テーマにする運用も可。

T-004 adds .dark to a parent and overrides CSS variables; transition gives smooth color change. Can apply class to body for site-wide theme.

調整可能パラメータParameters

• --theme-transition, --theme-stage-bg, --theme-stage-text

実装Implementation

HTML + CSS

.theme-stage { background: var(--theme-stage-bg); transition: background 0.4s; }
.theme-stage.dark { --theme-stage-bg: #1d2242; --theme-stage-text: #e8ebff; }

document.querySelector('[data-theme-btn]').addEventListener('click', () => stage.classList.toggle('dark'));

React (JSX + CSS)

// react/T-004.jsx
import { useState } from "react";
import "./T-004.css";

export default function DarkModeToggle({ buttonLabel = "Toggle Dark Mode", children }) {
  const [dark, setDark] = useState(false);

  return (
    <div className={"theme-stage" + (dark ? " dark" : "")}>
      <div className="theme-toggle-wrap">
        <button type="button" className="theme-toggle-btn" onClick={() => setDark((d) => !d)}>
          {buttonLabel}
        </button>
        <span className="theme-status">{dark ? "Current: Dark" : "Current: Light"}</span>
      </div>
      {children && <div className="theme-sample">{children}</div>}
    </div>
  );
}

/* react/T-004.css */
:root { --theme-transition: 0.4s; }

.theme-stage {
  border-radius: 20px;
  padding: 32px;
  background: var(--theme-stage-bg, #f5f7ff);
  color: var(--theme-stage-text, #1d2242);
  transition: background var(--theme-transition) ease, color var(--theme-transition) ease;
}

.theme-stage.dark {
  --theme-stage-bg: #1d2242;
  --theme-stage-text: #e8ebff;
}

.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.theme-toggle-btn {
  padding: 10px 20px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover { background: rgba(0,0,0,0.06); }
.theme-stage.dark .theme-toggle-btn:hover { background: rgba(255,255,255,0.1); }

.theme-sample {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--theme-sample-bg, rgba(0,0,0,0.05));
  color: inherit;
}

.theme-stage.dark .theme-sample { --theme-sample-bg: rgba(255,255,255,0.08); }