Bootstrapでテーマ切替スイッチを実装！初心者向けダークモード完全ガイド
生徒
「Bootstrapでサイトの見た目を切り替える方法ってありますか？例えば、昼は明るいデザイン、夜は暗いデザインにしたいんです。」
先生
「はい、それがダークモードとライトモードの切り替えですね。Bootstrapにはテーマ切替を簡単に実装できる仕組みがありますよ。」
生徒
「ボタンを押すとデザインが切り替わるようにしたいんですけど、難しいプログラムが必要ですか？」
先生
「大丈夫です。最小限のJavaScript（ジャバスクリプト）を使えば、誰でもすぐに切替スイッチを作れますよ。さらに設定を保存しておけば、次にページを開いたときも切替状態が保たれます。」
1. ダークモードとライトモードとは？
ダークモードとは、画面の背景を暗くして文字を明るく表示するデザインのことです。夜や暗い場所で目に優しく、最近はスマートフォンやアプリでもよく使われています。逆に、ライトモードは白を基調とした明るいデザインです。Bootstrapを使えば、どちらのモードにも簡単に対応できます。
2. Bootstrapでテーマ切替スイッチを作る仕組み
Bootstrap 5では、data-bs-theme という属性を使って全体のテーマを指定できます。この属性に「light」や「dark」を切り替えるだけで、デザインが変わる仕組みです。プログラミング初心者でも理解しやすいように、シンプルに説明すると「服を着替えるようにテーマを切り替える」イメージです。
3. HTMLでテーマ切替スイッチを設置する
まずはスイッチボタンをHTMLで作ります。Bootstrapのボタンを使うと見た目もきれいで、初心者でもすぐに実装できます。
<!DOCTYPE html>
<html lang="ja" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<title>テーマ切替のサンプル</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="p-3">
<button id="themeToggle" class="btn btn-primary">
<i class="bi bi-moon"></i> ダークモード切替
</button>
<script>
const btn = document.getElementById("themeToggle");
const html = document.documentElement;
const savedTheme = localStorage.getItem("theme");
if(savedTheme){
html.setAttribute("data-bs-theme", savedTheme);
}
btn.addEventListener("click", () => {
const current = html.getAttribute("data-bs-theme");
const next = current === "light" ? "dark" : "light";
html.setAttribute("data-bs-theme", next);
localStorage.setItem("theme", next);
});
</script>
</body>
</html>
4. JavaScriptで保存機能を追加する理由
スイッチを押してテーマが切り替わっても、ページを再読み込みすると元に戻ってしまうと不便です。そこで「localStorage（ローカルストレージ）」というブラウザの保存箱にテーマの状態を記録します。これにより、次回開いたときも同じテーマで表示されるので、利用者に優しい設計になります。
5. 初心者でも理解できるテーマ切替の流れ
テーマ切替の流れを生活に例えると分かりやすいです。例えば、朝はカーテンを開けて明るく過ごす（ライトモード）、夜はカーテンを閉めて暗く過ごす（ダークモード）、というイメージです。その選択を部屋のノートに書き残しておけば、次の日も同じように過ごせる。これがlocalStorageでテーマを保存する仕組みと似ています。
6. デザインや使い方の応用
スイッチのデザインはBootstrapのクラスを変えるだけで簡単に調整できます。例えば、ボタンを丸くしたり、アイコンを太陽や月に変えたりすることも可能です。実際に運用する際は、ユーザーが直感的に「切り替えできる」と分かるようなデザインにすると使いやすいでしょう。
7. ダークモードが求められる理由
最近のWebサイトやアプリでダークモードが標準的に導入されるのには理由があります。目の疲れを軽減する、バッテリー消費を抑える、夜間の視認性を向上させるなど、多くのメリットがあります。特にスマートフォン利用者にとっては重要な機能ですので、Bootstrapでサイトを作る際は積極的に取り入れることをおすすめします。
