Adding "dark mode" to my blog

Jeremy Keithのpost about adding dark mode to his blogを見て、簡単そうに見えたので、それを旋回することにしました。

すべてを見るためのdiff of the workは次のdiff of the workです。それは驚くほど簡単でした(私の側のばかげたエラー以外)。 CSS変数をサポートするための小さなリファクタリングがあり、CSSカスタムプロパティをサポートしないブラウザーがある場合にフォールバックできるようにしましたが、それはそれに関するものです。私はジェレミーがやったのとほとんど同じことをしました。

Chromeには、設定されているダークモード( I hear it’s coming )をエミュレートするDevToolsのサポートがなかったため、HTML要素に追加して動作を簡単にテストできる単純なCSSクラスを作成しました(以下を参照)。

@media (prefers-color-scheme: dark) {
  html {
    --background-color: rgb(36, 36, 36);
    --text-color: #fefefe;
    --block-quote-before-color: #333;
    --link-color-visited: #7ad857;
    --post-shadow: #333;
  }

  .post.moi a[rel=me] img {
    filter: invert(0.8);
  }
}

html.dark {
  --background-color: rgb(36, 36, 36);
  --text-color: #fefefe;
  --block-quote-before-color: #333;
  --link-color: #1bcba2;
  --link-color-visited: #7ad857;
  --post-shadow: #333;
}

html.dark .post.moi a[rel=me] img {
  filter: invert(0.8);
}

ダークモードではありません

ダークモード

Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium