「夜になったら」等、特定の条件でWebサイトのカラーテーマを変える方法[Web制作, WordPress]

特定の条件で Webサイトのカラーテーマを変える方法

Webサイトのカラーテーマを変える。「夜になったら」などの特定の条件で。

Webサイトの配色において、カラーテーマ、という概念があります。
何のデザインシステムでも良いんですが、
たとえば Material Design で言えば、primary, secondary, variants に相当する色
なんらかのテーマに沿ってグルーピング、ひとまとまりにしたものがそれに該当します。

参考:
primary, secondary, variants についての概要は以下を参照
The color system — Material Design

UI上でよく見かけることが多い例として、
ダークテーマ(dark theme)がありますよね。
黒い背景に白い文字の、夜っぽい雰囲気になるアレです。
一説によると集中して作業できるとか、画面を見る際の視覚的な負荷が少ないとか、諸説言われているやつです。

このダークテーマ(dark theme)、
Youtube, Twitter等、有名どころのアプリはもちろん、それらのPC版ページでも実装されていますよね。

今回は、そのダークテーマ(Night theme と呼ぶケースもありますね)を例にとって
「夜になったら」等の特定の条件で、Webサイトのカラーテーマを変える方法について書いていきたいと思います。

実はけっこう簡単な仕組みで実現できるので、意外に思うかもしれません。

手順

(1) 現在の時間を取得する
(2) そこをすぎたら何らかの挙動を実行させるための「特定の時間」を定義しておく
(3) (1)と(2)を比較する条件式を書いておく
(4) ダークテーマ(Night themeとも)用のstyleを用意しておく

大まかに分けて、上記の手順で実現できます。
では、次のセクションから、実際の手順を書いていきます。

現在の時間を取得する

こちらは、以前の記事
[WordPress]特定の時間になったら、Webサイト上で何らかの要素を表示(または実行)させる方法
でもご紹介している方法です。上記の記事もあわせてご覧ください。

まずは、phpで現在の時間を取得してみます。
いろいろな方法があり、これはその中の一例ですが
たとえば以下のように書くと、現在の時間を取得することがます。
なお、この例ではphpで時間を取得していますが、他の言語でも(やり方によってはjavascriptでも)もちろん取得することが可能です。

<?php
$myTime = new DateTime('now', new DateTimeZone('Asia/Tokyo'));
$myFormatted = $myTime->format('H:i:s');
?>

最初の行は、phpの DateTime() クラスで Asia/Tokyo タイムゾーンでの現在の時間を取得。
それを、次の行のformatメソッドで時間、分、秒の形式に整形しています。

そこをすぎたら何らかの挙動を実行させるための「特定の時間」を定義しておく

この部分も、以前の記事
[WordPress]特定の時間になったら、Webサイト上で何らかの要素を表示(または実行)させる方法
でもご紹介している方法です。上記の記事もあわせてご覧ください。

これは、次のように定義しておきます。
朝、日暮れ、一日の終了時間、始まりの時間を定義しておけば良いです。

<?php
  $myMorning = date('H:i:s', strtotime('055900'));
  $mySunset = date('H:i:s', strtotime('185900'));
  $myMidnight = date('H:i:s', strtotime('235959'));
  $myStart = date('H:i:s', strtotime('000000'));
?>

↑phpの date() を使用して、文字列を日付文字列として時間、分、秒の形式で取得しています。

現在の時間と特定の時間を比較する条件式を書いておく

こちらについても、以前の記事
[WordPress]特定の時間になったら、Webサイト上で何らかの要素を表示(または実行)させる方法
でもご紹介している方法です。リンク先の記事には、if~else文での分岐方法も記載されていますので、あわせてご覧ください。

これは次のように書きます。
前回の記事でも書きましたが、条件式は
switch文、if~else文どちらで書いても動きます。以下の例は、switch文の例です。

<?php
  switch ($myFormatted) {
    case $myFormatted >= $mySunset && $myFormatted <= $myMidnight:
      // ここに、日暮れから一日の終わりまでにアクセスした際、実行される挙動を記述できます。
      break;

    case $myFormatted >= $myStart && $myFormatted <= $myMorning:
      // ここに、24:00 ~ 早朝までにアクセスした際、実行される挙動を記述できます。
      break;

    default:
      echo('<div class="site-wrapper">'); // 通常時に出力される、ページ全体を包括するdiv要素
      break;
  }
?>

↑各条件を満たした時の挙動は記事の後半で書いていきますが、
ひとまず条件分岐としては上記のような形になります。
これで、定義した各時間帯にWebサイトにアクセスした際、実行する処理の分岐ができたことになります。

ダークテーマ用のcssを記述しておく

ダークテーマ用として、cssを記述しておきます。
とは言っても何も難しいことはなく、
・ページ全体を包括する要素に暗めの背景色を。
・そして通常時の白背景の時に黒文字にしていた部分を白く変更。
暗めの背景色で見えなくなってしまう要素がないように、それぞれ指定しておくだけです。

この時にやっておくと便利なのは、
全体を包括する親要素に is-dark 等のclassをひとつ付ければ全体に適用されるように
cssを書くことです。
たとえば、次のような構造のhtmlがあったとします。

<html>
<!-- ... <head></head>部分省略 ... -->
<body>
 <div class="site-wrapper">
    <header>
      <!-- <header>タグ内の要素がここに入る想定 -->
    </header>
    <main>
      <!-- メインコンテンツがここに入る想定 -->
    </main>
    <section>
     <!-- サイドバー等がここに入る想定 -->
    </section>
    <footer>
      <!-- <footer>タグ内の要素がここに入る想定 -->
    </footer>
  </div>
</body>
</html>

↑上記の例でいうと、全体を包括している
div class="site-wrapper" の部分にひとつだけclassを付ける事を想定して、
以下のようにcssを指定しておけば良い、という事です。

// dark-theme の背景色を指定
.site-wrapper.is-dark {
  background: #212121;
}

// dark-theme の文字色を指定
.site-wrapper.is-dark .site-description,
.site-wrapper.is-dark .widget-title,
.site-wrapper.is-dark .site-title,
<!-- ...(中略)... -->
.site-wrapper.is-dark .entry-title,
.site-wrapper.is-dark .entry-content,
.site-wrapper.is-dark .page-title,
.site-wrapper.is-dark .site-footer .site-info {
  color: #ffffff; // 黒背景になった時の文字色を指定
}

// その他必要に応じて dark-theme のリンク色などを指定
.site-wrapper.is-dark .widget_categories .cat-item {
  color: #18FFFF; // 黒背景になった時のリンク色を指定
}
<!-- ...(中略)... -->

↑※クラス名は一例です。適宜、ご自身のサイトのhtml構造に置き換えて読んでください。

ちなみに(ご存知の方も多いと思いますが)
.site-wrapper.is-dark
この様にclassを続けて書くセレクタの指定方法は、

htmlではこういう状態のことを指します。(site-wrapper と同じ箇所に is-dark が付与されている状態)
<div class="site-wrapper is-dark">

こういうcssの指定方法にしておけば、先ほどの条件式で条件を満たした時の挙動として、
is-dark というclassを、全体を包括するdiv要素にひとつだけ加えてあげるだけで、
ダークテーマの適用ができる、というわけです。

条件を満たしたら、全体を包括するdiv要素にclassを付ける

この記事のはじめの方で書いた条件式に、
「条件を満たした時に is-dark を付与したdivを出力する状態」を記述します。

<html>
<!-- ... <head></head>部分省略 ... -->
<body>
// 条件を満たした時に全体を包括する<div>要素に is-dark という class を付与する分岐
  <?php
    switch ($myFormatted) {
      case $myFormatted >= $mySunset && $myFormatted <= $myMidnight:
        // 日暮れから一日の終わりまでにアクセスした際、出力される
        echo('<div class="site-wrapper is-dark">');
        break;

      case $myFormatted >= $myStart && $myFormatted <= $myMorning:
        // 24:00 ~ 早朝までにアクセスした際、出力される
        echo('<div class="site-wrapper is-dark">');     
        break;

      default:
        // いずれの条件にも当てはまらない、通常時の挙動
        echo('<div class="site-wrapper">');
        break;
    }
  ?>
// _条件を満たした時に全体を包括する<div>要素に is-dark という class を付与する分岐

    <header>
      <!-- <header>タグ内がここに入る想定 -->
    </header>
    <main>
      <!-- メインコンテンツがここに入る想定 -->
    </main>
    <section>
     <!-- サイドバー等がここに入る想定 -->
    </section>
    <footer>
      <!-- <footer>タグ内がここに入る想定 -->
    </footer>
  </div>
</body>
</html>

↑上記の様に、条件を満たした場合に出力される記述を書けば完成です。
特定の時間を過ぎた時にアクセスすると、ダークテーマが適用されます。
phpを使った条件判定をしているので、WordPressのtheme内に書いても、もちろん動作します。

OSの機能と連動させる方法

実は、このダークモードを適用する方法、
MacOSのダークテーマとも連動させることができます。
それを実現した状態が、こちらの動画になります。

↑こちらの状態を実現する詳しい方法は、この記事の続編でご紹介予定です。
(この記事の続編を執筆次第、リンクを記載予定です)

この記事のまとめ

今回は、カラーテーマという概念と、
その一例として、昨今のアプリやWebサイト等でよく見かける「ダークテーマ」の適用方法について書きました。

文中にも書いていますが、今回の条件分岐はphpで行なっているので、
WordPressのtheme内に記述しても動作します。

また今回の例だと
実際にダークモードを適用するには再アクセスすることが(一回リロードする事が)必要になるわけですが、
例えば「ダークモードに切り替え」などのボタンや、トグル型スイッチのUIパーツを置いておいて、
それを押すと、今回の例と同様にclassを付与する様にしておけば、
ユーザーが任意でオン/オフできる仕組みも作ることができます。

そんなふうにいろいろ試してみるのも、WebサイトのUI改善の方法のひとつとして、
おもしろそうですね。

当サイトでは、今後もWebサイト制作に関するさまざまな記事を更新していく予定です。