最近流行りのダークテーマですが、iOSやWindowsにも導入されており無視できない存在になってきました。
そういう流れからか、テキスト主体の既存サイトで目が疲れないようにダークテーマを導入する機会がありました。
ダークテーマ導入にあたっては、ノーマル時のCSSで設定している色をダークテーマですべて変更する必要があるので、当初は丸ごとCSSを切り替えられる仕組みが必要じゃないか？と考えました。
しかし、実際にはそれほどCSS変更点が多くなく、javascriptによりbodyにclass追加することでCSSを切り替える方法が一番簡単だという結論になりました。
ユーザーごとにテーマを選択可能として、さらにcookieを使って選択値を覚えておくようにします。
この記事では、ユーザーごとにダークテーマの選択を可能とするカスタマイズをご紹介します。
使用するjQueryライブラリ
使用するjQueryライブラリは、jquery.cookie.jsだけです。
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.cookie.js"></script>参考：https://gamesink.net/column/articles/233
bodyタグにclassを追加
テンプレートファイルのbodyタグの部分に直接classを追加してしまうと、body_class()を書けなくなるので、フックで追加しました。
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
$value = $_COOKIE["DarkMode"];
if ($value=="Active"){
$classes[] = 'darkmode';
}
return $classes;
}参考：https://gamesink.net/column/articles/233
スイッチのHTML
スイッチのHTMLはbodyタグ以下に入れ込む必要があったので、wp_body_openフックを使います。
name=”dark_switch”の部分は、jQueryの記述と揃えます。
add_action( 'wp_body_open', function(){?>
<!--ダークテーマ-->
<div class="toggle_switch">
<input type="checkbox" name="dark_switch" id="cb_toggle_switch">
<label for="cb_toggle_switch"></label>
</div>
<!--ダークテーマ-->
<?php } );スイッチのCSS
参考：https://migi.me/css/ios-toggle-switch/
.toggle_switch {
display: table;
font-size: 30px;
}
.toggle_switch > input {
display: none;
}
.toggle_switch > label {
display: block;
position: relative;
width: 1.8em;
height: 1em;
border-radius: 1em;
background-color: #2b2a2f;
cursor: pointer;
}
.toggle_switch > input:checked + label {
background-color: #2dcb45;
}
.toggle_switch > label::before {
position: absolute;
top: 0.05em;
left: 0.05em;
width: calc(1em - 0.1em);
height: calc(1em - 0.1em);
border-radius: calc(1em - 0.1em);
background-color: #fff;
transition: 0.5s;
content: "";
}
.toggle_switch > input:checked + label::before {
left: calc(100% - 1em + 0.05em);
}スイッチの前にダークテーマというテキストを追加したい場合は以下のように疑似要素で対応します。
.toggle_switch:before {
content: "ダークテーマ";
position: absolute;
top: 18px;
font-size: 14px;
left: -80px;
}スイッチの表示位置はテーマによって異なると思いますので、適宜positon:absoluteやfixedで指定してください。
テーマ切り替えのjQuery
jqueryやjquery.cookie.jsよりも後で読み込まれるようにします。
$(function(){
$.cookie.json = false;
var darkMode = $.cookie("DarkMode");
// ページ再読み込み時のスイッチ状態判定
if (darkMode){
if (darkMode == "Active") {
$('input[name=dark_switch]:eq(0)').prop('checked', true);
} else if (darkMode == "notActive") {
$('input[name=dark_switch]:eq(0)').prop('checked', false);
}
}
// スイッチ切り替え時の動作
$("[name='dark_switch']").change(function() {
$.cookie.json = false;
var darkMode = $.cookie("DarkMode");
if (darkMode){
if (darkMode == "Active") {
$('body').toggleClass('darkmode');
$.cookie("DarkMode", "notActive", {expires:365, path:'/'});
this.checked = false;
} else if (darkMode == "notActive") {
$('body').toggleClass('darkmode');
$.cookie("DarkMode", "Active", {expires:365, path:'/'});
this.checked = true;
}
} else {
$('body').toggleClass('darkmode');
$.cookie("DarkMode", "Active", {expires:365, path:'/'});
this.checked = true;
}
});
});参考：https://gamesink.net/column/articles/233
ダークテーマのCSS
ダークテーマのCSSは、必要な部分だけ追加します。
その際、body classのdarkmodeをセレクタに追加します。
以下は例です。
body.darkmode {
color: #fff;
background-color: #444;
}
.darkmode #comments {
padding: 25px 20px;
background: #444;
border: 2px solid #50c1a5;
}まとめ
ダークテーマは最近の流行りなのですが、サイト全体のカラーを変えてしまうのではなく、ユーザーによって選択できるようにし、さらにユーザーごとに設定値を覚えておくようにする方がUXは高いと思います。
今回のカスタマイズは比較的簡単に導入できますので、もしそのような場面があったら思い出してください。
