HTML5でオプションのスタイルシートを使ってWebサイトやアプリケーションにダークモードを追加する方法を解説

サイトへのダークモードの追加

ダークモードは、Twitter、Instagram、WhatsApp、YouTubeなど、すでに多くの人気Webサイトやアプリで採用されています。しかし、自分のウェブサイトにこのパターンを追加するにはどうすればよいのでしょうか？

私は以前から、ウェブサイトのダイナミックなカラーテーマ切り替え機能の大ファンです。好きなカラーテーマを選べるので、ユーザーエクスペリエンスが向上しますよ。

例えば、Twitterの表示設定にあるカラーテーマオプションは以下の通りです。

今回も似たようなものを作ってみましょう。Twitterのテーマチェンジャーほどハイレベルではないかもしれませんが、ここで使われる技術的な内容を説明し、代替スタイルシートとJavaScriptを使って、CSSに含まれるテーマ定義を切り替える方法を紹介します。

まず......この記事でどんなコンテンツを作るか見てみましょう。

このサイトでトグルできるカラーテーマの実行例です。

https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt

各ボタンをクリックすると、サイト全体のCSSテーマが瞬時に切り替わります。このチュートリアルの続きでは、自分のサイトにダークモード機能を追加する方法を紹介しますよ。

このダークモードチュートリアルのページで使用されているオプションのスタイルシートを入手できれば、それをコピーして自分のサイトに使用したり、Wordpress（または同様のサイトビルダー）で使用したりすることもできます。

CSSにはインライン、インターナル、エクスターナルがあることをご存じでしょうか。これは、CSSがどのように文書に含まれるかを決定するものです。しかし、オプションのスタイルシートの概念を理解するためには、まず、......を見る必要があります。

カスケードスタイルシートの3つのタイプ

しかし、カスケーディング・スタイル・シート（別名CSS）には、他に3つの形式があります。それらは、persistent（永続的）、preferred（好ましい）、optional（任意）です。

永続的なスタイルとは、常に有効で、アクティブなスタイルシートと組み合わされるCSSスタイルのことである。永続的なスタイルシートを指定するには、リンクタグに rel = "stylesheet" 属性を追加し、title 属性をスキップしてください。

これが通常のスタイルシートの指定方法です。

<! -- Persistent Style Sheet --> 
<link src = "style.css" rel = "stylesheet" 

Preferred styleは、ページが読み込まれたときに有効になるデフォルトのスタイルです。これを作成するには、CSSのリンクタグにtitle属性を追加します。

<! -- Alternate Style Sheet (just add a title) --> 
<link src = "dark.css" 
      rel = "stylesheet" 
    title = "dark" /> 

オプションのスタイルをリアルタイムに切り替えることで、ページを再読み込みすることなく、ページテーマを変更することが可能です。

<! -- Dark Mode Alternate Style Sheet --> 
<link src = "dark.css" 
    title = "dark" /> 
      rel = "alternate stylesheet" /> 
<! -- Light Mode Alternate Style Sheet --> 
<link src = "light.css" 
    title = "light" 
      rel = "Alternate stylesheet" /> 

オプションのスタイルシートを作成するには、リンクタグのrel属性に"alternate stylesheet"を設定するだけでよい。これだけです。これは最初のステップに過ぎない。あとは、スタイルシートを切り替えるためのスクリプトを書くだけだ。

スタイルシートの動的な切り替え

このことについて調べていたとき、ネット上でやや古いスタイルシートオプションのJavaScript関数をいくつか見つけた。しかし、それらは少し古かったので、私は自分自身のバージョンを書きました。

最も重要なことは、有効にしたいオプショナルスタイルシートオブジェクトのdisabled属性をfalseに設定する必要があることです。

<! -- Switch to a named alternate stylesheet --> 
function setActiveStyleSheet(title) { 
    let css = `link[rel="alternate stylesheet"]`; 
    let stylesheets = document.querySelectorAll(css); 
    stylesheets.forEach(sheet => sheet.disabled = true); 
    let selector = `link[title="${title}"]`; 
    let stylesheet = document.querySelector(selector); 
    stylesheet.disabled = false; 

新しいスタイルシートに動的に切り替えるには、まず利用可能なすべてのオプショナルスタイルシートを無効にする必要があります。これを怠ると、オプションのスタイルシートが機能しない（切り替えができない）ことがわかります。そこで、この機能の最初のステップでは、利用可能なオプショナルスタイルシートをすべて無効化します。それが終わったら、titleパラメータで指定されたものを有効にします。

<! -- Attach event to a button --> 
    let DarkModeButton = document.getElementById("DarkModeButton"); 
    DarkModeButton.addEventListener("click", 
        event => setActiveStyleSheet("darkmode")); 

setActiveStyleSheet関数は、トグルを担当するボタンの"click"イベントへのコールバックとしてアタッチすることができます。上記の例では、title = "darkmode"のスタイルシートがあると仮定していることに注意してください。また、単純に要素に直接 onclick 属性を使用することもできます。

<div id = "DarkModeButton" 
onclick = "setActiveStyleSheet('darkmode')"> 

CSSスタイルシートの動的な切り替えに必要な作業に関しては、これですべて完了です。でも、もうひとつだけ! ユーザーが別のテーマを選択してサイトを離れた場合、戻ってきたときに最後に選択したテーマを読み込むようにする必要があります。これはクッキーを使って行うことができますが、このチュートリアルでは、HTML5 localStorageを使って行います。

選択したテーマを記憶する

localStorageを使って、ユーザーが以前選択したトピックを記憶させることができます。このコードは簡単です。テーマが選択されるたびに、そのタイトル名を "theme" という localStorage アイテムに保存します。前のステップですでに書いた関数を更新しましょう。

<! -- Switch to a named alternate stylesheet --> 
function setActiveStyleSheet(title) { 
    let css = `link[rel="alternate stylesheet"]`; 
    let stylesheets = document.querySelectorAll(css); 
    stylesheets.forEach(sheet => sheet.disabled = true); 
    let selector = `link[title="${title}"]`; 
    let stylesheet = document.querySelector(selector); 
    stylesheet.disabled = false; 
    localStorage.setItem("theme", title); 
} 

ここで、新しいlocalStorageの呼び出しを追加していることに注目してください。これで、オプションのスタイルシートに切り替えるたびに、キーワード "theme" の下に保存されるようになります。

さて、ユーザーがサイトを離れ、（ブラウザのタブを閉じた後）サイトに戻った場合、localStorage に保存されたデフォルトのテーマを復元する必要があります。

これを行うには、DOMContentLoaded イベント（DOM が読み込まれた直後）からローカル ストレージを読み取り、テーマ アイテムに保存された値を使用してスタイルシートを選択する必要があります。

<! -- Switch to a named alternate stylesheet --> 
window.addEventListener('DOMContentLoaded', (event) => { 
    console.log('DOM fully loaded and parsed'); 
    let title = localStorage.getItem("theme"); 
    setActiveStylesheet(title); 
}) 

そして、これで完成です これでテーマセレクタ用の完全な、オプションのCSSテーマが完成しました。もちろん、より難しいのはCSSレイアウトのセットを作成することですが、これについては次のチュートリアルで説明します。

HTML5のダークモードに関連するコンテンツは、Script Houseの過去の記事を検索するか、以下の関連記事を引き続きご覧ください！今後ともScript Houseをよろしくお願いします。