ウェブサイトの配色設定 (ライトモード / ダークモード) を切り替える機能をウェブコンポーネントで実装する
ダークモードに対応したウェブサイトでは配色設定 (ライトモード / ダークモード) を任意に切り替えられるスイッチが実装されていることがよくある。 この機能を特定のライブラリを使わずウェブ標準機能のみを使ってウェブコンポーネントで実装したので紹介する。 React などの外部ライブラリを使う場合でも基本的なロジックは使い回せるはずだ。 前提記事として ウェブサイトのダークモード対応のベストプラクティス も見てほしい。
ソースコード
デモ
使い方
- TypeScript を JavaScript にコンパイル (トランスパイル) する。
-
ウェブページの
<head>要素内で<script>要素を使ってスクリプトを読み込む。<script type="module" src="component/color-scheme/index.js"></script> -
ウェブページの
<head>要素内に以下のカスタム組み込み要素を置く。<meta is="color-scheme" name="color-scheme" content="light dark"> -
ウェブページの
<body>要素内の任意の場所に以下のカスタム組み込み要素を置く。<select is="color-scheme-select"></select>
処理の流れ
-
<select>要素の子要素に<option>要素を挿入してドロップダウンリストを作成。 - ドロップダウンリストが操作されたら JavaScript の Web Storage API で設定値を保存。
-
ウェブページのレンダリング時にその設定値を読み出して
<meta>要素のcolor-schemeプロパティを書き換える。
動作確認済みウェブブラウザ
- Google Chrome 131
- Mozilla Firefox 132
- Safari 18.1
Safari などの WebKit 系ウェブブラウザではそのままでは動かない。 なぜならそれらは自律型カスタム要素のみ対応していてカスタム組み込み要素は対応していないからだ。 それらでもカスタム組み込み要素を動かす方法は後日公開予定だ。