最近のOSではダークモードをサポートしているものが増えています。10、Androidなどが利用できます。アプリはもちろん、Webサイトでもダークモードのサポートが望まれています。ライトモード、ダークモードはユーザが設定するものなので、彼ら自身がその状態での表示を望んでいると言えるでしょう。HTMLもまた、ライトモード/ダークモードをサポートすることでユーザビリティを高められるはずです。ダークモードをサポートするメールアプリについて現在、ダークモードをサポートするメールアプリは多くありません。WindowsGmailアプリについては今後サポートが予定されています。iOSについてはスプラッシュスクリーンがすでにダークモードに対応しており、間もなくサポートされると思われます。ダークモードに対応したHTMLメールの書き方まずheadタグ内にstyleタグを書きます。:rootにてcolor-schemeを定義します。この設定がないとうまく認識されません。dark;}そしてデフォルト(ライトモード)のスタイル設定を記述します。ダークモードの指定、さらにスタイル設定を記述します。}}このように書くことでダークモードに対応したHTMLメールが完成します。ダークモードのメールライトモード、ダークモードでメールの内容を変えるdisplay設定によって、ライトモードとダークモードで情報の出し分けが可能です。HTMLメールの本文を次のようにします。Mode!</div>そしてデフォルト(ライトモード)に合わせてダークモード時の情報を消します。none;}最後にダークモード時のスタイル設定を追加します。}}ダークモードに対応していないメールアプリの場合、ライトモードの情報を表示するようになります。ダークモードに対応している場合のみ、ライトモードの情報を非表示にできます。(右)ダークモード時まとめダークモードは今後利用が伸びていくでしょう。HTMLメールについても同様にサポートを検討すべきです。その際のテクニックとして、この記事が役に立てば幸いです。Cloudをご利用ください。Unsplashスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。