+
+
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..8bea430
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return {children}
+}
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
new file mode 100644
index 0000000..81fe5f7
--- /dev/null
+++ b/src/components/DarkModeToggle.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export default function DarkModeToggle() {
+ const { theme, setTheme } = useTheme()
+ const [mounted, setMounted] = useState(false)
+
+ useEffect(() => {
+ const prefersDark =
+ window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches
+ const localTheme = localStorage.getItem('theme')
+
+ setTheme(localTheme || (prefersDark ? 'dark' : 'light'))
+ setMounted(true)
+ }, [setTheme])
+
+ useEffect(() => {
+ if (mounted) {
+ localStorage.setItem('theme', theme || 'light')
+ }
+ }, [theme, mounted])
+
+ const toggleTheme = () => {
+ setTheme(theme === 'dark' ? 'light' : 'dark')
+ }
+
+ return (
+
-
+
+
Welcome to My Next.js Boilerplate!
+
+
+
+
+
+ )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a6f0126..82154c0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,5 @@
+import forms from '@tailwindcss/forms'
+
import type { Config } from 'tailwindcss'
const config: Config = {
@@ -6,7 +8,8 @@ const config: Config = {
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
+ darkMode: 'class',
theme: {},
- plugins: [],
+ plugins: [forms],
}
export default config