BLOG

アクセスした日時によってサイトの配色を変える方法

Written by koizumi

INDEX

サイトによっては訪れた日付や時間によって、背景や要素の色を変更したいことがあるかと思います。
今回はJavaScriptとCSSを使って一定時間ごとにサイトの配色を変更する方法を紹介いたします。

基本コード

HTML

<div class="background">
   <div class="box"></div>
    <div class="star">
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
        <polygon points="50,5 20,99 95,39 5,39 80,99" />
      </svg>
    </div>
</div>

CSS

:root {
  --color-bg: #F4DCFF;
  --color-box: #4071AC;
  --color-star: #F5C225;
}

.background {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
  background-color: var(--color-bg);
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--color-box);
}

.star {
  width: 100px;
  height: 100px;  

  svg {
    width: 100%;
    height: 100%;

     polygon {
      fill: var(--color-star);
    }
  }
}

画面表示

今回は背景と四角形、星形SVG画像の3つの要素について、色を変更していきます。

各要素の色についてはCSS変数で設定します。

日替わりで配色を変える

日替わりで配色を変更し、ローテーションさせる方法を紹介します。

デモ

JavaScriptの実装

始めに、各要素の色をCSSで切り替えるためのクラス名を配列に格納します。
今回はクラス名を3つ格納し、3パターンの配色をローテーションさせます。

// 配色切り替え用のクラス名を配列に格納
const colors = ["color01", "color02", "color03"];

次に特定の日付からアクセス日までの経過日数を算出します。
new Date() を使用して現在日時の取得と基準日の設定を行います。
getTime()でそれぞれのタイムスタンプを取得し、経過ミリ秒を取得します。
その値を1日のミリ秒数（1000 * 60 * 60 * 24）で割ることで、経過日数を整数値で算出します。

// 現在日時を取得
const today = new Date();
// 経過日数算出のための基準日を設定
const start = new Date("2025-01-01");
// 経過日を整数値で算出
const daysSinceEpoch = Math.floor((today.getTime() - start.getTime() ) / (1000 * 60 * 60 * 24));

基準日を設定しない場合は以下のようになります。
この場合は1970年1月1日からの経過日数を算出します。

// 現在日時を取得
const today = new Date();
// 1970年1月1日からの経過日数を整数値で算出
const daysSinceEpoch = Math.floor(today.getTime() / (1000 * 60 * 60 * 24));

経過日数を配列の長さで割った余りを取り、それをインデックスとして配列からクラス名を取得します。
取得したクラス名を<html>要素に追加します。
これによって毎日異なるクラスが<html>要素に追加されます。

// 日数を配列の長さ(3)で割った余りを取得 (0 - 2)
const colorIndex = daysSinceEpoch % colors.length;
// 余りをインデックスとしてクラス名を取得
const elColor = colors[colorIndex];
// <html>要素にクラス追加
const html = document.documentElement; 
html.classList.add(elColor);

CSSの実装

JavaScriptで追加したクラスごとにCSS変数の値を設定することで日替わりで配色を変えることができます。

.color01 {
  --color-bg: #F4DCFF;
  --color-box: #4071AC;
  --color-star: #F5C225;
}
.color02 {
  --color-bg: #F6CE95;
  --color-box: #454D85;
  --color-star: #D682F7;
}
.color03 {
  --color-bg: #443A94;
  --color-box: #E6580F;
  --color-star: #F5B8D2;
}

曜日で配色を変える

上記の方法で7つの色パターンを日替わりでローテーションさせると曜日ごとに配色を設定することができますが、
曜日ごとに設定する場合は下記のようにgetDay()を使って曜日を取得する方法でも実装できます。

// 配色切り替え用のクラス名を配列に格納
const colors = ["color01", "color02", "color03", "color04", "color05", "color06", "color07"];

// 現在日時を取得
const today = new Date();
// 曜日を取得 (日曜日 - 土曜日 : 0 - 6)
const colorIndex = today.getDay();

// 曜日の整数値をインデックスとしてクラス名を取得
const elColor = colors[colorIndex];  
// <html>要素にクラス追加
const html = document.documentElement; 
html.classList.add(elColor);

1時間ごとに配色を変える

1時間ごとに配色を変更し、ローテーションさせる方法を紹介します。

デモ

JavaScriptの実装

基本的な実装は日替わりの時と同様です。


getTime()でそれぞれのタイムスタンプを取得した後、その値を1時間のミリ秒数（1000 * 60 * 60）で割り、経過時間を1時間単位で算出します。
以降は日替わりの場合と同様の記述で1時間ごとに配色を変更させることができます。

// 配色切り替え用のクラス名を配列に格納
const colors = ["color01", "color02", "color03"];
// 現在日時を取得
const now = new Date();
// 1970年1月1日からの経過時間を算出
const periodsSinceEpoch = Math.floor(now.getTime() / (1000 * 60 * 60));
// 経過時間を配列の長さ(3)で割った余りを取得 ( 0 - 2 )
const colorIndex = periodsSinceEpoch % colors.length; 
// 余りをインデックスとしてクラス名を取得
const elColor = colors[colorIndex];  
// <html>要素にクラス追加
const html = document.documentElement; 
html.classList.add(elColor);

数時間ごとに切り替えたい場合、経過時間をその時間単位で算出することで対応できます。
例えば6時間ごとに切り替えたい場合は以下のように記述します。

// 1970年1月1日からの経過時間を算出（6時間単位）
const periodsSinceEpoch = Math.floor(now.getTime() / (1000 * 60 * 60 * 6));

CSSの実装も日替わりの場合と同様です。

時間帯を指定して配色を変える

getHours()を使用して「時」の値を取得し、その値の大きさに応じて<html>要素に追加するクラスを指定することで、アクセスした時間帯に応じて配色を変えることができます。

// 現在日時を取得
const now = new Date();
// 時を取得（0 - 23）
const hours = now.getHours();

// <html>要素にクラス追加
const html = document.documentElement; 
// 時の値によって追加するクラスを変える
if (hours >= 6 && hours < 10) {
  // 4:00 - 9:59 （朝）
  html.classList.add("color-morning");
} else if (hours >= 10 && hours < 16) {
  // 10:00 - 15:59 （昼）
  html.classList.add("color-noon");
} else if (hours >= 16 && hours < 19) {
  // 16:00 - 18:59 （夕方）
  html.classList.add("color-evening");
} else {
  // 19:00 - 3:59 （夜）
  html.classList.add("color-night");
}

おまけ

本記事では日時取得のためにJavaScriptのDateオブジェクトを使用しましたが、今後Dateに代わる日付処理オブジェクトとしてTemporalというAPIが提案されています。

Temporal documentation

Dateオブジェクトでは、タイムゾーンがサポートされていない点や日時計算のAPIが扱いにくいといった問題がありましたが、Temporalではその多くの問題点を解消しています。

執筆時点ではいくつかのブラウザで試験的にサポートされている状態ですが、近い将来モダンなブラウザで標準APIとして提供される予定ですので、今後はTemporalを使用することも検討しておくと良いでしょう！

おわりに

このように複雑な記述をせずにJavaScriptとCSSで配色を切り替えることができます。
アクセスのたびにユーザーに新しい体験を与えたいときなどに参考にしてみてください。

参考文献

PICK UP