ホーム  >  CSS / JavaScript / Webサイト構築

HTML+CSS+JSを使ってダークモードを作る方法

最近では、OSから始まり、アプリやWebサイトでもダークモードが使われるようになってきています。

最近WebのGoogle検索でもダークモードが使えるようになりました。

ダークモードに対応していなければ、Googleの検索でWebサイトに来た場合、ユーザーはダークモードの暗い検索画面から急に明るいWebサイトに飛ばされることになります。

ユーザーからしたら、Webサイトがダークモードに対応していて欲しいわけですから、ユーザービリティの向上につながります。

※この記事をより活用するには、HTML,CSS,JSの最低限の知識が必要になります。

HTML側の準備

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>PAGE TITLE</title>
</head>
<body>
  <div>ダークモードのテスト</div>
  <div onclick="darkmode_set(0,true)">ダークモードを切り替える(ここをクリック)</div>
</body>
</html>

HTML側に準備は必要ありません。

ただし、(至極当然のことですが)bodyタグが一つのみ存在している必要があり、すべての表示される要素をbodyタグ内に収めるようにしてください。

また、darkmodeクラスを使うので、このクラスが使用されていないか確認してください。

CSS側の準備

div{
  margin:0;
}
/* ダークモード時に適用させるスタイルには、最初に[.darkmode]を付けて記述します。 */
.darkmode div{
  color:#fff;
  background:#333;
}

CSSには、あらかじめあったスタイルに加えて、ダークモード用に.darkmodeを先頭に置いたスタイルを作成してください。

.darkmode を設定すると、ダークモードの時にのみ適用されるようになります。

JavaScriptの準備

//ダークモードを反映させるプログラム
function darkmode_display_set(){
  if(localStorage.darkmode){
    document.body.classList.add('darkmode');
  }else{
    document.body.classList.remove('darkmode');
  }
}

//ダークモードのオンオフを切り替えるプログラム
//オン：darkmode_set(true);
//オフ：darkmode_set(false);
//　を実行する。
//darkmode_set(0,true);
//　とすると、トグルモードになり、もし今オンならオフへ、オフならオンへ切り替わる。
function darkmode_set(is_use,toggle){
  if(toggle&&localStorage.darkmode) is_use=0;
  if(toggle&&!localStorage.darkmode) is_use=1;
  if(is_use){
    localStorage.darkmode=1;
  }else{
    localStorage.removeItem('darkmode');
  }
  darkmode_display_set();
}

//ページが読み込まれた際にプログラムを実行
window.onload=function(){
  darkmode_display_set();
}

ダークモードに切り替えると、再読み込みしてもダークモードのままで居続けられるようにlocalStorageを使用して保存しています。

工夫すれば、ブラウザから、ユーザーのダークモードのデフォルト設定を取得して利用するという方法もあります。

すべてのサンプルコード

以上三つのコードを一ページにまとめると次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>PAGE TITLE</title>
  <style>
  div{
    margin:0;
  }
  /* ダークモード時に適用させるスタイルには、最初に[.darkmode]を付けて記述します。 */
  .darkmode div{
    color:#fff;
    background:#333;
  }
  </style>
</head>
<body>
  <div>ダークモードのテスト</div>
  <div onclick="darkmode_set(0,true)">ダークモードを切り替える(ここをクリック)</div>
  <script>
  //ダークモードを反映させるプログラム
  function darkmode_display_set(){
    if(localStorage.darkmode){
      document.body.classList.add('darkmode');
    }else{
      document.body.classList.remove('darkmode');
    }
  }

  //ダークモードのオンオフを切り替えるプログラム
  //オン：darkmode_set(true);
  //オフ：darkmode_set(false);
  //　を実行する。
  //darkmode_set(0,true);
  //　とすると、トグルモードになり、もし今オンならオフへ、オフならオンへ切り替わる。
  function darkmode_set(is_use,toggle){
    if(toggle&&localStorage.darkmode) is_use=0;
    if(toggle&&!localStorage.darkmode) is_use=1;
    if(is_use){
      localStorage.darkmode=1;
    }else{
      localStorage.removeItem('darkmode');
    }
    darkmode_display_set();
  }

  //ページが読み込まれた際にプログラムを実行
  window.onload=function(){
    darkmode_display_set();
  }
  </script>
</body>
</html>

HTMLファイルにコピペしてブラウザで開いてみると、ダークモード(モドキ)の切り替えができていることとが分かると思います。

これを上手く埋め込むことで、Webサイトで簡単にダークモードを適用できます。

ダークモード：ユーザーのデフォルト設定を取得する

OSのデフォルト設定か、ブラウザのテーマ設定のデフォルトを取得するには、次のコードを使用します。

if(window.matchMedia('(prefers-color-scheme: dark)').matches === true){
  //デフォルト設定がダークモードだと実行される
  alert('あなたはダークモードです！');
}

先ほどのコードと組み合わせることも可能なので、是非プログラムを工夫してダークモードを作成してみてください。

カテゴリー:CSS​JavaScript​Webサイト構築

タグ:

関連投稿