fix darkmode theme

Neofox · Jun 29, 2023 · cf9956a · cf9956a
1 parent 1e7b7f8
commit cf9956a
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 59 deletions.
diff --git a/app/Providers.tsx b/app/Providers.tsx
@@ -0,0 +1,12 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <ThemeProvider enableSystem={true} attribute="class">
+            {children}
+        </ThemeProvider>
+    );
+};
+
+export default Providers;
diff --git a/app/globals.css b/app/globals.css
@@ -3,25 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    color: #213547;
+    background-color: #ffffff;
   }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+}
diff --git a/app/head.tsx b/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+    return (
+        <>
+            <title>Jerome Schaeffer Resume</title>
+            <meta content="width=device-width, initial-scale=1" name="viewport" />
+            <link rel="icon" href="/favicon.ico" />
+        </>
+    );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,21 +1,25 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+"use client";
 
-const inter = Inter({ subsets: ['latin'] })
+import "./globals.css";
+import { Inter } from "next/font/google";
+import Head from "./head";
+import Providers from "./Providers";
 
-export const metadata = {
-  title: 'Jerome Schaeffer',
-  description: 'Resume of Jerome Schaeffer',
-}
+const inter = Inter({ subsets: ["latin"] });
+
+// export const metadata = {
+//     title: "Jerome Schaeffer",
+//     description: "Resume of Jerome Schaeffer",
+// };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en" className="h-full scroll-smooth" suppressHydrationWarning>
+            <Head />
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+            <body className={inter.className}>
+                <Providers>{children}</Providers>
+            </body>
+        </html>
+    );
 }
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -12,7 +12,7 @@ const Header: React.FC = () => (
                 width={200}
                 height={200}
             />
-            <div className="mt-10 self-center text-3xl">Jerome Schaeffer</div>
+            <div className=" mt-10 self-center text-3xl text-gray-900 dark:text-white">Jerome Schaeffer</div>
             <div className="mt-2 self-center text-xl text-gray-400 drop-shadow-sm">Senior Web Developer</div>
 
             <div className="mt-8 self-center">

diff --git a/components/Information.tsx b/components/Information.tsx
@@ -22,7 +22,7 @@ const Information: React.FC = () => (
                 })}
                 {informations.map((info, i) => {
                     return (
-                        <div key={i} className="w-36 py-2 font-semibold">
+                        <div key={i} className=" text-gray-900 dark:text-white w-36 py-2 font-semibold">
                             {info.value}
                         </div>
                     );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Availability from "./Utils/Availability";
 import { MdModeNight, MdLightMode } from "react-icons/md";
+import DarkModeButton from "./Utils/DarkModeButton";
 
 const languages: { flag: string; name: string; code: string }[] = [
     { flag: "🇺🇸", name: "English", code: "en" },
@@ -31,12 +32,7 @@ const Navbar: React.FC = () => {
                             <span className="ml-2 hidden md:inline">{languages[0].name}</span>
                         </button>
 
-                        <button
-                            type="button"
-                            className="mr-2 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-                        >
-                            <MdModeNight className="h-10 w-10 rounded-full border p-1" />
-                        </button>
+                        <DarkModeButton />
                     </div>
                 </div>
             </nav>

diff --git a/components/Utils/Block.tsx b/components/Utils/Block.tsx
@@ -1,6 +1,6 @@
 const Block: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     return (
-        <div className="flex flex-col rounded-2xl bg-transparent p-5 shadow-lg backdrop-blur-md transition-all hover:shadow-2xl md:h-full md:p-6 xl:p-8 2xl:p-12">
+        <div className="text-gray-900 dark:text-white flex flex-col rounded-2xl bg-transparent p-5 shadow-lg backdrop-blur-md transition-all hover:shadow-2xl md:h-full md:p-6 xl:p-8 2xl:p-12">
             {children}
         </div>
     );

diff --git a/components/Utils/DarkModeButton.tsx b/components/Utils/DarkModeButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { MdLightMode, MdModeNight } from "react-icons/md";
+
+const DarkModeButton: React.FC = () => {
+    const { systemTheme, theme, setTheme } = useTheme();
+    const currentTheme = theme === "system" ? systemTheme : theme;
+
+    return (
+        <button
+            type="button"
+            onClick={() => (currentTheme == "dark" ? setTheme("light") : setTheme("dark"))}
+            className="mr-2 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        >
+            {currentTheme == "dark" ? (
+                <MdLightMode className="h-10 w-10 rounded-full border p-1" />
+            ) : (
+                <MdModeNight className="h-10 w-10 rounded-full border p-1" />
+            )}
+        </button>
+    );
+};
+
+export default DarkModeButton;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
+    darkMode: "class",
+    content: [
+        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
     },
-  },
-  plugins: [],
-}
+    plugins: [],
+};
diff --git a/types/Education.ts b/types/Education.ts
@@ -0,0 +1,7 @@
+export type EducationType = {
+    begin: Date;
+    end?: Date;
+    name: string;
+    schoolName: string;
+    description?: string;
+}
diff --git a/types/Experience.ts b/types/Experience.ts
@@ -0,0 +1,8 @@
+export type ExperienceType = {
+    begin: Date;
+    end?: Date;
+    jobTitle: string;
+    companyName: string;
+    location: string;
+    description?: string;
+}
diff --git a/types/Project.ts b/types/Project.ts
@@ -0,0 +1,8 @@
+export type ProjectType = {
+    begin: Date;
+    name: string;
+    type: string;
+    description?: string;
+    link: string,
+    technologies: string[]
+}