Dark mode improvements

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.

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"

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 (
+              } else if (option.selectedBy.find((user) => user.value === userId)) {
-                option.selectedBy.find((user) => user.value === userId)
-              ) {
                 // This makes the user to select only one option
-                option.selectedBy = option.selectedBy.filter(
+                option.selectedBy = option.selectedBy.filter((user) => user.value !== userId);
-                  (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>

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">

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'}

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

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

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}
         >

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">

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]"
     >

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">

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

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"

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}

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">

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">

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} />

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"
     >

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;" />

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 />

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">

src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte

@@ -32,10 +32,7 @@
     <PlayHeader startCount={true} showCountDown={true} />
   </div>
 
-  <div
+  <div slot="body" class="w-full rounded-md bg-white dark:bg-neutral-800 py-7 px-5">
-    slot="body"
-    class="w-full rounded-md bg-white dark:bg-gray-700 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
+    <PrimaryButton label="View Players" variant={VARIANTS.OUTLINED} onClick={goToPlayersStep} />
-      label="View Players"
-      variant={VARIANTS.OUTLINED}
-      onClick={goToPlayersStep}
-    />
   </div>
 </PlayContainer>

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}

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}

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}

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">

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>

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>

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"
 >

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'
 };

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">

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>

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}

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

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`}
           >

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

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">

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"

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">

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>

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