夜中に開発していると、暗めのエディタと真っ白なサイトの切り替えがかなりしんどい。

実装としても面白そうなので、ダークテーマ導入を優先してみることにする。

サイト構成

• framework: Next.js
• UI framework: Shadcn
• CSS framework: Tailwind
• その他: Lexical

Shadcn自体はもともとdark themeを導入しやすい仕組みになっている(後述)ので、Shadcnコンポーネントで構成している部分は殆ど調整が必要ないはず。

記事全般に使用しているLexicalは、Lexical独自のTheming機能を持っているので、そのあたりの調整が必要になってかなという事前の見積もり。

技術選定&導入

• next-themes: https://github.com/pacocoursey/next-themes

TODO: local storageベース？でタブ間共有などがスムーズにできる。classを指定するかattributeを指定するかでthemeの適用方法を変えることができて、CSS frameworkとの橋渡しがしやすい。

スムーズに対応できたポイント

shadcn系のコンポーネントは基本的にうまくいった。

lucide-reactのアイコンも調整不要だった。

調整が必要だったポイント

hover:bg-gray-50をhober:bg-accentに置き換えてみたり。