jQueryとCSSで簡単！サイト背景色（デイorナイト）切替え

プログラミング等の画面の背景色は一般的に黒のイメージがあります。
私は黒い画面は苦手な方なので、白系統派です。

今では、ユーザーが背景色を選択できるWEBサイトもたまに見かけます。
今回は背景色をデイモードorナイトモードに選択できるように実装してみたところ、案外簡単にできました。
この記事ではその方法についてご紹介いたしますので、ご参考になれば幸いです。

contents

day or night ?
CODEPEN で実装と確認
最後に

day or night ?

下記はナイトモードに切り替えた時のイメージです。

使用するもの

HTMLファイル（各種読込）
CSSファイル（SCSSを使用）
JavaScriptファイル（記述量少なくで簡単！）

事前準備

jQuery及びご利用のJSファイル、CSSファイルをHTMLファイルで読み込みます（詳細説明割愛）。
Font Awesomeに登録し、同じくHTMLファイルで読み込みます。

Font Awesomeは下記のように簡単に登録し、多数のアイコンを使用できます。

Font Awesome のページで「Start for Free」を選択後、メールアドレスを登録します。
メール認証、パスワード設定と進んでいくと、コードが発行されますのでこれをコピペしheadタグ内で使用します。

実装手順概要

①HTML及びCSSで切り替え用のボタンを作成しておきます。

②jQueryで切り替えボタンを押したら、bodyタグにクラスを付与する処理（実際にはtoggleClassメソッドを使用して、クラスがあれば付与しなければ削除）を行います。

③付与されたクラスを使って、CSSで色の変更、切り替えボタンの位置を調整します。

CODEPEN で実装と確認

「Run Pen」をクリックしてください。

See the Pen body color by blue moon (@blue-moon) on CodePen.

HTMLファイル

<head>
  <!-- 省略 -->
  <script src="https://kit.fontawesome.com/●●●●●●●●●●.js" crossorigin="anonymous"></script> <!-- ●●●部分にはご自身のfontawesomeのキーを入力 -->
  <link rel="stylesheet" href="style.css">  <!-- ご自身のパスに変更 -->
</head>
<body>
  <div class="switch">
    <i class="fas fa-sun"></i>
    <div class="box">
      <div class="circle"></div>
    </div>
    <i class="fas fa-moon"></i>
  </div>
  <p class="select">select!</p>
</body>

SCSSファイル

body {
  margin: 10px 0;
  background-color: #eee;
  color: #777;
  font-size: 14px;
  .switch {
    width: 80px;
    margin: 20px 75% 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    .box {
      position: relative;
      width: 32px;
      height: 15px;
      border-radius: 7px;
      background-color: #eee;
      box-shadow: inset 2px 2px 2px #cacaca, inset -2px -2px 2px #fff;
      .circle {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 16px;
        height: 16px;
        border-radius: 50%; //ボタンを円形に
        background-color: #eee;
        box-shadow: 2px 2px 3px #cacaca, -2px -2px 3px #fff;
        transition: 0.5s; //ボタンの左右の移動速度
      }
    }
  }
  .select {
    margin: 0.5rem 0 0.5rem 75%;
    width: 80px;
    text-align: center;
  }
}

.night {
  background-color: #333;
  color: #fef4f4; //コントラストを弱くするため温かみのある色に（桜色）
  .switch {
    .box {
      background-color: #fef4f4;
      box-shadow: inset 2px 2px 2px #bbb, inset -2px -2px 2px #fff;
      .circle {
        left: 17px;
        background-color: #fef4f4;
        box-shadow: -2px 2px 3px #2b2b2b, 2px -2px 3px #3b3b3b;
      }
    }
  }
}

補足説明

注意点は、当然ながら背景色を変えたら文字や他の影響を受ける要素の色も変えてあげてください、それだけです。

切り替えボタンについては、今回はこちら「WEB制作に役立つ、もうCSSで迷わない、時間節約にも！CSS関連ジェネレーター他13選」でも紹介させていただいたジェネレーター、Neumorphism.ioを活用して作成しました。
立体感演出は不要、もっと視認性を高めたい、という方はご自身でカスタマイズしてください。

JSファイル

以下だけです。単純にクラス付け替える処理をしています。

$('.switch').click(function() {
  $('body').toggleClass('night');
});

最後に

画面の真っ白は光量も多いため、目の疲れの原因になるとも言われます。それに至っては、ローカルのPC側でカラー（コントラストやモード）調整できますし、ご本人の好みやそのPCの電力消費量によって選択すればよいと思います。
一概に白だから消費電力が高いとかそいうことでもないらしく、液晶ディスプレイの種類（TN方式やVA方式やIPS方式）によって違ってくるようです。