全棧身份認證實作:使用 Next.js、NextAuth.js 和 MongoDB-15. 深色模式切換
Published in
Dec 13, 2023
配置深色模式切換功能。
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