深色模式
如同我們在主題章節中提到的，NextUI 預設提供兩種主題：light 和 dark。因此，使用 dark 主題就像將其加入到 html / body 或 main 元素的 className 一樣簡單。
這將為整個應用程式啟用深色模式。然而，許多應用程式需要能夠在不同的主題之間切換。為此，我們建議使用主題切換函式庫或建立您自己的實作。
使用 next-themes
對於使用 Next.js 的應用程式來說，next-themes 函式庫是一個絕佳的選擇。它內建許多功能，可以在主題之間轉換時增強使用者體驗。
如需更多資訊，請參閱 next-themes 文件。
Next.js App 目錄設定
安裝 next-themes
在您的專案中安裝 next-themes。
新增 next-themes 提供者
使用 next-themes 的 ThemeProvider 元件包裝您的應用程式。
前往您的 app/providers.tsx 或 app/providers.jsx (如果不存在，請建立它)，並使用 NextUIProvider 和 next-themes 提供者元件包裝 Component。
注意：我們使用
class屬性來切換主題，這是因為 NextUI 使用className屬性。
新增主題切換器
將主題切換器新增至您的應用程式。
注意：您可以使用任何您想要的主題名稱，但請確保它存在於您的
tailwind.config.js檔案中。請參閱 建立主題 以取得更多詳細資訊。
Next.js Pages 目錄設定
安裝 next-themes
在您的專案中安裝 next-themes。
新增 next-themes 提供者
前往 /_app.js 或 pages/_app.tsx 頁面 (如果不存在請建立)，並將 Component 包裹在 NextUIProvider 和 next-themes provider 元件中。
注意：我們使用
class屬性來切換主題，這是因為 NextUI 使用className屬性。
新增主題切換器
將主題切換器新增至您的應用程式。
注意：您可以使用任何您想要的主題名稱，但請確保它存在於您的
tailwind.config.js檔案中。請參閱 建立主題 以取得更多詳細資訊。
使用 use-theme hook
如果您使用原生的 React 搭配 Vite 或 Create React App，您可以使用 @nextui-org/use-theme hook 來切換主題。
安裝 @nextui-org/use-theme
在您的專案中安裝 @nextui-org/use-theme。
將目前的主題新增至主元素
新增主題切換器
將主題切換器新增至您的應用程式。
注意：您可以使用任何您想要的主題名稱，但請確保它存在於您的
tailwind.config.js檔案中。請參閱 建立主題 以取得更多詳細資訊。
