ダークモード/ライトモードをおしゃれに切り替えるコードスニペット8選【CSS/JavaScript】
サイトの配色は、読みやすいWebサイトをつくるうえで非常に重要です。たとえば、視覚に障がいをもつユーザーのなかには...
- CodePen
- CSS
- JavaScript
ダークモードとは【意味/読み/英語表記】（Dark Mode）
ダークモードの概要
iPhoneなどの画面では、白色の背景に黒色で文字が表示されるライトモードが通常です。これを逆転させ、黒色の背景に白文字が使用されるものがダークモードです。
ダークモードの詳細
iPhoneの場合、2019年にリリースされたiOS13から、このダークモードが導入されています。
最近ではアプリごとにダークモードの設定が可能なものも増えています。
ダークモードのメリットや効果は以下のようなものがあります。
■ 目への負担が軽減する
ライトモードとダークモード、どちらが目に負担が少ないかは周りの環境によって変わります。
周囲が暗い場合はダークモードの方が使いやすいが、周囲が明るければダークモードは逆に目への負担が大きくなるといわれているのです。
■ 電力が節約できる
有機EL（OLED）を使ったディスプレイであれば、ダークモードに設定するとバッテリーが節約できます。
（1）有機EL（OLED）
有機ELとは「Electro Luminesxent（エレクトロ・ルミネッセンス）」の略で、「電気のより光るもの」という意味です。
iPhoneでは、有機ELの一種である「OLED（Organic Light Emitting Diode）」と表記する、有機発光ダイオードが使用されています。
有機ELは、物体が個別に発光するため、ダークモードにすると発光をオフにできるため、バッテリーが節約できます。
iPhon Xなどではこの有機ELが使用されています。
（2）液晶ディスプレイ
一方、液晶ディスプレイでは、仕組みとしてバックライトを発光させています。
そのため、ダークモードにしても発光はオフにならず、省エネには繋がりません。
最近までのスマートフォンは、ほとんどが液晶ディスプレイでした。
