アクセスした時間にあわせてサイトをダークテーマへ変えるシンプルなJavaScript

通常の時間帯は白を貴重としたサイトでもアクセスした時間が夜の場合は、
暗い環境に合わせたダークテーマにしたいという場合のテンプレートをご紹介します。

やっていることは非常にシンプルでタイムゾーンなどは考慮していませんが、
ベースとして適宜応用できるかと思います。

目次

• 実際のコード

  • 実装した結果

• 実装についての解説

  • HTML
  • CSS
  • JavaScript

• 最後に

実際のコード

<div class="wrapper">
  <div class="time-color">
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
  </div>
</div>

.wrapper.dark .time-color {
  background: #212121;
}

.wrapper.dark .time-color {
  color: #fff;
}

const colorBlock = document.querySelector(".wrapper");
const date = new Date();
const now_hour = date.getHours();
const start_hour = 7;
const end_hour = 18;
if(now_hour > end_hour || now_hour < start_hour) {
  colorBlock.classList.add("dark");
}

実装した結果

デモページで確認する

実装についての解説

HTML

HTMLはサンプルですのでシンプルな構成にしていますが、
ポイントは全体を囲っているwrapper要素です。

この要素がダークテーマか通常テーマかを切り替えるキーとなります。

<div class="wrapper">// この要素をターゲットにJavaScriptとCSSで動的に変化を加える
  <div class="time-color">
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
    <p class="time-color__desc">アクセスする時間で色が変わるよ</p>
  </div>
</div>

CSS

見た目の装飾はCSSで行い、ダークテーマ変更後の指定も加えておきます。
wrapper要素に対してdarkクラスが指定されている場合は色を変更する指定を行っています。

.wrapper .time-color {
  // 通常テーマの際の指定
}

.wrapper .time-desc {
  // 通常テーマの際の指定
}

.wrapper.dark .time-color {
  // ダークテーマの指定
	background: #212121;// 黒ベースの背景に
}

.wrapper.dark .time-desc {
  // ダークテーマの指定
	color: #fff;// 黒ベースの背景にあわせて文字色を白へ
}

JavaScript

テーマを切り替えるための時間の取得と判別、クラスの付与のみJavaScriptで行います。

サイトの中身はHTML、サイトの見た目はCSS、動的なトリガーはJavaScriptという構成で
役割をわかりやすく分けてみました。

const colorBlock = document.querySelector(".wrapper");// wrapper要素を変数へ格納
const date = new Date();// ブラウザでアクセスされたタイミングで現在時刻を取得
const now_hour = date.getHours();// 現在時刻のデータから時間だけを取得
const start_hour = 7;// 7時を通常テーマの開始時間に
const end_hour = 18;// 18時を通常テーマの終了時間に
if(now_hour > end_hour || now_hour < start_hour) {// もし現在18:59〜06:59なら
  colorBlock.classList.add("dark");// wrapper要素にdarkクラスを付与する
}

最後に

時間の取得については今回の記述だとアクセスしたブラウザのタイムゾーンに依存します。

そのあたりも考慮する場合は少し手を加える必要がありますが、
基本のテンプレートして 参考にしていただければ幸いです。