feat(theme) add ThemeSwitcher.tsx

app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.tsx

@@ -1,22 +1,28 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: [ 'latin' ] });
 
 export const metadata: Metadata = {
-  title: "Lumither's site",
-  description: "a small corner on internet",
+    title: 'Lumither\'s site',
+    description: 'a small corner on internet'
 };
 
 export default function RootLayout({
-  children,
+    children
 }: Readonly<{
     children: React.ReactNode;
 }>) {
     return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+        <html lang="en" suppressHydrationWarning>
+        <body className={ inter.className }>
+        <NextThemesProvider attribute="class" defaultTheme="dark">
+            { children }
+        </NextThemesProvider>
+        </body>
         </html>
     );
 }

app/page.tsx

@@ -1,7 +1,9 @@
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+
 export default function Home() {
     return (
         <main>
-
+            <ThemeSwitcher />
         </main>
     );
 }

app/providers.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { NextUIProvider } from '@nextui-org/react';
+import React from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <NextUIProvider>
+            { children }
+        </NextUIProvider>
+    );
+}

components/ThemeSwitcher.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { Button } from '@nextui-org/react';
+
+function ThemeSwitcher() {
+    const [ mounted, setMounted ] = useState(false);
+    const { theme, setTheme, themes } = useTheme();
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <div>
+            <Button onClick={ () => {
+                setTheme('light');
+            } }>Light Mode</Button>
+            <Button onClick={ () => {
+                setTheme('dark');
+            } }>Dark Mode</Button>
+        </div>
+    );
+}
+
+export default ThemeSwitcher;

package.json

@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nextui-org/react": "^2.3.5",
+    "framer-motion": "^11.1.7",
+    "next": "14.2.2",
+    "next-themes": "^0.3.0",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.2"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "typescript": "^5",

tailwind.config.ts

@@ -1,20 +1,33 @@
-import type { Config } from "tailwindcss";
+import { nextui } from '@nextui-org/react';
+
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
     content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+        './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
     ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+    // theme: {
+    //     extend: {}
+    // },
+    darkMode: 'class',
+    plugins: [ nextui(
+        {
+            // defaultTheme: 'dark',
+            defaultExtendTheme: 'light',
+            themes: {
+                'light': {
+                    layout: {},
+                    colors: {}
                 },
-    },
-  },
-  plugins: [],
+                'dark': {
+                    layout: {},
+                    colors: {}
+                }
+            }
+        }
+    ) ]
 };
 export default config;