Webページをダークモードに対応。既存のスタイルシートと新たなダークモードスタイルシートを javascript で切り替えるアプローチ。
デフォルトでシステム設定に従い、閲覧者の操作でライトモード・ダークモードを選択可能にする最小限の実装例...▼
デフォルトでシステム設定に従い、閲覧者の操作でライトモード・ダークモードを選択可能にする最小限の実装例...▼
●Cookie 方式サンプル 
●LocalStorage 方式サンプル
さらに、ダークモードのON/OFFトグルではなく
> 
> 
> ... 複数モードに対応。
●アイコン スライド方式サンプル
ソースは github に。
https://github.com/remixgrjp/Switch-Style-Sheets
いずれも同じ構造で
light.css : ライトモード用スタイルシート
dark.css : ダークモード用スタイルシート
StyleSheet.js : スタイルシート切替・モード保持制御
index.html : 「StyleSheet.js」をbodyタグの後方に記述。
ポイントは
●おまけにスタイルシートのフィルターで全体的に変えてしまうアプローチの検証サンプル。
Chrome, Edge, FireFox で差異あり。
●LocalStorage 方式サンプル
さらに、ダークモードのON/OFFトグルではなく
> > > ... 複数モードに対応。●アイコン スライド方式サンプル
ソースは github
に。https://github.com/remixgrjp/Switch-Style-Sheets
いずれも同じ構造で
light.css : ライトモード用スタイルシート
dark.css : ダークモード用スタイルシート
StyleSheet.js : スタイルシート切替・モード保持制御
index.html : 「StyleSheet.js」をbodyタグの後方に記述。
ポイントは
if( matchMedia( '(prefers-color-scheme: dark)' ).matches ){●おまけにスタイルシートのフィルターで全体的に変えてしまうアプローチの検証サンプル。
Chrome, Edge, FireFox で差異あり。
このブログのフィードを取得