Pathee engineering blog

世界をしなやかに変えるエンジニアたちのブログ

CSS歴だいたい60時間で対応する!はてなブログのダークモード対応。

f:id:cctdcct:20190604131154p:plain

こんにちは。GW明けからCSSに挑戦している Pathee デザインインターンのkouki-yです。

みなさんダークモードはお使いですか?macOS Mojaveからサポートされたこの機能を愛用している方も多いのではないでしょうか。

SafariFirefoxを皮切りに、Webでも対応が進むダークモード。このブログもさらっと対応してみたので、今回はそのプロセスを3ステップでご紹介します。

STEP 1: カラーパレットを作る

f:id:cctdcct:20190604122203p:plain

まずは、Adobe XDでダークモード用のカラーパレットを用意しました。文字色を「#FFF」、背景色を「#1B2625」にしています。ほかの箇所も暗い背景に合わせて最適な色を用意しています。

Tips このときに背景色のブラックを#000にするとコントラストが強すぎます。目への刺激を和らげるために、少しだけ明るいトーンにしています。

STEP 2: CSSを修正する

次にCSSを修正していきます。

メディアクエリを使うことで、「ダークモードの場合」「ライトモードの場合」でカラーを出し分けられるようになります。

このとき、併せてカラーパレットをカスタムプロパティで定義しておきましょう。のちのち修正が楽になります。

Tips はてなブログの場合、カスタムプロパティの変数名にハイフンを使うとうまく認識されませんでした。ハイフンのかわりにアンダーバーを使っています。

/* darkmode */
@media  (prefers-color-scheme: dark) {
  :root {
    --main_text: #FFF;
    --sub_gray: #919998;
    --mini_gray: #F0F0F0;
    --bright_green: #00AC91;
    --dark_green: #00574A;
    --theme_base: #1B2625;
  }
}

/* lightmode */
@media (prefers-color-scheme: light) {
  :root {
    --main_text: #031A16;
    --sub_gray: #919998;
    --mini_gray: #F0F0F0;
    --bright_green: #00AC91;
    --dark_green: #00574A;
    --theme_base: #FFF;
  }
}

そして、カラーコードで色を指定していた部分をそれぞれ変数で置換していきます。

/* 修正前example */
#title a {
    color: #031A16;
}

/* 修正後example */
#title a {
    color: var(--main_text);
}

ここまでの作業で、OSのアピアランスに合わせてカラーテーマが変わるようになりました🎉

STEP 3: アイコンのカラーを修正する

f:id:cctdcct:20190604130713p:plain

背景色がホワイトであることを前提に作っていたため、シェアボタンやフォローボタンが浮いてしまいました。ここは背景色を透明にすることで修正対応しました。*1

f:id:cctdcct:20190604132019p:plain

さらに、ホバー時の背景色も修正をしています。半透明のグレーに変更することで、背景がホワイトでもブラックでも最適に表示されます。

まとめ

f:id:cctdcct:20190604132504g:plain

ということで、ユーザーのOSのアピアランスに合わせてカラーテーマが変化するようになりました。便利!!

細かい部分がまだ最適化されていませんが、CSSを触りはじめてから60時間ほどで、はてなブログをダークモードに対応させることができました。意外と手間なくダークモードに対応できることがおわかりいただけたのではないでしょうか。

Android QやiOS 13、iPadOSなど次世代のモバイル環境でもダークモードがサポートされるため、より多くの人に身近な機能になりそうです。

ぜひダークモード対応のご参考にしてみてください!

採用情報

Patheeでは、このように新しい機能の実装に興味があるエンジニアやデザイナーを募集しています!Wantedlyからぜひご連絡ください!

こちらの記事を参考にさせていただきました:

*1:各社ロゴの白抜き部分は時間切れで対応できなかったので、今後対応したいところ...!