ダークモードを実装するなら、今回の記事で紹介する darkModeToggle の完全上位互換である darkModeSwitcherUltimate がおすすめです。詳細はこちらをご覧ください。
Salesforceの最新ランタイムである LWR (Lightning Web Runtime) は、高速で柔軟なカスタマイズが可能ですが、サイト全体のテーマカラーを動的に切り替える「ダークモード」の実装には工夫が必要です。
CSSカスタムプロパティ（スタイリングフック）をJavaScriptで操作するのが基本ですが、以下のような課題に直面しがちです。
- 管理が大変: 色コードをJavaScriptにハードコーディングすると、微調整のたびにデプロイが必要になる。
- 標準コンポーネントの癖: 検索バーやレコードリストなど、一部の標準コンポーネントがグローバル変数に従ってくれない。
- スタイリングフックの数が膨大: どこをどう変えればいいか特定が難しい。
これらの課題を解決し、「開発者が一度導入すれば、あとはアドミンがビルダー画面で自由に色を設定できる」 高機能なダークモード切り替えボタンを作成しました。ソースコードはGitHubで公開しています。
コンポーネント紹介
今回の記事で作成した「ダークモード切り替えコンポーネント」の全ソースコードをGitHubで公開しています。 ぜひ Clone して、あなたの組織で動かしてみてください。
コンポーネントの概要: darkModeToggle
このLWCコンポーネントをヘッダーやフッターに配置するだけで、サイト訪問者はワンクリックで「ライトモード／ダークモード」を切り替えられるようになります。設定はブラウザに保存されるため、次回訪問時も好みのモードが維持されます。
最大の特徴：ビルダーのプロパティパネルですべて完結
js-meta.xml にLWRの主要なスタイリングフックを網羅的に定義しました。これにより、エクスペリエンスビルダーのプロパティパネルにカラーピッカーが表示され、コードを一行も書かずに詳細な色設定が可能になります。
設定可能な項目（一部抜粋）
LWRサイトの [テーマ] > [色] や [テーマ] > [ボタン]から設定する項目を網羅しています。
さらに、テーブルや画面フローなどの設定も可能です。
- 基本: 背景色、テキスト色、ブランドカラー、アイコン色
- テキスト: H1～H6、本文、リンク色（ホバー含む）
- フォーム: 入力欄の背景・文字・枠線・フォーカス時の色、チェックボックス
- ボタン: Primary, Secondary, Tertiary それぞれの通常・ホバー・フォーカス時
- 高度な設定: レコードリストのヘッダー背景、テーブル行のホバー色、画面フローの背景など
技術的な実装ポイント
このコンポーネントには、LWRサイト開発で役立ついくつかのテクニックが詰め込まれています。
スタイリングフックのマッピング
基本的には、ビルダーで設定された色を document.documentElement.style.setProperty を使用して、LWR標準のCSS変数（例: --dxp-g-root）に適用しています。これにより、サイト全体の色が一括で切り替わります。
applyTheme() {
const style = document.documentElement.style;
...
if (this.isDark) {
// ダークモード設定
darkKeys.forEach(key => {
if (darkVars[key]) style.setProperty(key, darkVars[key]);
});
...
}
...
}頑固な標準コンポーネントへのスタイル注入
検索バー（Input要素）の背景色や、レコードリストのテーブルヘッダーなど、標準のスタイリングフックだけでは色が適用されない（または詳細度で負けてしまう）箇所があります。 これに対応するため、JavaScriptから動的に <style> タグを生成し、!important 付きのCSSルールをヘッダーに注入する「オーバーライド機能」を実装しています。
// 例：標準テーブルの行ホバー色を強制的に上書きする処理
injectOverrideStyles() {
// ...
if (this.recListRowHoverColor) {
cssRules.push(`
tr:hover > td,
.slds-table tbody tr:hover > td {
background-color: ${this.recListRowHoverColor} !important;
}
`);
}
// ...
}画面の高さ100%問題の解消
LWRサイトでよくある「コンテンツが少ない時やスクロール時に、Bodyの背景色が途切れて白い隙間が見える」という問題も、html と body タグに対して動的に背景色と min-height: 100vh を適用することで解決しています。
インストールと使用方法
ソースコードは以下のGitHubリポジトリで公開しています。
GitHub: dxforce-site/darkModeToggle
- 上記リポジトリからソースコードを取得し、Salesforce組織にデプロイします。
- エクスペリエンスビルダーを開き、Theme Header（または任意の場所）に
Theme Toggleコンポーネントをドラッグ＆ドロップします。 - プロパティパネルで、ダークモード時の各要素の色を指定します。（指定しない箇所はデフォルト設定または透過が適用されます）
- サイトを公開します。
まとめ
このコンポーネントを使えば、ブランドイメージを損なうことなく、ユーザーに優しいダークモードを提供できます。また、季節ごとのキャンペーンなどで「夜のテーマカラー」を変更したい場合も、開発者に依頼することなく運用担当者だけで完結できます。
ぜひ、あなたのLWRサイトにも導入してみてください。
読者の声