jarinosuke blog

ダークモード対応した

やったこと

  • prefers-color-scheme を使ってスタイルの切り替えを実装した（ダークモード対応）
    • それに伴って全体的にデザインを変更、普段使ってる Mac/iOS Note.app ぽい黄色にした
  • シンタックスハイライトのデザイン変更した
  • コードブロックの上にファイル名やタイトルを付け加えられるようにした
  • 内部の Markdown へのリンク遷移時に、リロードされないようにした
    • gatsby-plugin-catch-links を使った
    • 直リンクだと、デプロイ前のプレビューで遷移確認できないのと、せっかくSPAぽく動いてるので無駄なリロードは避けたかったので

対応した PR はこれ

しなかったこと

  • シンタックスハイライトのダークモード対応
    • 面倒そうだったのと、 prism-tomorrow でどちらの場合も事足りそうな雰囲気だったので見送り
  • トグルやチェックボックスを置いて、ユーザがスタイルを切り替えるようにする
    • React Component をシュッと作れそうに無かったのと、そんなに使われなさそう

CSS Media Query

ユーザの端末や設定などに CSS からアクセスするための仕組み

今回のダークモードについても prefers-color-scheme というキー名に対して以下の様にクエリを投げ、

その返り値が light か dark によってスタイルの出し分けを行っている

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

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

手元の Safari や Chrome では動くぽいので、既に一定標準なのかもしれない

参考