From 70326f22810e9cffe79c54e87e7e98e4375f7437 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 16 Sep 2023 22:44:20 +0100
Subject: [PATCH] Dark mode improvements

---
 src/error.html                                |  2 +-
 .../components/Poll/components/Poll.svelte    |  4 +-
 .../Apps/components/Poll/index.svelte         | 54 +++++++++----------
 src/lib/components/AuthUI/index.svelte        |  2 +-
 .../components/Ceritficate/Design.svelte      |  2 +-
 .../components/Lesson/AddLessonModal.svelte   |  2 +-
 .../Lesson/Exercise/MarkExerciseModal.svelte  |  2 +-
 .../components/Lesson/Exercises/index.svelte  |  2 +-
 .../Course/components/Navigation/index.svelte |  2 +-
 .../components/Editor/Container.svelte        |  2 +-
 .../components/Editor/index.svelte            |  2 +-
 .../components/CourseLandingPage/index.svelte |  4 +-
 .../Courses/components/Card/Loader.svelte     |  2 +-
 src/lib/components/Dropdown/index.svelte      |  2 +-
 src/lib/components/Expandable/index.svelte    |  2 +-
 src/lib/components/Form/Select.svelte         |  2 +-
 src/lib/components/LMS/SideBar.svelte         |  2 +-
 .../components/LMS/components/Learning.svelte |  2 +-
 .../components/LMS/components/Student.svelte  |  2 +-
 src/lib/components/Modal/index.svelte         |  2 +-
 .../components/Org/Community/Loader.svelte    |  2 +-
 src/lib/components/Org/Community/index.svelte |  2 +-
 src/lib/components/Org/Quiz/Loader.svelte     |  2 +-
 .../Org/Quiz/Play/ConnectToPlay.svelte        | 11 +---
 .../components/Org/Quiz/Play/Container.svelte |  2 +-
 src/lib/components/Org/Quiz/QuizCard.svelte   |  2 +-
 .../components/Org/Quiz/QuizQuestion.svelte   |  2 +-
 src/lib/components/Org/SideBar.svelte         |  2 +-
 src/lib/components/PageBody/index.svelte      |  2 +-
 src/lib/components/PageNav/index.svelte       |  4 +-
 .../components/QuestionContainer/index.svelte |  2 +-
 src/lib/utils/constants/reusableClass.js      |  4 +-
 src/routes/+error.svelte                      |  2 +-
 src/routes/+layout.svelte                     |  6 +--
 src/routes/+page.svelte                       |  2 +-
 src/routes/courses/[id]/lessons/+page.svelte  |  2 +-
 .../lessons/[...lessonParams]/+page.svelte    |  2 +-
 .../courses/[id]/submissions/+page.svelte     |  4 +-
 src/routes/dashboard/+page.svelte             |  2 +-
 src/routes/lms/+page.svelte                   |  2 +-
 src/routes/lms/exercises/+page.svelte         |  2 +-
 src/routes/onboarding/+page.svelte            |  2 +-
 .../org/[slug]/quiz/[slug]/+page.svelte       |  6 +--
 43 files changed, 77 insertions(+), 88 deletions(-)

diff --git a/src/error.html b/src/error.html
index d6a9465a..a0c984f6 100644
--- a/src/error.html
+++ b/src/error.html
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-screen w-screen py-10 dark:bg-gray-800">
+  class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-screen w-screen py-10 dark:bg-black">
   <div class="md:w-full p-2 lg:w-2/4">
     <h2 class="w-full text-lg lg:text-3xl font-medium lg:font-normal">
       Something unexpected occured.
diff --git a/src/lib/components/Apps/components/Poll/components/Poll.svelte b/src/lib/components/Apps/components/Poll/components/Poll.svelte
index 0cf7b851..9929de8f 100644
--- a/src/lib/components/Apps/components/Poll/components/Poll.svelte
+++ b/src/lib/components/Apps/components/Poll/components/Poll.svelte
@@ -46,7 +46,7 @@
   }
 </script>
 
-<div class="p-4 bg-white dark:bg-gray-800 border-2 rounded-md mb-3">
+<div class="p-4 bg-white dark:bg-black border-2 rounded-md mb-3">
   {#if selectedOptionToView}
     <div>
       <div class="flex items-center mb-5">
@@ -140,7 +140,7 @@
     {:else}
       {#each poll.options as option, index}
         <button
-          class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
+          class="bg-white dark:bg-black rounded-md border-2 border-gray-500 {didUserSelect(
             option
           ) &&
             'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"
diff --git a/src/lib/components/Apps/components/Poll/index.svelte b/src/lib/components/Apps/components/Poll/index.svelte
index 8062e5cc..ebcb3cf3 100644
--- a/src/lib/components/Apps/components/Poll/index.svelte
+++ b/src/lib/components/Apps/components/Poll/index.svelte
@@ -13,33 +13,33 @@
     {
       label: 'Rich Harris',
       value: 'rich-harris',
-      avatar: 'https://i.pravatar.cc/150?img=1',
+      avatar: 'https://i.pravatar.cc/150?img=1'
     },
     {
       label: 'Linus Torvalds',
       value: 'linus-torvalds',
-      avatar: 'https://i.pravatar.cc/150?img=2',
+      avatar: 'https://i.pravatar.cc/150?img=2'
     },
     {
       label: 'Elon Musk',
       value: 'elon-musk',
-      avatar: 'https://i.pravatar.cc/150?img=3',
+      avatar: 'https://i.pravatar.cc/150?img=3'
     },
     {
       label: 'Satoshi Nakamoto',
       value: 'satoshi-nakamoto',
-      avatar: 'https://i.pravatar.cc/150?img=4',
-    },
+      avatar: 'https://i.pravatar.cc/150?img=4'
+    }
   ];
   const tabs = [
     {
       label: 'My polls',
-      value: 0,
+      value: 0
     },
     {
       label: 'Other polls',
-      value: 1,
-    },
+      value: 1
+    }
   ];
 
   let selectedTab = 0;
@@ -54,7 +54,7 @@
       options: [
         {
           label: 'Dan Abrahmov',
-          selectedBy: [],
+          selectedBy: []
         },
         {
           label: 'Evan You',
@@ -62,25 +62,25 @@
             {
               label: 'Rich Harris',
               value: 'rich-harris',
-              avatar: 'https://i.pravatar.cc/150?img=1',
+              avatar: 'https://i.pravatar.cc/150?img=1'
             },
             {
               label: 'Linus Torvalds',
               value: 'linus-torvalds',
-              avatar: 'https://i.pravatar.cc/150?img=2',
-            },
-          ],
+              avatar: 'https://i.pravatar.cc/150?img=2'
+            }
+          ]
         },
         {
           label: 'Rich Harris',
-          selectedBy: [],
+          selectedBy: []
         },
         {
           label: 'Yehuda Katz',
-          selectedBy: [],
-        },
-      ],
-    },
+          selectedBy: []
+        }
+      ]
+    }
   ];
 
   function handleCreatePoll() {
@@ -92,9 +92,9 @@
       polls = [
         {
           ...poll,
-          author: users.find((u) => u.value === userId),
+          author: users.find((u) => u.value === userId)
         },
-        ...polls,
+        ...polls
       ];
     }
 
@@ -122,16 +122,12 @@
                   // Select if already selected
                   option.selectedBy = [
                     ...option.selectedBy,
-                    users.find((user) => user.value === userId),
+                    users.find((user) => user.value === userId)
                   ];
                 }
-              } else if (
-                option.selectedBy.find((user) => user.value === userId)
-              ) {
+              } else if (option.selectedBy.find((user) => user.value === userId)) {
                 // This makes the user to select only one option
-                option.selectedBy = option.selectedBy.filter(
-                  (user) => user.value !== userId
-                );
+                option.selectedBy = option.selectedBy.filter((user) => user.value !== userId);
               }
 
               return option;
@@ -139,7 +135,7 @@
           }
 
           return poll;
-        }),
+        })
       ];
     };
   }
@@ -186,7 +182,7 @@
         {/if}
       {:else}
         <div
-          class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
+          class="bg-gray-100 dark:bg-neutral-800 border rounded-md h-60 flex items-center justify-center"
         >
           <h2 class="text-xl font-bold">No polls to display</h2>
         </div>
diff --git a/src/lib/components/AuthUI/index.svelte b/src/lib/components/AuthUI/index.svelte
index 9ddbd055..0c31ae82 100644
--- a/src/lib/components/AuthUI/index.svelte
+++ b/src/lib/components/AuthUI/index.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div class="root w-full min-h-screen flex items-center justify-center">
-  <div class="container border border-gray bg-white dark:bg-gray-800">
+  <div class="container border border-gray bg-white dark:bg-black">
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
       {#if !showOnlyContent || showLogo}
         <div class="flex flex-col items-center justify-center w-full pt-2">
diff --git a/src/lib/components/Course/components/Ceritficate/Design.svelte b/src/lib/components/Course/components/Ceritficate/Design.svelte
index da764441..df504303 100644
--- a/src/lib/components/Course/components/Ceritficate/Design.svelte
+++ b/src/lib/components/Course/components/Ceritficate/Design.svelte
@@ -99,7 +99,7 @@
       </div>
     </section>
     <section
-      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full lg:w-3/5"
+      class="bg-gray-100 dark:bg-neutral-800 flex justify-center items-center rounded-md w-full lg:w-3/5"
     >
       <div class="certificate-container flex justify-center items-center h-5/6">
         {#if $course.certificate_theme === 'professional'}
diff --git a/src/lib/components/Course/components/Lesson/AddLessonModal.svelte b/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
index a4f3b586..f3656581 100644
--- a/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
+++ b/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
@@ -60,7 +60,7 @@
   modalHeading="Add New Lesson"
 >
   <div
-    class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap items-center dark:bg-gray-700"
+    class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap items-center dark:bg-neutral-800"
   >
     <div class="mr-5">
       <TextChip
diff --git a/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte b/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
index 3dab291e..6833110c 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
@@ -108,7 +108,7 @@
     </div>
     <div class="border border-gray-300 rounded-md mt-2">
       <div
-        class="hover:bg-gray-100 dark:bg-gray-700 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
+        class="hover:bg-gray-100 dark:bg-neutral-800 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
       >
         <p class="dark:text-white font-bold text-lg">
           Details
diff --git a/src/lib/components/Course/components/Lesson/Exercises/index.svelte b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
index 5ba8b331..54ec4699 100644
--- a/src/lib/components/Course/components/Lesson/Exercises/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
@@ -157,7 +157,7 @@
     <div class="flex flex-wrap">
       {#each $lesson.exercises as exercise}
         <a
-          class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4 rounded-lg"
+          class="w-52 bg-gray-100 dark:bg-neutral-800 px-4 py-7 mr-4 mb-4 rounded-lg"
           href="{path}/{exercise.id}"
           on:click={gotoEdit}
         >
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 9f6ae582..0e507d06 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -154,7 +154,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[40]'
       : 'translate-x-0 absolute md:relative z-[40]'
-  } transition w-[350px] min-w-[350px] md:max-w-[350px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } transition w-[350px] min-w-[350px] md:max-w-[350px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
     <ul class="my-5">
diff --git a/src/lib/components/CourseLandingPage/components/Editor/Container.svelte b/src/lib/components/CourseLandingPage/components/Editor/Container.svelte
index 143192a6..bbc55c28 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/Container.svelte
+++ b/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}
diff --git a/src/lib/components/CourseLandingPage/components/Editor/index.svelte b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
index fc206efd..b4940fd7 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+++ b/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
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index 18461649..925b7e40 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/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]"
     >
diff --git a/src/lib/components/Courses/components/Card/Loader.svelte b/src/lib/components/Courses/components/Card/Loader.svelte
index 0434a186..10ea0aac 100644
--- a/src/lib/components/Courses/components/Card/Loader.svelte
+++ b/src/lib/components/Courses/components/Card/Loader.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="root w-72 border bg-gray-100 dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
+  class="root w-72 border bg-gray-100 dark:bg-black mr-4 mb-4 rounded-md transition ease-in-out relative"
 >
   <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
   <div class="p-3 pb-0">
diff --git a/src/lib/components/Dropdown/index.svelte b/src/lib/components/Dropdown/index.svelte
index 92aaeff1..21a5dd3c 100644
--- a/src/lib/components/Dropdown/index.svelte
+++ b/src/lib/components/Dropdown/index.svelte
@@ -42,7 +42,7 @@
 
   {#if open}
     <div
-      class="dropdown whitespace-nowrap bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
+      class="dropdown whitespace-nowrap bg-white dark:bg-black border border-grey rounded-lg mt-2 py-3 absolute"
     >
       {#each options as option, index}
         <button
diff --git a/src/lib/components/Expandable/index.svelte b/src/lib/components/Expandable/index.svelte
index 0ab11755..e3cc2be3 100644
--- a/src/lib/components/Expandable/index.svelte
+++ b/src/lib/components/Expandable/index.svelte
@@ -20,7 +20,7 @@
   }
 </script>
 
-<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
+<div {id} class="w-full bg-white dark:bg-black {rootClass}">
   <button
     class="w-full relative flex items-center justify-between {!disableContainerPadding && 'p-5'}"
     tabindex="0"
diff --git a/src/lib/components/Form/Select.svelte b/src/lib/components/Form/Select.svelte
index eab8b766..f534330a 100644
--- a/src/lib/components/Form/Select.svelte
+++ b/src/lib/components/Form/Select.svelte
@@ -28,7 +28,7 @@
     class:customColor={!!selectClassName}
   >
     {#each options as option}
-      <option class="bg-white dark:bg-gray-800 text-black" value={option}>
+      <option class="bg-white dark:bg-black text-black" value={option}>
         {option[labelKey]}
       </option>
     {/each}
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index b916b2b2..0db94929 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -55,7 +55,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
-  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-[calc(100vh-48px)]`}
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)]`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
diff --git a/src/lib/components/LMS/components/Learning.svelte b/src/lib/components/LMS/components/Learning.svelte
index 41d02980..bddd12fc 100644
--- a/src/lib/components/LMS/components/Learning.svelte
+++ b/src/lib/components/LMS/components/Learning.svelte
@@ -15,7 +15,7 @@
 <section class="h-full mt-10 mb-20 xl:mt-2">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
   <div
-    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
   >
     {#if courseInProgress.length > 0}
       <div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
diff --git a/src/lib/components/LMS/components/Student.svelte b/src/lib/components/LMS/components/Student.svelte
index ea177067..df33c87a 100644
--- a/src/lib/components/LMS/components/Student.svelte
+++ b/src/lib/components/LMS/components/Student.svelte
@@ -31,7 +31,7 @@
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
 
   <div
-    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 rounded w-full h-fit xl:h-[516px] p-3"
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 rounded w-full h-fit xl:h-[516px] p-3"
   >
     <div class="w-full h-fit hidden xl:flex items-center justify-center">
       <InlineCalendar bind:store {theme} />
diff --git a/src/lib/components/Modal/index.svelte b/src/lib/components/Modal/index.svelte
index 12d21f03..318232fa 100644
--- a/src/lib/components/Modal/index.svelte
+++ b/src/lib/components/Modal/index.svelte
@@ -31,7 +31,7 @@
     <div
       class="{maxWidth || 'container'} {size === 'sm'
         ? 'small'
-        : ''} bg-white dark:bg-gray-800 mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+        : ''} bg-white dark:bg-black mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
       on:click={(e) => e.stopPropagation()}
       role="presentation"
     >
diff --git a/src/lib/components/Org/Community/Loader.svelte b/src/lib/components/Org/Community/Loader.svelte
index d57ab322..1ffd356f 100644
--- a/src/lib/components/Org/Community/Loader.svelte
+++ b/src/lib/components/Org/Community/Loader.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="h-[70px] w-full border border-gray-100 dark:bg-gray-700 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
+  class="h-[70px] w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
 >
   <div class="w-10 flex justify-evenly flex-col px-1 mr-2 rounded-md">
     <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
diff --git a/src/lib/components/Org/Community/index.svelte b/src/lib/components/Org/Community/index.svelte
index fbcccaed..c0cd2576 100644
--- a/src/lib/components/Org/Community/index.svelte
+++ b/src/lib/components/Org/Community/index.svelte
@@ -62,7 +62,7 @@
 </script>
 
 <div
-  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-gray-700"
+  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
 >
   {#if isLoading}
     <CommunityLoader />
diff --git a/src/lib/components/Org/Quiz/Loader.svelte b/src/lib/components/Org/Quiz/Loader.svelte
index 77c4a1ef..b945156f 100644
--- a/src/lib/components/Org/Quiz/Loader.svelte
+++ b/src/lib/components/Org/Quiz/Loader.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="root w-full border border-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative flex p-3"
+  class="root w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 rounded-md transition ease-in-out relative flex p-3"
 >
   <SkeletonPlaceholder style="width: 20%; height: 100%;" />
   <div class="w-full mx-5 flex justify-evenly flex-col">
diff --git a/src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte b/src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte
index 932a1fda..32903a3c 100644
--- a/src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte
+++ b/src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte
@@ -32,10 +32,7 @@
     <PlayHeader startCount={true} showCountDown={true} />
   </div>
 
-  <div
-    slot="body"
-    class="w-full rounded-md bg-white dark:bg-gray-700 py-7 px-5"
-  >
+  <div slot="body" class="w-full rounded-md bg-white dark:bg-neutral-800 py-7 px-5">
     <div class="mb-3">
       <p>1. Visit</p>
       <h3>play.classroomio.com</h3>
@@ -52,10 +49,6 @@
 
   <div slot="footer" class="flex justify-center items-center">
     <p class="font-bold mr-3">Let's go</p>
-    <PrimaryButton
-      label="View Players"
-      variant={VARIANTS.OUTLINED}
-      onClick={goToPlayersStep}
-    />
+    <PrimaryButton label="View Players" variant={VARIANTS.OUTLINED} onClick={goToPlayersStep} />
   </div>
 </PlayContainer>
diff --git a/src/lib/components/Org/Quiz/Play/Container.svelte b/src/lib/components/Org/Quiz/Play/Container.svelte
index c090a260..2d6f7bd8 100644
--- a/src/lib/components/Org/Quiz/Play/Container.svelte
+++ b/src/lib/components/Org/Quiz/Play/Container.svelte
@@ -15,7 +15,7 @@
 
   {#if $$slots.footer}
     <!-- FOOTER -->
-    <div class="footer bg-white dark:bg-gray-700 py-6 px-2 m-auto">
+    <div class="footer bg-white dark:bg-neutral-800 py-6 px-2 m-auto">
       <slot name="footer" />
     </div>
   {/if}
diff --git a/src/lib/components/Org/Quiz/QuizCard.svelte b/src/lib/components/Org/Quiz/QuizCard.svelte
index 72195785..5708e521 100644
--- a/src/lib/components/Org/Quiz/QuizCard.svelte
+++ b/src/lib/components/Org/Quiz/QuizCard.svelte
@@ -56,7 +56,7 @@
 
 {#if quiz}
   <div
-    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mb-5 relative flex flex-col lg:flex-row p-3"
+    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-black mb-5 relative flex flex-col lg:flex-row p-3"
   >
     <ImageLoader
       src={themeImages[quiz.theme]?.card || themeImages.standard.card}
diff --git a/src/lib/components/Org/Quiz/QuizQuestion.svelte b/src/lib/components/Org/Quiz/QuizQuestion.svelte
index 4dc24d48..29bd1716 100644
--- a/src/lib/components/Org/Quiz/QuizQuestion.svelte
+++ b/src/lib/components/Org/Quiz/QuizQuestion.svelte
@@ -29,7 +29,7 @@
 <!-- Options -->
 <div class="flex justify-between w-full flex-wrap">
   {#each currentQuestion.options || [] as option}
-    <div class="w-2/5 bg-white dark:bg-gray-700 rounded p-5 mb-5 relative">
+    <div class="w-2/5 bg-white dark:bg-neutral-800 rounded p-5 mb-5 relative">
       <img src={optionImage[option.id]} alt={option.id} />
 
       {#if isPreview}
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index d3db0cad..e944d781 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -63,7 +63,7 @@
     $menu.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
-  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
diff --git a/src/lib/components/PageBody/index.svelte b/src/lib/components/PageBody/index.svelte
index 3b168f69..0c59961e 100644
--- a/src/lib/components/PageBody/index.svelte
+++ b/src/lib/components/PageBody/index.svelte
@@ -10,7 +10,7 @@
 <div class="root mt-4 mx-auto {width} {className} relative {padding}">
   {#if $$slots.header}
     <div
-      class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
+      class="head dark:bg-black flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
     >
       <slot name="header" />
     </div>
diff --git a/src/lib/components/PageNav/index.svelte b/src/lib/components/PageNav/index.svelte
index ad7907be..09e25ab3 100644
--- a/src/lib/components/PageNav/index.svelte
+++ b/src/lib/components/PageNav/index.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div
-  class="header dark:bg-gray-800 bg-white flex items-center justify-between {!disableSticky &&
+  class="header dark:bg-black bg-white flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >
@@ -29,7 +29,7 @@
       {#if !enterEditTitleMode}
         <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
           <h4
-            class="editable-title hover:bg-gray-100 dark:bg-gray-800 px-3 rounded-md overflow-ellipsis"
+            class="editable-title hover:bg-gray-100 dark:bg-black px-3 rounded-md overflow-ellipsis"
           >
             {title}
           </h4>
diff --git a/src/lib/components/QuestionContainer/index.svelte b/src/lib/components/QuestionContainer/index.svelte
index 00c6f28f..0c2cafb7 100644
--- a/src/lib/components/QuestionContainer/index.svelte
+++ b/src/lib/components/QuestionContainer/index.svelte
@@ -25,7 +25,7 @@
 
 <div
   bind:this={ref}
-  class="bg-white dark:bg-gray-800 border-2 {hasError
+  class="bg-white dark:bg-black border-2 {hasError
     ? 'border-red-700'
     : 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
 >
diff --git a/src/lib/utils/constants/reusableClass.js b/src/lib/utils/constants/reusableClass.js
index cc28c169..34463a94 100644
--- a/src/lib/utils/constants/reusableClass.js
+++ b/src/lib/utils/constants/reusableClass.js
@@ -1,6 +1,6 @@
 export const NavClasses = {
   active:
-    'bg-gray-200 dark:bg-gray-700 hover:dark:text-white text-black dark:text-white transition delay-150 duration-300 ease-in-out',
+    'bg-gray-200 dark:bg-neutral-800 hover:dark:text-white text-black dark:text-white transition delay-150 duration-300 ease-in-out',
   background: '',
-  item: 'hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black hover:dark:text-white rounded'
+  item: 'hover:bg-gray-200 dark:hover:bg-neutral-800 hover:text-black hover:dark:text-white rounded'
 };
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 4e24af96..60f33abc 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -17,7 +17,7 @@
 </svelte:head>
 
 <div
-  class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-full py-10 dark:bg-gray-800"
+  class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-full py-10 dark:bg-black"
 >
   <div class="md:w-full p-2 lg:w-2/4">
     <h2 class="w-full text-lg lg:text-3xl font-medium lg:font-normal">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b2eb8d41..6c6aba9e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -287,7 +287,7 @@
 {:else if data.isOrgSite && !path}
   <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
 {:else}
-  <main class="dark:bg-gray-800">
+  <main class="dark:bg-black">
     {#if $navigating && $delayedPreloading}
       <Backdrop>
         <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
@@ -315,14 +315,14 @@
           {#if !isQuizPage($page.url.pathname)}
             <OrgSideBar />
           {/if}
-          <div class="org-slot bg-white dark:bg-gray-800 w-full">
+          <div class="org-slot bg-white dark:bg-black w-full">
             <slot />
           </div>
         </div>
       {:else if isLMSPage($page.url.pathname)}
         <div class="org-root w-full flex items-center justify-between">
           <LMSSideBar />
-          <div class="org-slot bg-white dark:bg-gray-800 w-full">
+          <div class="org-slot bg-white dark:bg-black w-full">
             <slot />
           </div>
         </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 648721da..b827a648 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -90,7 +90,7 @@
   <div class="flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
+        class="box m-3 bg-white dark:bg-black rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
       >
         <h3 class="dark:text-white text-3xl">
           {#if index === 0}
diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte
index 935a76ce..1f55dbba 100644
--- a/src/routes/courses/[id]/lessons/+page.svelte
+++ b/src/routes/courses/[id]/lessons/+page.svelte
@@ -133,7 +133,7 @@
     >
       {#each $lessons as lesson (lesson.id)}
         <div
-          class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
+          class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-neutral-800"
         >
           <div class="mr-5">
             <TextChip
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index 348d4f7e..9a3f09f4 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -190,7 +190,7 @@
           <div
             class={`flex-row ${
               $apps.dropdown && $apps.open
-                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-gray-800 p-3 lg:p-0'
+                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-black p-3 lg:p-0'
                 : 'hidden'
             } lg:flex items-center`}
           >
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index 09972fa8..bdf3ff34 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -248,7 +248,7 @@
       <div class="flex items-center w-full overflow-x-scroll">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
+            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
             animate:flip={{ duration: flipDurationMs }}
           >
             <div class="flex items-center mb-2">
@@ -269,7 +269,7 @@
                 <div
                   class="border {item.isEarly
                     ? 'border-grey-700'
-                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-800 py-3 px-3"
+                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-black py-3 px-3"
                   animate:flip={{ duration: flipDurationMs }}
                 >
                   <a
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index c507e6cc..2b272091 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -123,7 +123,7 @@
   <title>Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<section class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
+<section class="root w-full py-10 bg-gray-100 dark:bg-neutral-800">
   <div class="calendar-root flex mx-2">
     {#if !$isMobile}
       <div id="calendar">
diff --git a/src/routes/lms/+page.svelte b/src/routes/lms/+page.svelte
index b09d19fc..cd9583c4 100644
--- a/src/routes/lms/+page.svelte
+++ b/src/routes/lms/+page.svelte
@@ -49,7 +49,7 @@
         <Learning />
       </div>
       <div
-        class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
+        class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
       >
         <div
           class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
diff --git a/src/routes/lms/exercises/+page.svelte b/src/routes/lms/exercises/+page.svelte
index b958fc3e..42234c42 100644
--- a/src/routes/lms/exercises/+page.svelte
+++ b/src/routes/lms/exercises/+page.svelte
@@ -161,7 +161,7 @@
     <div class="flex items-center w-full">
       {#each sections as { id, title, items, className }, idx (id)}
         <div
-          class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 mr-3 overflow-hidden"
+          class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 mr-3 overflow-hidden"
           animate:flip={{ duration: flipDurationMs }}
         >
           <div class="flex items-center mb-2 gap-2">
diff --git a/src/routes/onboarding/+page.svelte b/src/routes/onboarding/+page.svelte
index a2c06fdd..b30428f2 100644
--- a/src/routes/onboarding/+page.svelte
+++ b/src/routes/onboarding/+page.svelte
@@ -213,7 +213,7 @@
 
         <!-- Loggedin Email -->
         <div
-          class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 dark:bg-gray-700 rounded-2xl border border-gray-300"
+          class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 dark:bg-neutral-800 rounded-2xl border border-gray-300"
         >
           <UserProfileIcon />
           <p class="dark:text-white text-sm ml-2">{$profile.email}</p>
diff --git a/src/routes/org/[slug]/quiz/[slug]/+page.svelte b/src/routes/org/[slug]/quiz/[slug]/+page.svelte
index 088c378a..63fb7a5b 100644
--- a/src/routes/org/[slug]/quiz/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/quiz/[slug]/+page.svelte
@@ -38,7 +38,7 @@
 
   function activeClass(q, cq) {
     if (q.id === cq.id) {
-      return 'bg-gray-200 dark:bg-gray-800';
+      return 'bg-gray-200 dark:bg-black';
     }
     return '';
   }
@@ -196,7 +196,7 @@
 
 <section class="w-screen h-full flex justify-between">
   <!-- Questions list -->
-  <aside class="root w-1/5 p-4 bg-gray-100 dark:bg-gray-700 h-full">
+  <aside class="root w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
     <div class="h-full flex flex-col">
       <a
         class="text-gray-500 dark:text-white text-md flex items-center"
@@ -275,7 +275,7 @@
   </div>
 
   <!-- Quiz Settings -->
-  <aside class="settings w-1/5 p-4 bg-gray-100 dark:bg-gray-700 h-full">
+  <aside class="settings w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
     <div class="py-5">
       <h5>Quiz settings</h5>
       <PrimaryButton