Dark mode improvements

src/lib/components/CourseLandingPage/components/Editor/Container.svelte

@@ -9,7 +9,7 @@
 
 <section class="root z-10">
   {#if show}
-    <div class="relative h-full bg-white dark:bg-gray-800">
+    <div class="relative h-full bg-white dark:bg-black">
       <slot />
     </div>
   {/if}

src/lib/components/CourseLandingPage/components/Editor/index.svelte

@@ -121,7 +121,7 @@
 <aside
   class={`${
     show ? '-translate-x-[100%] fixed z-[9999]' : 'translate-x-0 fixed z-[9999]'
-  } left-0 transition w-[280px] min-w-[280px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } left-0 transition w-[280px] min-w-[280px] bg-gray-100 dark:bg-black h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="toggler rounded-full shadow-lg absolute">
     <IconButton

src/lib/components/CourseLandingPage/index.svelte

@@ -91,7 +91,7 @@
   <title>{get(courseData, 'title', '')}</title>
 </svelte:head>
 
-<div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
+<div class="w-full bg-white dark:bg-black flex flex-col items-center">
   <!-- Header Section -->
   <header id="header" class="banner w-full flex items-center justify-center p-">
     <div class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row">
@@ -160,7 +160,7 @@
   </header>
   <PricingSection className="md:hidden" {courseData} {editMode} bind:startCoursePayment />
   <!-- Body -->
-  <div class="bg-white dark:bg-gray-800 w-full">
+  <div class="bg-white dark:bg-black w-full">
     <div
       class="py-8 lg:w-11/12 w-full m-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between max-w-[1200px]"
     >