ダークモードをCSSで実装してみたよ

はじめに

ご存知の方も多いと思いますが、もじゃもじゃからダークモードがオフィシャルで搭載されました。が、しかし。Safariは未対応のまま。引用記事によると、数ヶ月以内にSafari12.1がリリースされてそれで対応されるであろうとのこと。

ダークモードのコード

というわけで、いまのうちにさらっと実装の方法を確認。コードはこんな感じ。

<html>
<head>
  <title>Darkmode demo</title>
  <style>
    /* Text and background color for light mode */
    body {
      color: #555;
    }

    /* Text and background color for dark mode */
    @media (prefers-color-scheme: dark) {
      body {
        color: #fafafa;
        background-color: #222;
      }
      h2 {
        color: #aaa;
      }
    }
  </style>
</head>
<body>
  <h1>Good evening world!</h1>
  <h2>Zzzz...</h2>
</body>
</html>

ちなみに prefers-color-scheme は dark , light, and no-preferenceの3種類からお選びいただけます。

SafariTechReviewの準備

上記したとおり、まだSafariはダークモードを搭載していません（2018/10/26現在）。次のバージョンからです。ですが、Safari Tech Previewという名の開発者用先取り版があるので、以下のURLからそのバージョンのSafariをとってきましょう。

Safari Technology Preview - Safari - Apple Developer

実際に動かしてみた

f:id:kai1233:20181026003154g:plain

SystemPreferance → Generalでダークモードを切り替えられます。Safari tech preview版でダークモードのコードを書いたCSSとHTMLを読み込んでみましょう！すげぇ！よくみるやつだ！

おわりに

ダークモードいいですよね。ぼくはダークモードすきです。昼間でもダークモードにして目を保護してます。仕事とか、趣味とかでどれだけ利用するかは謎ですが、ちょっと楽しい機能でした。

hogehoge diary

hoge