CLASSROOMIO-T-41: Implement dark/light mode switch

Co-authored-by: Rotimi Best <[email protected]>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <[email protected]>

src/routes/courses/[id]/attendance.svelte

@@ -136,9 +136,9 @@
       <div
         class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
       >
-        <p class="w-1/4">Student</p>
+        <p class="dark:text-white w-1/4">Student</p>
         {#each $lessons as lesson, index}
-          <p class="col" title={lesson.title}>
+          <p class="dark:text-white col" title={lesson.title}>
             {getLectureNo(index + 1)}
           </p>
         {/each}
@@ -155,14 +155,16 @@
               class="w-8 h-8 rounded-full mr-2"
             />
             <div class="text-sm">
-              <p class="font-semibold">{student.profile.fullname}</p>
+              <p class="dark:text-white font-semibold">
+                {student.profile.fullname}
+              </p>
               {#if student.assigned_student_id}
-                <p>#{student.assigned_student_id}</p>
+                <p class="dark:text-white">#{student.assigned_student_id}</p>
               {/if}
             </div>
           </div>
           {#each $lessons as lesson}
-            <p class="col">
+            <p class="dark:text-white col">
               <input
                 class="form-radio {isStudent && 'cursor-not-allowed'}"
                 type="checkbox"
@@ -180,7 +182,9 @@
       {:else}
         <Box>
           <AudioConsole32 class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500">No Student Added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No Student Added
+          </h3>
         </Box>
       {/each}
     </div>

src/routes/courses/[id]/lessons/index.svelte

@@ -198,7 +198,7 @@
           </RoleBasedSecurity>
 
           <div class="">
-            <h3 class="text-3xl font-bold">
+            <h3 class="dark:text-white text-3xl font-bold">
               {getLessonOrder(lesson.id)}.
             </h3>
           </div>
@@ -206,7 +206,7 @@
             {#if lessonEditing === lesson.id}
               <TextField bind:value={lesson.title} autofocus={true} />
             {:else}
-              <h3 class="text-2xl m-0 flex items-center">
+              <h3 class="dark:text-white text-2xl m-0 flex items-center">
                 <a
                   href={isStudent && !lesson.is_complete
                     ? $page.path
@@ -237,7 +237,7 @@
                     labelKey="fullname"
                   />
                 {:else if !lesson.profile}
-                  <p class="ml-2 text-sm">No tutor added</p>
+                  <p class="dark:text-white ml-2 text-sm">No tutor added</p>
                 {:else}
                   <a href="." class="flex items-center hover:underline">
                     <img
@@ -247,7 +247,7 @@
                       height="20"
                       src={lesson.profile.avatar_url}
                     />
-                    <p class="ml-2 text-sm">
+                    <p class="dark:text-white ml-2 text-sm">
                       {lesson.profile.fullname}
                     </p>
                   </a>
@@ -265,7 +265,7 @@
                   />
                 {:else}
                   <Time24 class="carbon-icon" />
-                  <p class="text-md ml-2">
+                  <p class="dark:text-white text-md ml-2">
                     {new Date(lesson.lesson_at).toDateString()}
                   </p>
                 {/if}
@@ -303,7 +303,9 @@
         </div>
       {:else}
         <Box>
-          <h3 class="text-3xl text-gray-500">No lesson added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No lesson added
+          </h3>
           <img alt="No lesson added" src="/notfound2.gif" class="w-80" />
         </Box>
       {/each}

src/routes/courses/[id]/marks.svelte

@@ -103,12 +103,12 @@
     <div class="table rounded-md border border-gray-300 w-auto">
       <div class="flex items-center {borderBottomGrey}">
         <div class="box flex items-center p-3">
-          <p class="w-40">Student</p>
+          <p class="dark:text-white w-40">Student</p>
         </div>
         {#each $lessons as lesson, index}
           {#if lessonMapping[lesson.id]}
             <div class="box flex flex-col items-center {borderleftGrey}">
-              <p class="col lesson-number" title={lesson.title}>
+              <p class="dark:text-white col lesson-number" title={lesson.title}>
                 {getLectureNo(index + 1)}
               </p>
               <div
@@ -116,7 +116,8 @@
               >
                 {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
                   <p
-                    class="col text-sm {index && borderleftGrey}"
+                    class="col text-sm dark:text-white {index &&
+                      borderleftGrey}"
                     title={lessonMapping[lesson.id][exerciseId].title}
                   >
                     {lessonMapping[lesson.id][exerciseId].title}
@@ -128,7 +129,7 @@
           {/if}
         {/each}
         <div class="box flex items-center {borderleftGrey}">
-          <p class="w-20 text-center">Total</p>
+          <p class="dark:text-white w-20 text-center">Total</p>
         </div>
       </div>
 
@@ -143,8 +144,10 @@
               class="w-8 h-8 rounded-full mr-2"
             />
             <div class="text-sm">
-              <p class="font-semibold">{student.profile.fullname}</p>
-              <p>
+              <p class="dark:text-white font-semibold">
+                {student.profile.fullname}
+              </p>
+              <p class="dark:text-white">
                 {`${
                   student.assigned_student_id
                     ? '#' + student.assigned_student_id
@@ -157,7 +160,7 @@
             {#if lessonMapping[lesson.id]}
               <div class="flex items-center">
                 {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
-                  <p class="col">
+                  <p class="dark:text-white col">
                     {studentMarksByExerciseId[student.id]
                       ? studentMarksByExerciseId[student.id][exerciseId] || '-'
                       : '-'}
@@ -169,7 +172,7 @@
 
           <div class="w-20 flex items-center">
             <div class="text-sm">
-              <p class="col">
+              <p class="dark:text-white col">
                 {calculateStudentTotal(studentMarksByExerciseId[student.id])}
               </p>
             </div>
@@ -178,7 +181,9 @@
       {:else}
         <Box>
           <AudioConsole32 class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500">No Student Added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No Student Added
+          </h3>
         </Box>
       {/each}
     </div>

src/routes/courses/[id]/people.svelte

@@ -136,12 +136,12 @@
       <div
         class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
       >
-        <span class="w-1/4 text-center">ID</span>
+        <span class="dark:text-white w-1/4 text-center">ID</span>
         <!-- <span class="flex-grow" /> -->
-        <p class="text-lg w-2/4">Name</p>
-        <p class="text-lg w-1/4 ">Role</p>
+        <p class="dark:text-white text-lg w-2/4">Name</p>
+        <p class="dark:text-white text-lg w-1/4">Role</p>
         <RoleBasedSecurity allowedRoles={[1, 2]}>
-          <p class="hidden lg:block text-lg w-20" />
+          <p class="dark:text-white hidden lg:block text-lg w-20" />
         </RoleBasedSecurity>
       </div>
 
@@ -157,7 +157,9 @@
             />
           {:else}
             <div class="student-id flex items-center justify-between relative">
-              <p class="w-11/12">{person.assigned_student_id || '-'}</p>
+              <p class="dark:text-white w-11/12">
+                {person.assigned_student_id || '-'}
+              </p>
               {#if !isStudent}
                 <div class="absolute edit-btn">
                   <IconButton
@@ -182,7 +184,7 @@
                 name={person.profile.fullname}
               />
               <div class="ml-2 break-all">
-                <p class="text-lg">{person.profile.fullname}</p>
+                <p class="dark:text-white text-lg">{person.profile.fullname}</p>
                 {#if !isStudent}
                   <a
                     href="mailto:{person.profile.email}"
@@ -206,7 +208,9 @@
             </div>
           {/if}
 
-          <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
+          <p class="dark:text-white text-lg w-1/4">
+            {ROLE_LABEL[person.role_id]}
+          </p>
 
           <RoleBasedSecurity allowedRoles={[1, 2]}>
             <div class="hidden lg:block w-20">

src/routes/courses/[id]/submissions.svelte

@@ -276,12 +276,12 @@
       <div class="flex items-center w-full">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
+            class="section rounded-md bg-gray-100 dark:bg-gray-700 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
             animate:flip={{ duration: flipDurationMs }}
           >
             <div class="flex items-center mb-2">
               <Chip value={items.length} class="bg-set" />
-              <p class="ml-2 font-bold">{title}</p>
+              <p class="dark:text-white ml-2 font-bold">{title}</p>
             </div>
             <div
               class="content pr-2 overflow-y-auto mb-3"
@@ -297,7 +297,7 @@
                 <div
                   class="border {item.isEarly
                     ? 'border-grey-700'
-                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-3 px-3"
+                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-800 py-3 px-3"
                   animate:flip={{ duration: flipDurationMs }}
                 >
                   <div
@@ -311,7 +311,9 @@
                       class="block rounded-full h-6 w-6"
                       src={item.student.avatar_url}
                     />
-                    <p class="ml-2 text-sm">{item.student.username}</p>
+                    <p class="dark:text-white ml-2 text-sm">
+                      {item.student.username}
+                    </p>
                   </div>
                   <a
                     class="text-blue-700 text-md font-bold"
@@ -324,12 +326,14 @@
                     href="{$page.path.replace('submissions', 'lessons')}/{item
                       .lesson.id}/exercises/{item.exercise.id}"
                   >
-                    <p class="text-grey text-sm">
+                    <p class="dark:text-white text-grey text-sm">
                       #{item.lesson.title}
                       {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
                     </p>
                   </a>
-                  <p class="text-gray-500 text-xs">
+                  <p
+                    class="dark:text-white text-gray-500 dark:text-gray-200 text-xs"
+                  >
                     {item.submittedAt}
                   </p>
                   <!-- <div class="badge rounded-md px-2 bg-green-500 text-white">