feat: 🎸 add lightmode

src/components/CustomLayout.tsx

@@ -10,19 +10,19 @@ type Props = {
 const CustomLayout = ({ children, withMenu }: Props) => {
     return (
         <>
-            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid.svg")] opacity-30 z-0'></div>
-            <div className='w-full text-white m-auto min-h-screen flex flex-col bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black'>
+            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid-dark.svg")] visible dark:hidden opacity-30 dark:z-0 '></div>
+            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid.svg")] hidden dark:visible opacity-30 z-0'></div>
+            <div className='w-full text-black dark:text-white m-auto min-h-screen flex flex-col bg-white dark:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] dark:from-gray-700 dark:via-gray-900 dark:to-black'>
                 <div className='relative'>
-                    {/* Corrected the class name for "md:hidden" */}
                     <div className='md:hidden'><MenuMobile /></div>
-                    {/* Corrected the class name for "md:visible" */}
                     <div className='hidden md:block'><Menu /></div>
                 </div>
                 <div className='w-5/6 md:w-2/3 m-auto relative h-full '>
                     {children}
                 </div>
             </div>
         </>
+
     );
 };
 

src/components/Menu/Menu.tsx

@@ -1,54 +1,54 @@
-import { neonBlanc, neonPurple } from '@/components/neonStyles'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
+import { neonBlanc, neonPurple, neonBlack, neonBlue } from '@/components/neonStyles';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
 
-type Props = {}
+type Props = {};
 
 export default function Menu({ }: Props) {
     const router = useRouter();
     return (
-        <div className=' w-2/3 m-auto flex py-8'>
+        <div className='w-2/3 m-auto flex py-8 text-white'>
             <Link href='/about' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/about' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/about' ? 'neon-blue' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/about' ? neonBlue : {}}
                 >
                     About
                 </a>
             </Link>
             <Link href='/posters' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/posters' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/posters' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/posters' ? neonPurple : {}}
                 >
                     Posters
                 </a>
             </Link>
             <Link href='/' legacyBehavior passHref>
                 <a
-                    className={`text-3xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/' ? neonPurple : neonBlanc}
+                    className={`text-3xl font-bold relative m-auto ${router.pathname === '/' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/' ? neonPurple : {}}
                 >
                     Matthys.Dev
                 </a>
             </Link>
             <Link href='/video' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/video' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/video' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/video' ? neonPurple : {}}
                 >
                     Video
                 </a>
             </Link>
             <Link href='/contact' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/contact' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/contact' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/contact' ? neonPurple : {}}
                 >
                     Contact
                 </a>
             </Link>
         </div>
-    )
-}
+    );
+}

src/components/neonStyles.ts

@@ -7,6 +7,9 @@ export const neonBlue = {
 export const neonPurple = {
   textShadow: '1px 1px 2px purple, 0 0 1em purple, 0 0 0.2em purple',
 };
+export const neonBlack = {
+  textShadow: '1px 1px 2px black, 0 0 1em black, 0 0 0.2em black',
+};
 
 export const neonBlanc = {
   textShadow: '0.3px 0.3px 0.3px white, 0 0 0.3em white, 0 0 0.05em white',

src/pages/posters.tsx

@@ -16,12 +16,12 @@ export default function posters({ }: Props) {
     return (
         <CustomLayout withMenu>
             <Head>
-                <title>Matthys.dev | Posters</title> {/* Setting the title metadata */}
+                <title>Matthys.dev | Posters</title>
             </Head>
             <main className="relative flex flex-col items-center p-0 md:p-12 md:my-8">
                 <div className='w-screen my-auto'>
                     <div className='flex flex-col md:flex-row w-5/6 md:w-3/4 m-auto '>
-                        <div className='w-5/6 md:w-2/5 text-left mx-0 md:mx-24'>
+                        <div className='w-5/6 md:w-2/5 text-left mx-0 md:mx-24 text-black dark:text-white'>
                             <h1 className="text-4xl font-bold m-auto my-12">
                                 <div style={neonBlanc}>Human animals collection</div>
                             </h1>

tailwind.config.ts

@@ -10,11 +10,25 @@ const config: Config = {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      // Optionally extend other theme properties here
     },
   },
-  plugins: [],
+  plugins: [
+    // Define a custom plugin for the neonBlack text shadow
+    function ({ addUtilities }: any) {
+      const newUtilities = {
+        '.neon-black': {
+          textShadow: '1px 1px 1px black, 0 0 1em black, 0 0 0.1em black',
+        },
+        '.neon-white': {
+          textShadow: '0.3px 0.3px 0.3px white, 0 0 0.3em white, 0 0 0.05em white',
+        }
+      };
+      addUtilities(newUtilities, ['responsive', 'hover']);
+    },
+  ],
 }
+
 export default config