【Webサイト制作】ダークモードとライトモードの切り替えを実装してみよう！

URLをコピーしました！

ティアラ

Webサイトでよくある「ライトモード」と「ダークモード」の切り替え機能の実装ね。

suzuto

難しそうに見えるけど意外と簡単に作ることができるよ。実際にやってみよう。

こんにちは、suzutoです。

今回はWebサイトでよくみかける「ライトモード」と「ダークモード」の切り替え機能の作り方について解説していきます。

完成形は以下の様な感じです。

意外と簡単に作れるので是非やってみてください。

本記事の内容

【Webサイト制作】ダークモードとライトモードの切り替えを実装方法

今回は「HTML」「CSS」「JavaScript」を使って実装します。

「月のマーク」をクリックするとダークモードになり、「太陽のマーク」をクリックするとライトモードに切り替わる様にします。

以下の手順で作成していきます。

HTML、CSSでライトモード時のスタイル（文字と背景）を作る
ダークモード時のスタイル（文字と背景色）をCSSで作る
JavaScriptでアイコンをクリックした時にダークモードのクラスが付与されるようにする
JavaScriptでダークモード時にアイコンをクリックした時にダークモードのクラスが削除されるようにする
CSSでアニメーションをつけて微調整

順番に解説しますね。

HTML、CSSでライトモード時のスタイル（文字と背景）を作る

まずはHTMLでマークアップします。

今回はダークモードとライトモードの切り替えだけなので簡単なタイトルとアイコンを配置するのみで作ります。

<section class="header">
      <div class="logo-title">
        <h2>Mode Change</h2>
      </div>

      <img src="./images/moon.png" id="icon" />
    </section>

    <main>
      <h1>Light and Dark Mode</h1>
    </main>

簡単に「ヘッダー」と「メイン」のセクションに大見出しタイトルを作成。ヘッダーにはアイコンを配置したいのでタイトルとロゴを作ります。

続いてCSSでライトモードの時のスタイルを作っていきます。

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.header {
  margin: auto;
  width: 80%;
  height: 10vh;
  padding: 0.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#icon {
  width: 30px;
  cursor: pointer;
}
  

main h1 {
  font-size: 5rem;
}

タイトルを画面中央に配置するのとアイコンのスタイル設定です。

このあたりはお好みで大丈夫です。

ダークモード時のスタイル（文字と背景色）をCSSで作る

CSSでライトモードとダークモード時のスタイルを作ります。

:root {
  --dark-color: #000;
  --white-color: #fff;
}

.dark-mode {
  color: var(--white-color) !important;
  background: var(--dark-color) !important;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--white-color);
  color: var(--dark-color);
}

bodyの文字色と背景色を変数に代入しておきます。

:root {
–dark-color: #000;
–white-color: #fff;
}

次にライトモードの時の「body」要素のスタイルを当てていきます。

ライトモードなので「文字色が黒」で「背景色が白」に指定。

body {
font-family: “Poppins”, sans-serif;
background: var(–white-color);
color: var(–dark-color);
}

次にダークモードの時のスタイルを作っておきます。クラス名（dark-mode）としてスタイルを作ります。

ライトモードの時と文字色と背景色を逆にすればOK！

.dark-mode {
color: var(–white-color) !important;
background: var(–dark-color) !important;
}

JavaScriptでアイコンをクリックした時にダークモードのクラスが付与されるようにする

次にJavaScriptでアイコンがクリックされた時に、先ほど作ったダークモードのクラスが付与されるようにします。

<script>
        let icon = document.querySelector('#icon');

        icon.onclick = () => {
            document.body.classList.toggle('dark-mode')
        };
</script>

さらに追加でダークモードのアイコンになっていたらライトモードにするという記述を「if文」で追加します。

let icon = document.querySelector('#icon');

        icon.onclick = () => {
            document.body.classList.toggle('dark-mode')
            if(document.body.classList.contains('dark-mode')){
                icon.src = 'images/sun.png';
            }else{
                icon.src = 'images/moon.png'
            }
        };

アイコンをクリックした時、dark-modeクラスが含まれていたらアイコンをライトモード用にする。

それ以外の場合はダークモードのままのアイコンにします。

if(document.body.classList.contains(‘dark-mode’)){
icon.src = ‘images/sun.png’;
}else{
icon.src = ‘images/moon.png’
}

これで完了です。

CSSでアニメーションをつけて微調整

最後にアニメーションと微調整です。

今回はbody要素がへんかするので、body要素に対してtransitionでアニメーションをつけておきます。

body {
            font-family: "Poppins", sans-serif;
            transition: all 1s ease-in-out;   
        }

transition: all 1s ease-in-out;

CSSで上記のコードを追加します。

さらにmain要素にたいしてz-indexでz軸の重なりを背面にします。（以下を追加しないとアイコンが押せなくなります）

z-index: -1;

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

以上で完成です。お疲れ様でした。

【まとめ】ダークモードとライトモードの切り替えを実装方法

コードの完成形は以下となります。

<section class="header">
      <div class="logo-title">
        <h2>Mode Change</h2>
      </div>

      <img src="./images/moon.png" id="icon" />
    </section>

    <main>
      <h1>Light and Dark Mode</h1>
    </main>

:root {
  --dark-color: #000;
  --white-color: #fff;
}

.dark-mode {
  color: var(--white-color) !important;
  background: var(--dark-color) !important;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--white-color);
  color: var(--dark-color);
  transition: all 0.6s ease-in-out;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.header {
  margin: auto;
  width: 80%;
  height: 10vh;
  padding: 0.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#icon {
  width: 30px;
  cursor: pointer;
}
  
main h1 {
  font-size: 5rem;
}

let icon = document.querySelector('#icon');

        icon.onclick = () => {
            document.body.classList.toggle('dark-mode')
            if(document.body.classList.contains('dark-mode')){
                icon.src = 'images/sun.png';
            }else{
                icon.src = 'images/moon.png'
            }
        };

ポイントをまとめました。