BETA

個人ブログをCSSでダークモード対応してみた

投稿日:2020-02-05
最終更新:2020-02-05

スマホやPCをダークモードに設定している方が私のブログを閲覧した時、いい感じにダークに見えるようにしてみた。

https://blog.rokuzeudon.com

レスポンシブ設定と同じ感覚で prefers-color-scheme を使ってダークモード用の配色をぽちぽち定義した。

@media (prefers-color-scheme: dark) {  
  hogehoge  
}  

https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

ちなみにEdgeはまだ対応していないらしい。

やったことはそれだけなのだけど、配色の指定やバリエーションの数だけ書き加える必要があって、要素の少ない当ブログでもそこそこ面倒に感じた。ていうかもっと効率良い方法ありそう…。

今後スタイルを調整・追加する時には、ちゃんとダークモード・通常(ライト)モード両方で確認しなくてはいけない。ブログに限らず、この辺り楽に管理・運用できるようなUI・配色設計も求められていくのかなと思う。

埋め込んだカード(Twitterとかリンクとか)の配色の変更について良い方法がないか調べたい。

もし変な箇所があったら教えてください!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@rokuzeudon の技術メモログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう