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

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <digdippa@gmail.com>

src/components/Question/RadioQuestion/index.svelte

@@ -62,7 +62,9 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h3 class="{labelClassName} {!isNaN(grade) && 'w-3/4'}">{title}</h3>
+    <h3 class="dark:text-white {labelClassName} {!isNaN(grade) && 'w-3/4'}">
+      {title}
+    </h3>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField
@@ -72,7 +74,7 @@
           className="w-20"
           isDisabled={disableGrading}
         />
-        <p class="ml-2 text-lg">/ {gradeMax}</p>
+        <p class="dark:text-white ml-2 text-lg">/ {gradeMax}</p>
       </div>
     {/if}
   </div>
@@ -84,7 +86,7 @@
   <div class={!disableOptContainerMargin && 'ml-4'}>
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
           option
         )}"
         type="button"