Next.js × shadcn/ui で OS 設定にも対応したダークモードを実装しました

2025年08月18日

Next.js アプリにダークモードを導入する場合、shadcn/ui の公式ドキュメントでは next-themes を使った実装方法が推奨されています。
この方法を使うと、OS のテーマ設定に自動で追従しつつ、ユーザーが手動で切り替える UI も簡単に実装できます。

1. next-themes のインストール

まずはテーマ管理ライブラリを導入します。

npm install next-themes

2. ThemeProvider コンポーネントを作成する

ThemeProvider をラップして再利用できる形にします。

// components/theme-provider.tsx
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

3. ルートレイアウトに組み込む

Next.js のレイアウト (app/layout.tsx) で ThemeProvider を利用します。
suppressHydrationWarning を html に付けるのが公式推奨です。

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

まとめ

shadcn/ui 公式推奨は next-themes を利用する方法
ThemeProvider をルートに配置し、defaultTheme="system" で OS 設定に追従

これで 「OS 設定に応じたダークモード」 + 「ユーザーによる手動切替」 を簡単に導入できます 🎉