ライブデモ Live Demo
ローカル時刻を取得し、昼夜のCSSカスタムプロパティを設定し、テストや上書き用の手動切り替えを公開します。
Grab the local time, set CSS custom properties for day/night, and expose manual toggles for testing or overriding.
Good Morning
Daylight gradient
AI向け説明 AI Description
`T-001` はJavaScriptでローカル時刻を取得し、昼夜のCSSカスタムプロパティ（`--current-gradient`）を動的に設定します。手動トグルで上書きが可能で、CSS `transition` により切り替えがスムーズにアニメーションします。
`T-001` reads local time via JavaScript and dynamically sets day/night CSS custom properties (`--current-gradient`). Manual toggle buttons allow overriding, with CSS `transition` providing smooth animation between states.
調整可能パラメータ Adjustable Parameters
- --day-gradient / --night-gradient — 色停止点を置換してブランドカラーに replace color stops with brand colors
- time ranges — 昼夜の時間範囲をカスタマイズ customize day/night time ranges
- transition duration — 切り替えアニメーション速度を調整 adjust transition animation speed
- icons — 太陽と月のアイコンを置換 replace sun and moon icons
実装 Implementation
HTML + CSS + JS
<div class="theme-preview" data-theme="day">
<div class="sun"></div>
<div class="moon"></div>
<div class="info">
<p id="theme_label">Good Morning</p>
<h3 id="theme_title">Daylight gradient</h3>
</div>
</div>
<button data-theme-toggle="auto">Auto</button>
<button data-theme-toggle="day">Day</button>
<button data-theme-toggle="night">Night</button>
<style>
:root {
--day-gradient: linear-gradient(135deg, #ffd166, #fca311, #4ecdc4);
--night-gradient: linear-gradient(135deg, #1b1b3a, #274690, #576ca8);
--current-gradient: var(--day-gradient);
}
.theme-preview {
background: var(--current-gradient);
transition: background 0.6s ease;
}
.theme-preview[data-theme="day"] .sun { opacity: 1; }
.theme-preview[data-theme="night"] .moon { opacity: 1; }
</style>
<script>
const preview = document.querySelector(".theme-preview");
function applyTheme(theme) {
preview.setAttribute("data-theme", theme);
const gradient = theme === "day" ? "var(--day-gradient)" : "var(--night-gradient)";
document.documentElement.style.setProperty("--current-gradient", gradient);
}
// Auto-detect based on local time
const hour = new Date().getHours();
applyTheme(hour >= 6 && hour < 18 ? "day" : "night");
</script>React (JSX + CSS)
// react/T-001.jsx
import { useState, useEffect } from "react";
import "./T-001.css";
export default function AutoDayNight() {
const [theme, setTheme] = useState("day");
useEffect(() => {
const hour = new Date().getHours();
setTheme(hour >= 6 && hour < 18 ? "day" : "night");
}, []);
return (
<div className={`theme-preview theme-${theme}`}>
<div className="sun" />
<div className="moon" />
<div className="info">
<h3>{theme === "day" ? "Daylight" : "Nighttime"} gradient</h3>
</div>
<div className="toggle-buttons">
<button onClick={() => setTheme("day")}>Day</button>
<button onClick={() => setTheme("night")}>Night</button>
</div>
</div>
);
}/* react/T-001.css */
.theme-preview {
transition: background 0.6s ease;
}
.theme-day {
background: linear-gradient(135deg, #ffd166, #fca311, #4ecdc4);
}
.theme-night {
background: linear-gradient(135deg, #1b1b3a, #274690, #576ca8);
}AIへの指示テンプレート AI Prompt Template
以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.
注意とバリエーション Notes & Variations
同じ変数駆動アプローチを再利用して、昼夜を他のコンテキスト（雨対晴天、平日対週末）に入れ替えられます。
Swap day/night with any other contexts (rain vs clear, weekday vs weekend) by reusing the same variable-driven approach.