Handle Dark Mode Styling for Header Component

app/layout.tsx

@@ -28,14 +28,14 @@ export default function RootLayout({
         <ThemeProvider attribute="class">
           <Header />
 
-          <main className="w-full min-h-[calc(100vh-144px)] mt-36 bg-slate-50">
+          <main className="w-full min-h-[calc(100vh-136px)] md:min-h-[calc(100vh-144px)] mt-[136px] md:mt-36 bg-slate-50 dark:bg-neutral-900">
             <div className="w-full max-w-[1432px] sm:max-w-[1464px] mx-auto h-full px-4 sm:px-8 py-8 sm:py-16">
               {children}
             </div>
           </main>
           <div
             id="modal"
-            className="flex items-center justify-center w-screen h-screen fixed top-0 left-[50%] translate-x-[-50%] z-10 overflow-y-hidden pointer-events-none"
+            className="flex items-center justify-center w-screen h-screen fixed top-0 left-0 z-10 overflow-y-hidden pointer-events-none"
           />
 
           <Footer />

components/button.tsx

@@ -26,8 +26,9 @@ export const Button = ({
 }: buttonProps) => {
   const variantCls = {
     primary: 'text-white bg-primary xs:hover:opacity-75',
-    secondary: 'text-black bg-zinc-100 xs:hover:opacity-75',
-    ghost: 'text-black hover:bg-zinc-100 xs:hover:opacity-75',
+    secondary: 'text-black bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
+    ghost:
+      'text-black dark:text-gray-200 hover:bg-zinc-100 dark:hover:bg-white/10 xs:hover:opacity-75',
     outline:
       'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
   }[variant]

components/footer.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Image from 'next/image'
 
 import { ToggleThemeButton } from '@/components/toggle-theme-button'
 

components/header.tsx

@@ -1,23 +1,18 @@
 import Link from 'next/link'
-import Image from 'next/image'
 
 import { Searchbar } from '@/components/search-bar'
 import { Button } from '@/components/button'
 import { Navbar } from '@/components/navbar'
 import { MobileNav } from '@/components/mobile-nav'
 
+import Logo from '@/public/logo.svg'
+
 export const Header = () => (
-  <header className="w-full h-36 fixed top-0 shadow-header px-4 sm:px-6 pt-4 sm:pt-6 bg-white z-10">
+  <header className="w-full h-[136px] md:h-36 fixed top-0 shadow-header dark:shadow-header-dark px-4 lg:px-6 pt-4 sm:pt-6 bg-white dark:bg-zinc-900 z-10">
     <div className="w-full max-w-[1400px] mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
       <div className="w-full flex items-center justify-between gap-2">
-        <Link href="/" className="overflow-hidden">
-          <Image
-            src="/logo.svg"
-            alt="ZinTools Logo"
-            width={138}
-            height={38}
-            className="w-[120px] sm:w-[130px] md:w-[138px] h-auto"
-          />
+        <Link href="/">
+          <Logo className="w-[120px] sm:w-[130px] md:w-[138px] h-[38px] fill-black dark:fill-white" />
         </Link>
 
         <Searchbar className="hidden sm:flex" />

components/mobile-nav.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import clsx from 'clsx'
 
 import { Button } from '@/components/button'
 import { Modal } from '@/components//modal/modal'
@@ -19,19 +20,21 @@ export const MobileNav = () => {
       <Button
         icon={isOpen ? <CrossIcon /> : <HamBurgerIcon />}
         onClick={() => setIsOpen(!isOpen)}
-        className="w-12 h-12 rounded-md !px-1"
-        style={{ background: isOpen ? '#000' : '#f4f4f5' }}
+        className={clsx(
+          'w-12 h-12 rounded-md !px-1',
+          isOpen ? '!bg-black dark:!bg-white/20' : '!bg-[#f4f4f5]'
+        )}
       />
 
       <Modal isOpen={isOpen} close={() => setIsOpen(false)}>
-        <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white pointer-events-auto border-t border-zinc-100 border animation-slide-from-right overflow-auto">
+        <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white dark:bg-zinc-900 pointer-events-auto border-t border-t-zinc-100 dark:border-t-zinc-700 overflow-y-auto">
           <nav className="relative w-full">
             <ul className="w-full flex flex-col items-end justify-center gap-2 p-4 pb-24">
               {MOBILE_NAV_ITEMS.map((navItem, i) => (
                 <NavDropdown key={i} {...navItem} />
               ))}
             </ul>
-            <div className="fixed -bottom-2 left-0 w-full h-32 bg-gradient-to-b from-white/75 to-white pointer-events-none blur-[6px]" />
+            <div className="fixed -bottom-2 left-0 w-full h-32 bg-gradient-to-b from-white/75 dark:from-zinc-900/75 to-white dark:to-zinc-900 pointer-events-none blur-[6px]" />
           </nav>
         </div>
       </Modal>

components/nav-dropdown.tsx

@@ -24,14 +24,14 @@ export const NavDropdown = ({
     <li className="group relative flex items-center justify-center">
       <Link
         href={link}
-        className="relative text-black text-base sm:text-sm font-medium whitespace-nowrap px-3 py-3.5 after:absolute after:bottom-0 after:left-0 after:content-none::after after:w-full after:h-[2px] after:bg-primary after:hidden group-hover:after:block"
+        className="relative text-black dark:text-gray-200 text-base sm:text-sm font-medium whitespace-nowrap px-2 md:px-3 py-3.5 after:absolute after:bottom-0 after:left-0 after:content-none::after after:w-full after:h-[2px] after:bg-primary dark:after:bg-white after:hidden group-hover:after:block"
       >
         {title}
       </Link>
 
       <div
         className={clsx(
-          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white rounded-b-md shadow-md border border-zinc-1',
+          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-black rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
           positionCls
         )}
       >
@@ -39,7 +39,7 @@ export const NavDropdown = ({
           <Link
             key={i}
             href={opLink}
-            className="w-full p-2 text-sm text-black hover:bg-zinc-100 rounded-md transition-colors duration-200"
+            className="w-full p-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/20 rounded-md transition-colors duration-200"
           >
             {label}
           </Link>

components/search-bar.tsx

@@ -8,7 +8,7 @@ interface searchbarProps {
 export const Searchbar = ({ className }: searchbarProps) => (
   <div
     className={clsx(
-      'flex-1 sm:max-w-[280px] md:max-w-[400px] lg:max-w-[500px] flex items-center justify-between gap-x-4 md:gap-x-6 px-4 sm:px-6 py-1.5 bg-zinc-100 rounded-3xl',
+      'flex-1 sm:max-w-[280px] md:max-w-[400px] lg:max-w-[500px] flex items-center justify-between gap-x-4 md:gap-x-6 px-4 sm:px-6 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-3xl',
       className
     )}
   >
@@ -17,9 +17,9 @@ export const Searchbar = ({ className }: searchbarProps) => (
       placeholder="Search for Movies, TV Shows, Themes & Cast"
       className="w-full flex flex-1 outline-none bg-transparent text-black text-base"
     />
-    <div className="flex items-center justify-end gap-x-2 md:gap-x-6">
+    <div className="flex items-center justify-end gap-x-1 xs:gap-x-2 md:gap-x-3 lg:gap-x-5 xl:gap-x-6">
       <div className="w-[1px] h-9 bg-gray-400/50 cursor-default" />
-      <div className="w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full cursor-pointer">
+      <div className="w-8 h-8 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-200/10 rounded-full cursor-pointer">
         <Image
           alt=""
           src="/search.svg"

tailwind.config.ts

@@ -14,6 +14,7 @@ const config: Config = {
       },
       boxShadow: {
         header: '0px 4px 12px 0px rgba(189, 189, 189, 0.25)',
+        'header-dark': '0px 1px 1px 0px rgba(189, 189, 189, 0.25)',
         card: '0px 8px 16px 0px rgba(0, 0, 0, 0.10)',
       },
       screens: {