mook-iconmook
👽

Dark Modeを追加しました。

Published
Read Time
1 min
Written By
mook

このサイトにダークモードを追加しました。
ダークモードの切り替えは基本的にユーザーのシステム設定のモードで切り替えが行われます。
基本的には tailwindcss を利用しているので、 dark: で設定可能ですが、
マークダウンについては zenn のCSSを利用しているため、そこだけ別途CSSで適用しています。

@media (prefers-color-scheme: dark) {
  .znc blockquote {
    color: #b5b9bc;
  }
  .znc details summary {
    background: rgb(15 23 42 / var(--tw-bg-opacity));
  }
  .znc details[open] summary {
    background: #2f3949;
  }
  .znc details[open] .details-content {
    background: rgb(15 23 42 / var(--tw-bg-opacity));
  }
  .znc th {
    background: #2f3949;
  }
  .znc td {
    background: rgb(15 23 42 / var(--tw-bg-opacity));
  }
}