| @ブログ
このサイトのデザインは黒地に白文字でダークモードという概念が出てくる前からダークモードだった。家のパソコンで見るときには見づらいと思うことはなかったが、外出先で日中にスマートフォンでサイトを見る...

dark-mode-and-light-mode.jpg

このサイトのデザインは黒地に白文字でダークモードという概念が出てくる前からダークモードだった。家のパソコンで見るときには見づらいと思うことはなかったが、外出先で日中にスマートフォンでサイトを見ると黒地に濃い赤色のリンクは見づらいなぁと思うことがあった。最近、 Mac や iPhone でダークモードの概念が浸透してきたので、自分のサイトの場合は昼間用のライトモード対応を行うことにした。こういう感じのメディアクエリを書けばよい。

@media (prefers-color-scheme: light) {
  ...
}

ただ、元々の CSS が結構ぐちゃぐちゃな書き方で難儀した。ダークモードとライトモードの切り替えが行えるサイトは必然的に CSS のメンテナンス性が高い状態だと思う。明暗を反転したときにこの色はこうなる、という対応関係が綺麗に提示できるような状態は、利用するカラーをシステマティックに整理できているということだと思う。 Sass で書いてあるなら利用する色はきちんと変数化されていて適切な命名がなされているとかそういう状態だと思う。 CSS の設計健康診断としてダークモード・ライトモード切り替え対応をやってみるのは結構いいと思う。

この記事に似ている記事

  • Portalshit in iphone
     ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用させることにした。P_BLOGにはUAごとに適用...
  • iPhone用の急速充電器 September 16, 2008
    Screenshot
     iPhone、OS 2.1でバッテリー持続時間が随分改善されたように感じますが、バリバリSafariを使ってるとやっぱりすぐ電池無くなっちゃいます。僕は先日、ヨドバシカメラでこれを買いました。 前の方の記事では PowerBank slim...
  • 1157 contexts
    アプリケーションスイッチャー使ってますかMac には標準で ⌘ + ⇥ でアクティブなアプリケーションを切り替える機能があるのをご存知ですか。こういうの。これは便利なんだけど、ブラウザーなどは複数のウィンドウ開くことがあり、アクティブなアプリ...
  • Coteditor
    今日はちょっとテキストエディターについて語ってみたいと思います。ちなみにTerminalから直接呼び出して使う系のエディターにはまだ手を出してません。viとかvimっていうんですかね。これはjとかkとかでカーソル移動させるしちょっと初心者には...
  • 745700843 bff46d5a9d b
     D40Xを買ってから毎日バシャバシャ写真撮ってます。すごく楽しいです。とても簡単に良い写真が撮れてるような気がして。前も書きましたが、コンデジ卒業者にとっては背景がボケるだけですごく嬉しいんですよね。絞り優先モードで撮影すると簡単に背景をぼ...
  • Life without smartphone September 18, 2013
    D4990c64f75ca38b6b416a9037adfed5
    Ruby 関連のことを検索していて Shopify の中の人のブログにたどり着いた。なかなか面白いことが書いてあった。この人は去年の 11 月に iPhone 4 を落として割ってしまったらしい。すぐに iPhone 5 を買おうとしたのだけ...

Comments


(Option)

(Option)