ユーザーの好みに基づいてDrupal8（または9）でダークモードとライトモードを切り替える方法

ユーザーが好みに応じてインターフェイスを自由にカスタマイズできるようになるとしたら、どれほど素晴らしいことでしょうか。 多くのユーザーは明るいインターフェイス（明るい背景と暗いテキスト）を好みますが、一部のユーザーは暗いインターフェイス（暗い背景と明るいテキスト）を選択します。 暗いインターフェースはクールでトレンディなものとして認識されますが、特に画面の前で多くの時間を費やす開発者にとっては、目の負担を軽減すると考える人もいます。 ユーザーにオプションを提供することは、アクセシビリティとユーザーエクスペリエンスの点で大きなメリットになると思います。 これを達成する方法はいくつかあります。 この記事では、ダーク/ライトWebデザインモードを切り替えて、これをDrupal8またはDrupal9に実装する方法について説明します。

これを実装するための2つの方法に焦点を当てます-
1.CSSのみを使用します。
2. CSS＆JSトグルスイッチの実装

CSSのみを使用する

CSSのみを使用するWebサイトでダークモードを実現するには、システム要件のいくつかに留意する必要があります。 そのような重要な要件の1つは、システム全体のダークモードです。 ユーザーが自分のPCでダークモードを使用することを好む場合、ユーザーには、明るいテキストが付いた暗い色の背景を表示するWebサイトが表示されます。 優先配色（メディアクエリ）は、ユーザーがシステムに明るい色または暗い色のテーマを使用するように要求したかどうかを識別するために使用されます。

実装：

1.CSS変数を宣言します。
2.必要に応じて変数を使用します。

結果：

注：サポートされていない一部のデバイスで結果をエミュレートするには、F12キーを押してDevToolに入ります。 次に、CTRL + SHIFT + Pを押してから、prefers-color-scheme：darkを検索し、Enterキーを押します。

CSSとJSのトグルスイッチの実装

このアプローチを使用する場合は、システム要件について気にする必要はありません。 CSSとJSを数行書くだけで、準備が整います。 変数を初期化したら、スタイルシートでこれらの変数を参照できます。 これは、ダークモードとライトモードを切り替えるためのHTML構造になります。

そして、CSSのいくつかの行はこの切り替えをもたらすはずです。

最後の部分は、JavaScriptを少し追加して、すべてを結び付けることです。
●今後の訪問のためにユーザー設定を保存します
●ウェブサイトの読み込み時に、保存されているユーザー設定があるかどうかを確認します

それでおしまい！ 以下の完全なデモをチェックしてください。

または、ここをクリックしてデモを表示してください。

Drupal 8（またはDrupal 9）でのダーク/ライトトグルの実装

カスタムDrupal8テーマの作成を開始するには、こちらのすばらしい記事を参照してください。 Drupal8またはDrupal9でダークテーマ/ライトテーマを使用する方法を示すテーマの作成を開始しましょう。

ファイル構造は次のようになります。

次に、 page.html.twig内のヘッダーセクションを次のコードで更新します。

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

HTML構造の残りの部分は、デザインまたは要件によって異なります。
HTML構造が完成したら、CSSで要素のスタイルを設定して見栄えを良くします。
まず、ライト/ダークモードの色を担当するすべてのデフォルト変数を作成する必要があります。

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

変数の定義が完了したので、必要な結果を得るためにヘッダーセクションにスタイルを追加します。

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

要件によってスタイリングが異なる場合がありますのでご注意ください。 すべてのスタイリングが終わったら、Jqueryコードでいくつかの機能を記述します。 Jqueryコードは次のようになります（この場合はscript.js）

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

また、theme_name.libraries.ymlファイル内にJSファイルとCSSファイルを含めることを忘れないでください。

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

次に、サイトキャッシュをクリアして、結果を確認します。 最終結果は次のようになります。