全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－15. 深色模式切換

配置深色模式切換功能。

參考: shadcn/ui (Dark mode)

15–1. 配置深色模式

• 安裝所需套件：

npm install next-themes

• 在 providers 資料夾，新增 theme-provider.tsx，將 ThemeProvider 添加到 layout.ts (RootLayout) 中。

15–2. 添加切換模式按鈕

• 在 components/shared 資料夾中新增 mode-toggle.tsx，使用 theme 狀態和 setTheme function 來控制主題切換。
• 在 Navbar 組件（navbar.tsx）中添加 ModeToggle 按鈕。

程式碼

切換深淺模式按鈕 及 畫面效果

切換深淺模式按鈕 及 畫面效果

單元重點

• 安裝 next-themes，在 layout (RootLayout) 加上 theme-provider。
• 建立切換深淺模式 ModeToggle 按鈕，於 Navbar 組件添加此按鈕。

參考資料

shadcn/ui (Dark mode)－https://ui.shadcn.com/docs/dark-mode/next

回到目錄
https://medium.com/p/3d2a3ec1d3b6