T-001 Theme medium

How to create a auto day night background 自動デイナイト背景の作り方

Switches gradients and icons between day and night based on local time or manual toggles. 時間帯に応じて背景グラデーションとアイコンを切り替えるテーマ演出。

theme gradient time

ライブデモ Live Demo

Good Morning

Daylight gradient

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Switches gradients and icons between day and night based on local time or manual toggles.

時間帯に応じて背景グラデーションとアイコンを切り替えるテーマ演出。

どこで使うかWhere to use

dark mode support, user preferences, seasonal themes, brand customization

ヒーロー背景、ウェルカムスクリーン、天気アプリUI、コンテキスト対応デザイン

特徴Key features

Automatically detects local time and switches between day and night gradient backgrounds. Manual override buttons available. CSS transition for smooth gradient change. Sun/moon icon swap on theme change. Timezone-aware via JavaScript Date API.

ローカル時刻を自動検出して昼と夜のグラデーション背景を切り替え。手動オーバーライドボタンを利用可能。スムーズなグラデーション変化のCSSトランジション。テーマ変更時の太陽/月アイコン交換。JavaScript Date APIによるタイムゾーン対応。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--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 Code 

// 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);
}
import { useEffect, useState } from "react";
import "./T-001.css";

const getAutoTheme = () => {
  const hour = new Date().getHours();
  return hour >= 6 && hour < 18 ? "day" : "night";
};

export default function AutoDayNightBackground() {
  const [mode, setMode] = useState("auto");
  const theme = mode === "auto" ? getAutoTheme() : mode;

  useEffect(() => {
    if (mode !== "auto") return;
    const timer = setInterval(() => setMode("auto"), 60000);
    return () => clearInterval(timer);
  }, [mode]);

  return (
    <section className={`auto-theme auto-theme--${theme}`}>
      <div className="auto-theme__sun" />
      <div className="auto-theme__moon" />
      <div className="auto-theme__content">
        <p>{theme === "day" ? "Good Morning" : "Good Evening"}</p>
        <h3>{theme === "day" ? "Daylight gradient" : "Night sky gradient"}</h3>
      </div>
      <div className="auto-theme__toggles">
        {["auto", "day", "night"].map((value) => (
          <button
            key={value}
            className={mode === value ? "active" : ""}
            onClick={() => setMode(value)}
          >
            {value.toUpperCase()}
          </button>
        ))}
      </div>
    </section>
  );
}
:root {
  --day-gradient: linear-gradient(135deg, #ffd166, #fca311, #4ecdc4);
  --night-gradient: linear-gradient(135deg, #1b1b3a, #274690, #576ca8);
}

.auto-theme {
  border-radius: 24px;
  padding: clamp(24px, 5vw, 40px);
  position: relative;
  overflow: hidden;
  color: #111;
  transition: background 0.6s ease, color 0.4s ease;
}

.auto-theme--day {
  background: var(--day-gradient);
}

.auto-theme--night {
  background: var(--night-gradient);
  color: #f5f6ff;
}

.auto-theme__sun,
.auto-theme__moon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.auto-theme__sun {
  top: 24px;
  left: 24px;
  background: radial-gradient(circle, #ffe066, #f4a261);
}

.auto-theme__moon {
  top: 24px;
  right: 24px;
  background: radial-gradient(circle, #fff, #dfe4ff);
}

.auto-theme--day .auto-theme__sun {
  opacity: 1;
}

.auto-theme--night .auto-theme__moon {
  opacity: 1;
}

.auto-theme__content h3 {
  margin: 8px 0 0;
  font-size: clamp(24px, 4vw, 40px);
}

.auto-theme__toggles {
  margin-top: 24px;
  display: inline-flex;
  gap: 12px;
}

.auto-theme__toggles button {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.auto-theme__toggles button.active {
  background: rgba(0, 0, 0, 0.2);
  border-color: transparent;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

On load, JavaScript reads new Date().getHours() and compares it to configurable day/night boundaries (e.g., 6-18 = day). Based on the result, a CSS class (day-theme or night-theme) is added to the root element, which switches gradient variables defined in :root. A CSS transition on the background property smoothly blends between themes.

ロード時にJavaScriptがnew Date().getHours()を読み取り、設定可能な昼/夜境界（例：6-18=昼）と比較。結果に基づいてCSSクラス（day-themeまたはnight-theme）をルート要素に追加し、:rootで定義されたグラデーション変数を切り替え。backgroundプロパティのCSSトランジションがテーマ間をスムーズにブレンド。

カスタマイズ方法Customization

Add additional time periods (golden hour, midnight) with their own gradient presets. Extend time ranges to include sunrise/sunset gradients with orange hues. Integrate with a weather API to also change the gradient based on weather conditions.

独自のグラデーションプリセットを持つ追加の時間帯（ゴールデンアワー、真夜中）を追加。オレンジ色調の日の出/日の入りグラデーションを含むよう時間範囲を拡張。天気APIと統合して天気に基づいてグラデーションを変更。

注意点Caveats

Time-based backgrounds are purely aesthetic — do not rely on them to communicate important state information. Provide a manual override that persists user preference in localStorage to respect users in unusual time zones or who prefer a specific look.

時刻ベースの背景は純粋に審美的なものです — 重要な状態情報を伝えるためにこれだけに頼らないでください。異常なタイムゾーンや特定の外観を好むユーザーを尊重するためlocalStorageにユーザー設定を保存する手動オーバーライドを提供してください。

よくある質問 Frequently Asked Questions

How to customize the auto day night background? Auto Day Night Backgroundをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the auto day night background in React? ReactでAuto Day Night Backgroundを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of auto day night background? Auto Day Night Backgroundのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.