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);
}

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

ダークモード

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium