shadcn/uiで簡単にダークモード対応をする

概要

shadcn/uiではダークモード対応のために手順が用意されています。

しかし、上記手順は少々複雑です。システム設定を反映させるだけならもっと簡単な方法があったのでメモします。

以下はremixの場合ですが、他のフレームワークでも使えるかもしれないです。

手順

1. CSS変更

app/tailwind.cssの

.dark {
  ...
}

を

@media (prefers-color-scheme: dark) {
  :root {
    ...
  }
}

に書き換える。

2. tailwind設定変更

tailwind.config.tsで、以下をコメントアウト。

// darkMode: ["class"],

もしくは以下に変更。

darkMode: ["media"],

ソース