feat: add support for themes

AlanMorel · Nov 10, 2023 · f3c7f82 · f3c7f82
1 parent c7e9def
commit f3c7f82
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 3 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import "@/src/globals.css";
 import Analytics from "@/src/helpers/client/Analytics";
+import Providers from "@/src/helpers/client/Providers";
 import { withMetadata } from "@/src/helpers/server/MetadataHelper";
 import { Inter } from "next/font/google";
 import { ReactElement, ReactNode } from "react";
@@ -19,9 +20,11 @@ export default async function RootLayout(props: Props): Promise<ReactElement> {
     const { children } = props;
 
     return (
-        <html lang="en" className={inter.variable} data-theme="light">
-            <body className="m-0 bg-slate-50 font-text text-black">{children}</body>
-            <Analytics />
+        <html lang="en" className={inter.variable} suppressHydrationWarning>
+            <body className="m-0 bg-slate-50 font-text text-black">
+                <Providers>{children}</Providers>
+                <Analytics />
+            </body>
         </html>
     );
 }

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
         "lucide-react": "^0.291.0",
         "mime-types": "^2.1.35",
         "next": "^14.0.0",
+        "next-themes": "^0.2.1",
         "nextjs-google-analytics": "^2.3.3",
         "pino": "^8.16.1",
         "pino-pretty": "^10.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Contacts.tsx b/src/components/Contacts.tsx
@@ -3,6 +3,7 @@ import GitHubIcon from "@/src/components/icons/GitHubIcon";
 import InstagramIcon from "@/src/components/icons/InstagramIcon";
 import LinkedInIcon from "@/src/components/icons/LinkedInIcon";
 import XIcon from "@/src/components/icons/XIcon";
+import ThemeSwitcher from "@/src/components/other/ThemeSwitcher";
 import { ReactElement } from "react";
 
 const contacts = [
@@ -51,6 +52,9 @@ export default function Contacts(): ReactElement {
                     </a>
                 </li>
             ))}
+            <li className="mx-4 mb-8">
+                <ThemeSwitcher />
+            </li>
         </ul>
     );
 }
diff --git a/src/components/other/ThemeSwitcher.tsx b/src/components/other/ThemeSwitcher.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { Laptop2Icon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ReactElement, useEffect, useState } from "react";
+
+export default function ThemeSwitcher(): ReactElement {
+    const [mounted, setMounted] = useState(false);
+    const { theme, setTheme } = useTheme();
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    function getIcon(): ReactElement {
+        if (!mounted || theme === "light") {
+            return <SunIcon className="h-10 w-10" onClick={(): void => setTheme("dark")} />;
+        } else if (theme === "system") {
+            return <Laptop2Icon className="h-10 w-10" onClick={(): void => setTheme("light")} />;
+        } else if (theme === "dark") {
+            return <MoonIcon className="h-10 w-10" onClick={(): void => setTheme("system")} />;
+        }
+
+        return <></>;
+    }
+
+    return <div className="cursor-pointer text-slate-400 transition hover:text-slate-600">{getIcon()}</div>;
+}
diff --git a/src/helpers/client/Providers.tsx b/src/helpers/client/Providers.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { ReactElement, ReactNode } from "react";
+
+interface Props {
+    children: ReactNode;
+}
+
+export default function Providers(props: Props): ReactElement {
+    const { children } = props;
+
+    return (
+        <ThemeProvider enableColorScheme={false} defaultTheme="light">
+            {children}
+        </ThemeProvider>
+    );
+}