マイクロ・フィードバック
ダークモードトグル
太陽↔月にモーフするトグルで昼夜を切替。ミニカードの背景・文字色・アイコンがアニメ遷移する今風のテーマスイッチ。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="tm-wrap" id="tmWrap">
<button class="tm-toggle" id="tmToggle" role="switch" aria-checked="false" aria-label="ダークモード切替">
<span class="tm-track">
<span class="tm-knob" aria-hidden="true">
<svg class="tm-icon tm-sun" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="5" fill="currentColor"/>
<line x1="12" y1="2" x2="12" y2="5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="12" y1="19" x2="12" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="2" y1="12" x2="5" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="19" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="4.22" y1="4.22" x2="6.34" y2="6.34" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="17.66" y1="17.66" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="4.22" y1="19.78" x2="6.34" y2="17.66" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="17.66" y1="6.34" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg class="tm-icon tm-moon" viewBox="0 0 24 24" fill="none">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill="currentColor"/>
<circle cx="17" cy="8" r="1.2" fill="#0d1f3a" opacity=".5"/>
<circle cx="14" cy="13" r="0.8" fill="#0d1f3a" opacity=".4"/>
<circle cx="19" cy="12" r="0.6" fill="#0d1f3a" opacity=".3"/>
</svg>
</span>
</span>
<span class="tm-label" id="tmLabel">ライト</span>
</button>
<div class="tm-card" id="tmCard">
<div class="tm-card-icon" id="tmCardIcon" aria-hidden="true">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="16" fill="currentColor" opacity=".15"/>
<circle cx="18" cy="14" r="5" fill="currentColor" opacity=".7"/>
<path d="M8 30c0-5.52 4.48-10 10-10s10 4.48 10 10" fill="currentColor" opacity=".5"/>
</svg>
</div>
<div class="tm-card-text">
<p class="tm-card-name" id="tmCardName">田中 太郎</p>
<p class="tm-card-sub" id="tmCardSub">テーマを切り替えてみよう</p>
</div>
</div>
</div>