Windowsの設定などでおなじみの「ダークモード」。
背景が黒っぽく、文字が白系統になるこのモードですが、CSS変数とJavaScriptを用いて作成してみました。
今後コピペして使い回したいと思ったので、最低限のシンプルな実装です。
ソースコード
まず先にソースコードの紹介です。
各箇所の解説は後述します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light-Dark</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js"></script>
</head>
<body>
<h1>タイトル</h1>
<label for="chk">ダークモード</label>
<input type="checkbox" id="chk" />
<p>テキストテキストテキストテキスト</p>
<button class="btn">ボタン</button>
</body>
</html>
style.css
/* ライトモード(通常)用の色を設定 */
:root {
--main-text: #000000;
--main-bg: #ffffff;
--btn-color: #a9a9a9;
}
/* ダークモード用の色を設定 */
:root[theme="dark"] {
--main-text: #ffffff;
--main-bg: #000000;
--btn-color: #32ed6a;
}
body {
color: var(--main-text);
background-color: var(--main-bg);
}
.btn {
background-color: var(--btn-color);
}
index.js
window.addEventListener('DOMContentLoaded', () => {
const checkbox = document.getElementById("chk");
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const isDarkMode = darkModeMediaQuery.matches;
// 初期状態でどちらのテーマなのかを取得、それに合わせてページのテーマを決める
if (isDarkMode) {
document.documentElement.setAttribute("theme", "dark");
checkbox.checked = true;
} else {
document.documentElement.setAttribute("theme", "right");
checkbox.checked = false;
}
// チェックボックスのchangeイベントにライトモード・ダークモードの切り替えを追加
checkbox.addEventListener("change", (e) => {
const isChecked = e.target.checked;
if (isChecked) {
document.documentElement.setAttribute("theme", "dark");
} else {
document.documentElement.setAttribute("theme", "right");
}
});
})
コードについて
CSS、JavaScriptのそれぞれのファイルで何を行っているか、順に見ていきましょう。
CSS
通常モード(ライトモード)とダークモードのそれぞれの色をCSS変数として設定しておきます。
設定したCSS変数は、var()関数を使ってアクセスすることができます。
今回はtheme属性を用いて、ダークモードの時はどの色になるかについても設定しておきます。
/* :root疑似クラスで定義することで、HTML文書全体で適用できるようになる。 */
:root {
--main-text: #000000;
--main-bg: #ffffff;
--btn-color: #0000ff;
}
/* こちらはダークモード用の:root */
:root[theme="dark"] {
--main-text: #ffffff;
--main-bg: #000000;
--btn-color: #32ed6a;
}
JavaScript
JavaScriptではモードの切り替えメソッドを定義しています。
ただし、アクセス時にOSでダークモードが設定されていたらそれを反映したいので、prefers-color-schemeを使用しています。
// ダークモードに設定されていたら、prefers-color-schemeはdark、そうでなければlight
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const isDarkMode = darkModeMediaQuery.matches;
ブラウザで確認
おわり
Reactでも書けそう(というか書ける)。
なのでそのうち書いて投稿してみようと思います。
たぶん。