もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

Material DesignのDark themeの章読んだめも

dark-themeのページを流し読みしたメモ。

material.io

めも

  • 完全な黒ではなくdark gray(おすすめは#121212らしい)を使用する。
  • UI Componentにはaccent colorを使う。
  • 暗い色を基調とし、明るいピクセルを減らす(OLEDスクリーンを使ったデバイスなどにおいては端末のバッテリー消費が抑えられる)
  • 背景色とテキストの色のコントラストは指定のガイドラインを満たすようにする。ガイドラインは↓

www.w3.org

  • dark themeはアプリ内のコントロールでdefaultのthemeと切り替えることができる。実装のパターンは固定ではない
  • elevationが高いほど明るめのdark grayをsurfaceに使う。明るさはelevationに応じた半透明のoverlay(0 〜 16%)を被せて調整する。
  • surfaceにaccent colorを使った場合はshadowでelevationを表現する。