近年、ユーザーインターフェイスのオプションとしてダークモードが大きな人気を集めています。ダークモードは、より暗い背景に明るいテキストを組み合わせたもので、目の疲れを軽減するだけでなく、特にOLEDスクリーンではバッテリー寿命を節約することができます。
CSSとJavaScriptを組み合わせて、ウェブサイトやウェブアプリにダークモードオプションを追加する方法を紹介します。
ダークモードとは
ダークモードは、ウェブサイトの従来の明るい背景を暗い背景に切り替える、代替の配色です。特に暗い場所では、ページの視認性が向上します。ダークモードは、ユーザーフレンドリーな性質から、多くのウェブサイトやアプリケーションの標準機能となっています。
プロジェクトの設定
実装を開始する前に、プロジェクトがセットアップされ、作業の準備ができていることを確認してください。HTML、CSS、JavaScriptファイルが構造化された方法で整理されている必要があります。
HTMLコード
ページのコンテンツとして、以下のマークアップから始めます。訪問者はtheme__switcher要素を使って、ダークモードとライトモードを切り替えることができます。
Company LogoAboutBlogContactLorem ipsum dolor sit amet consectetur adipisicing elit.Odit deserunt sit neque in labore quis quisquam expedita minusperferendis.
CSSコード
例をスタイル設定するには、以下のCSSを追加します。これは、デフォルトのライトモードとして機能し、後でダークモードビューの新しいスタイルで拡張されます。
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;}html { font-size: 62.5%; }body { font-family: "Quicksand", sans-serif; }.navbar {display: flex;padding: 2rem;font-size: 1.6rem;align-items: center;color: rgb(176, 58, 46);background-color: #fdedec;}.navbar span { margin-right: auto; }.logo { font-weight: 700; }.nav__lists {display: flex;list-style: none;column-gap: 2rem;margin: 0 2rem;}#theme__switcher { cursor: pointer; }main {width: 300px;margin: 5rem auto;font-size: 2rem;line-height: 2;padding: 1rem 2rem;border-radius: 10px;box-shadow: 2px 3.5px 5px rgba(242, 215, 213, 0.4);}
現時点では、インターフェイスは以下のようになります。
CSSとJavaScriptを使ってダークモードを実装する
ダークモードを実装するには、CSSを使ってその外観を定義します。その後、JavaScriptを使ってダークモードとライトモードの切り替えを処理します。
テーマクラスの作成
2つのモードを簡単に切り替えられるように、各テーマに1つのクラスを使用します。より完全なプロジェクトにするためには、ダークモードがデザインのあらゆる側面にどのように影響するかを考慮する必要があります。
.dark {background: #1f1f1f;color: #fff;}.light {background: #fff;color: #333;}
インタラクティブ要素の選択
以下のJavaScriptをscript.jsファイルに追加します。コードの最初の部分は、トグルを処理するために使用する要素を選択するだけです。
// テーマ切り替え要素とドキュメント本体への参照を取得const themeToggle = document.getElementById("theme__switcher");const bodyEl = document.body;
トグル機能の追加
次に、以下のJavaScriptを使って、ライトモード（light）とダークモード（dark）のクラスを切り替えます。トグルスイッチを変更して現在のモードを示すのも良いでしょう。このコードでは、CSSフィルターを使ってそれを実現しています。
// テーマを設定する関数function setTheme(theme) {// テーマが「ダーク」の場合、「ダーク」クラスを追加、「ライト」クラスを削除し、// フィルタースタイルを調整bodyEl.classList.toggle("dark", theme === "dark");// テーマが「ライト」の場合、「ライト」クラスを追加、「ダーク」クラスを削除し、bodyEl.classList.toggle("light", theme !== "dark");// トグルスイッチのフィルターを調整themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";}// ライトとダークを切り替える関数function toggleTheme() {setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");}themeToggle.addEventListener("click", toggleTheme);
これにより、トグルコンテナをクリックするとページのテーマが切り替わります。
JavaScriptでダークモードを強化する
訪問者にダークモードのサイトをより使いやすいものにするための、以下の2つの改善点を検討してください。
ユーザーの好みを検出する
これには、ウェブサイトが読み込まれる前にユーザーのシステムテーマをチェックし、サイトを一致させるように調整することが含まれます。matchMedia関数を使って行う方法をご紹介します。
// ユーザーの好むテーマを検出する関数function detectPreferredTheme() {// メディアクエリを使って、ユーザーが暗い配色を好むかどうかを確認const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;setTheme(prefersDarkMode);}// ユーザーの好むテーマを検出する関数を実行detectPreferredTheme();
これで、サイトにアクセスしたユーザーは、デバイスの現在のテーマと一致したデザインを見ることができます。
ローカルストレージを使ってユーザーの好みを維持する
ユーザーエクスペリエンスをさらに向上させるために、ローカルストレージを使って、セッション間でユーザーが選択したモードを記憶させましょう。これにより、ユーザーが好むモードを何度も選択する必要がなくなります。
function setTheme(theme) {bodyEl.classList.toggle("dark", theme === "dark");bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";// テーマをローカルストレージに設定localStorage.setItem("theme", theme);}// テーマがローカルストレージに保存されているかどうかを確認const storedTheme = localStorage.getItem("theme");if (storedTheme) {setTheme(storedTheme);}function detectPreferredTheme() {const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// ローカルストレージから値を取得const storedTheme = localStorage.getItem("theme");setTheme(prefersDarkMode && storedTheme !== "light" ? "dark" : "light");}
ユーザー中心のデザインを取り入れる
ダークモードは見た目だけではありません。ユーザーの快適さと好みを第一に考えることです。このアプローチに従うことで、ユーザーフレンドリーなインターフェイスを作成し、リピーターを増加させることができます。コードを書くときやデザインをするときは、ユーザーの幸福を最優先にして、読者に最高のデジタル体験を提供しましょう。
コメントする