feat(dark mode): Started to do the base code for a dark mode

.gitignore

@@ -39,3 +39,5 @@ next-env.d.ts
 
 # Local Netlify folder
 .netlify
+
+certificates

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -16,7 +16,7 @@
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
     "gray-matter": "^4.0.3",
-    "next": "14.2.6",
+    "next": "^14.2.10",
     "next-compose-plugins": "^2.2.1",
     "next-mdx-remote": "^5.0.0",
     "react": "^18",

src/app/components/dark-mode.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function DarkMode(): JSX.Element {
+    const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+
+    useEffect(() => {
+        const darkModePreference = localStorage.getItem("dark-mode");
+        if (darkModePreference !== null) {
+            setIsDarkMode(darkModePreference === "true");
+        } else {
+            setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (isDarkMode) {
+            document.body.classList.remove("light");
+            document.body.classList.add("dark");
+        } else {
+            document.body.classList.remove("dark");
+            document.body.classList.add("light");
+        }
+    }, [isDarkMode]);
+
+    function handleDarkMode() {
+        const newDarkMode = !isDarkMode;
+        setIsDarkMode(newDarkMode);
+        localStorage.setItem("dark-mode", newDarkMode.toString());
+    }
+
+    return (
+        <button className="darkModeToggle" onClick={handleDarkMode}>{!isDarkMode ? "☀️" : "🌙"}</button>
+    );
+}

src/app/globals.css

@@ -1,8 +1,24 @@
+/* TODO: Set this with the correct colors to use */
+:root {
+    /* Light theme variables */
+    --color-background-light: #F2F2F2;
+    /* Dark theme variables */
+    --color-background-dark: #1f2023;
+}
+
+.light {
+    --color-background: var(--color-background-light);
+}
+
+.dark {
+    --color-background: var(--color-background-dark);
+}
+
 * {
     margin: 0;
     padding: 0;
     color: #333333;
-    background-color: #F2F2F2;
+    background-color: var(--color-background);
     overflow-x: hidden;
 }
 

src/app/projects/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import styles from "./projects.module.css";
 import { useState } from "react";
+import DarkMode from "../components/dark-mode";
 
 type Project = {
     name: string,
@@ -54,6 +55,8 @@ export default function Projects(): JSX.Element {
                     </button>
                 </div>
             ))}
+
+            <DarkMode />
         </div>
     );
 }