キートンのこのホームページはWordPressで構築しています。

WordPressの魅力は豊富なプラグインで、ダークモードに対応させるためのプラグインもあります。試しにインストールしてみましたが、完全対応というわけにはいきません。

したがってプラグインには頼らず、ゼロから作成しました。

プログラミングに関する詳細は割愛し、処理の流れをまとめてみました。それが以下の図です。

簡単に説明すると、以下のような処理になります。

1. まず、ユーザー（閲覧者）のローカルストレージにライトモード／ダークモードの設定があるか否かを確認します。
   1. 設定が無い場合、ユーザーのOSあるいはブラウザでライトモード／ダークモードの設定状態を確認します。
      1. ダークモードとなっている場合は、JavaScript で body 要素に “class=”dark-mode” を設定し、ダークモードで表示します。
      2. ライトモードとなっている場合は “class=”light-mode” を設定し、ライトモードで表示します。
   2. 設定がある場合
      1. ダークモードとなっている場合は、JavaScript で body 要素に “class=”dark-mode” を設定し、ダークモードで表示します。
      2. ライトモードとなっている場合は “class=”light-mode” を設定し、ライトモードで表示します。
2. スイッチによってライトモード／ダークモードを切り替えた場合、その設定をユーザーのローカルストレージに保存します。
3. ユーザーが再度このホームページに訪れた際は、上記2で保存した設定にしたがって表示します。

キートンでは、このようにプラグインに頼らずWordPressに機能を追加することができます。これからオリジナルのホームページを作成したい方は「ホームページを作成されたい方へ」をご覧のうえ、お気軽にお問い合わせください。

またWordPressで構築はできるけれどもJavaScriptやPHP言語は苦手なデザイナー、コーダーさんもお気軽にお問い合わせください。御社のホームページ制作をお手伝いします。