ダークモード

一昨年あたりからwebデザインにおいてもトレンドになったダークモード。
「目に優しい」などのさまざまな効果がありますが今回はデモのようなダークモードとライトモードを切り替えるスイッチャーを作りたいと思います。

スイッチを作る。

では、早速ダークモードとライトモードを切り替えるスイッチを作っていきます。
スイッチを作るためにはHTMLでチェックボックスを用意する必要があります。

<form action="#">
    <label class="switch">
      <input type="checkbox" class="checkbox"/>
      <span class="slider"></span>
    </label>
</form>

これだけでは普通のチェックボックスがひとつできあがるだけです。
なのでCSSを適応させます。

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #33f321;
}

input:focus + .slider {
  box-shadow: 0 0 1px #33f321;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}

少し長いかもですがこれで切り替え用のスイッチができました。
ですが、このままでは何も変化しない普通のスイッチです。ですのでスイッチをオンにするとダークモードに切り替え、オフるとライトモードに切り替わるようにします。

JavaScript

まず、必要になってくるのは「今、スイッチがオンなのかオフなのか」の状態を知らなければいけません。
その情報をとってくるには下記コードで取得可能です。

const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
     console.log("スイッチがオンになりました。");
  } else {
     console.log("スイッチがオフになりました。");
  }
}

無事チェックボックス(スイッチ)の状態を取得することができました。

ダークモードにする

ではいよいよダークモードにします。
以下のコードでダークモードにできます。

document.documentElement.setAttribute("data-theme", "dark");

ちなみにダークモードを解除、即ちライトモードにする方法は下記コードです。

document.documentElement.removeAttribute("data-theme");

従ってスイッチがオンの時にダークモードにオフの時ライトモードにするには

const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.removeAttribute("data-theme");
  }
}

これでスイッチがオンの時にダークモードにオフの時ライトモードに切り替わりましたがまだ何も変わりません。

最後にCSSでダークモードならこの色、ライトモードならこの色を適応させるようにすれば終わりです。

:root {
  --bgColor: #fff;
}

[data-theme="dark"] {
  --bgColor: #101010;
}

body {
  background-color: var(--bgColor);
}

これで完成!!