Adjust Element Colors

components/header.tsx

@@ -8,7 +8,7 @@ import { MobileNav } from '@/components/mobile-nav'
 import Logo from '@/public/logo.svg'
 
 export const Header = () => (
-  <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">
+  <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-midnight-slate 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="/">

components/nav-dropdown.tsx

@@ -31,7 +31,7 @@ export const NavDropdown = ({
 
       <div
         className={clsx(
-          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-[#0f1214] rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
+          'hidden sm:group-hover:flex absolute top-12 flex-col min-w-[220px] gap-2 p-4 bg-white dark:bg-midnight-slate rounded-b-md shadow-md dark:shadow-none border border-zinc-100 dark:border-zinc-400/20',
           positionCls
         )}
       >

components/search-bar.tsx

@@ -15,7 +15,7 @@ export const Searchbar = ({ className }: searchbarProps) => (
     <input
       type="search"
       placeholder="Search for Movies, TV Shows, Themes & Cast"
-      className="w-full flex flex-1 outline-none bg-transparent text-black text-base"
+      className="w-full flex flex-1 outline-none bg-transparent text-black dark:text-white text-base"
     />
     <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" />

components/section-wrapper.tsx

@@ -15,7 +15,7 @@ export const SectionWrapper = ({
   children,
   childrenClass,
 }: sectionWraperProps) => (
-  <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-[#1e2023] rounded-3xl">
+  <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-midnight-slate rounded-3xl">
     <div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
       <h1
         className={'text-black dark:text-white text-xl sm:text-3xl font-bold'}

tailwind.config.ts

@@ -11,10 +11,11 @@ const config: Config = {
     extend: {
       colors: {
         primary: '#616DF4',
+        'midnight-slate': '#14181f',
       },
       boxShadow: {
         header: '0px 4px 12px 0px rgba(189, 189, 189, 0.25)',
-        'header-dark': '0px 1px 1px 0px rgba(189, 189, 189, 0.25)',
+        'header-dark': '0px 1px 1px 0px rgba(189, 189, 189, 0.20)',
         card: '0px 8px 16px 0px rgba(0, 0, 0, 0.10)',
       },
       screens: {