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/Form/Checkbox.svelte

@@ -24,14 +24,14 @@
   />
   {#if isEditable}
     <input
-      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
       type="text"
       placeholder="Your option"
       bind:value={label}
       on:change={onChange}
     />
   {:else}
-    <span class="ml-2">{label}</span>
+    <span class="dark:text-white ml-2">{label}</span>
   {/if}
 
   <slot name="iconbutton" />

src/components/Form/Date.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <label class="block {className}">
-  <span class="text-gray-700">{label}</span>
+  <span class="text-gray-700 dark:text-white">{label}</span>
   <input
     bind:value
     {placeholder}

src/components/Form/DateTime.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <label class="block {className}">
-  <span class="text-gray-700">{label}</span>
+  <span class="text-gray-700 dark:text-white">{label}</span>
   <input
     bind:value
     on:input={onInput}

src/components/Form/RadioItem.svelte

@@ -24,14 +24,14 @@
   />
   {#if isEditable}
     <input
-      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
       type="text"
       placeholder="Your option"
       bind:value={label}
       on:change={onChange}
     />
   {:else}
-    <span class="ml-2">{label}</span>
+    <span class="dark:text-white ml-2">{label}</span>
   {/if}
 
   <slot name="iconbutton" />

src/components/Form/Select.svelte

@@ -16,7 +16,9 @@
 </script>
 
 <label class="block {className}">
-  {#if label} <span class="text-gray-700 mr-2">{label}</span> {/if}
+  {#if label}
+    <span class="text-gray-700 dark:text-white mr-2">{label}</span>
+  {/if}
   <select
     bind:value
     class="form-select block w-auto mt-1 {selectClassName}"
@@ -26,7 +28,7 @@
     class:customColor={!!selectClassName}
   >
     {#each options as option}
-      <option class="bg-white text-black" value={option}>
+      <option class="bg-white dark:bg-gray-800 text-black" value={option}>
         {option[labelKey]}
       </option>
     {/each}

src/components/Form/TextArea.svelte

@@ -6,7 +6,7 @@
   export let maxRows = 3;
   export let className = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-200';
+  export let bgColor = 'bg-gray-200 dark:bg-gray-500';
   export let helperMessage = '';
   export let errorMessage = '';
   export let isRequired = false;
@@ -18,7 +18,7 @@
 
 <label class="block w-full relative {className}">
   {#if label}
-    <p for="text-field" class={labelClassName}>
+    <p for="text-field" class="dark:text-white {labelClassName}">
       {label}
 
       {#if isRequired}
@@ -38,7 +38,7 @@
     {placeholder}
     bind:value
     required={isRequired}
-    class="form-textarea mt-1 block w-full 
+    class="form-textarea mt-1 block w-full
     {bgColor} border-t-0 border-l-0 border-r-0 border-b-1 {!!errorMessage
       ? 'border-red-500'
       : 'border-gray-300'}"
@@ -49,7 +49,7 @@
       {errorMessage}
     </p>
   {:else if helperMessage}
-    <p class="text-sm text-gray-500">
+    <p class="text-sm text-gray-500 dark:text-gray-200">
       {helperMessage}
     </p>
   {/if}

src/components/Form/TextField.svelte

@@ -52,7 +52,10 @@
 
 <label class="block relative {className}">
   {#if label}
-    <label for="text-field" class="m-0 font-light {labelClassName}">
+    <label
+      for="text-field"
+      class="dark:text-white m-0 font-light {labelClassName}"
+    >
       {label}
 
       {#if isRequired}
@@ -83,9 +86,9 @@
     </span>
   {/if}
   {#if errorMessage}
-    <p class="text-sm text-red-500">{errorMessage}</p>
+    <p class="dark:text-white text-sm text-red-500">{errorMessage}</p>
   {:else if helperMessage}
-    <p class="text-sm">
+    <p class="dark:text-white text-sm">
       {helperMessage}
     </p>
   {/if}