« レーダーアニメーション 2 | メイン | 突然のgradleエラー »

javascript

Style Sheets + javascript でダークモード

 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タグの後方に記述。
 ポイントは

if( matchMedia( '(prefers-color-scheme: dark)' ).matches ){

おまけにスタイルシートのフィルターで全体的に変えてしまうアプローチの検証サンプル。
 Chrome, Edge, FireFox で差異あり。

トラックバック

このエントリーのトラックバックURL:
https://www.remix.asia/cgi/mt/mt-tb.cgi/7726

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)