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サイト制作に関するさまざまな記事を更新していく予定です。