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/components/Apps/components/LiveChat/index.svelte

@@ -1,35 +1,35 @@
 <script>
-  import marked from "marked";
+  import marked from 'marked';
-  import PageNav from "../../../PageNav/index.svelte";
+  import PageNav from '../../../PageNav/index.svelte';
-  import CloseButton from "../../../Buttons/Close/index.svelte";
+  import CloseButton from '../../../Buttons/Close/index.svelte';
-  import TextField from "../../../Form/TextField.svelte";
+  import TextField from '../../../Form/TextField.svelte';
   // import SendButton from "../../../Buttons/Send/index.svelte";
 
   export let handleClose;
 
-  let message = "";
+  let message = '';
   let bodyRef;
   let chats = [
     {
-      avatar: "https://picsum.photos/32/32/?random",
+      avatar: 'https://picsum.photos/32/32/?random',
-      name: "Evgeniy",
+      name: 'Evgeniy',
       message: "I'am looking at this and it looks great",
     },
     {
-      avatar: "https://picsum.photos/32/32/?random",
+      avatar: 'https://picsum.photos/32/32/?random',
-      name: "Sergey Semko",
+      name: 'Sergey Semko',
       message:
-        "Thanks for the feedback, what do you think about my website. https://rotimibest.com",
+        'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
     },
     {
-      avatar: "https://picsum.photos/32/32/?random",
+      avatar: 'https://picsum.photos/32/32/?random',
-      name: "Vitalii Marushko",
+      name: 'Vitalii Marushko',
-      message: "Всем привет",
+      message: 'Всем привет',
     },
     {
-      avatar: "https://picsum.photos/32/32/?random",
+      avatar: 'https://picsum.photos/32/32/?random',
-      name: "Natasha",
+      name: 'Natasha',
-      message: "Привет Виталий",
+      message: 'Привет Виталий',
     },
   ];
 
@@ -41,8 +41,8 @@
     chats = [
       ...chats,
       {
-        avatar: "https://picsum.photos/32/32/?random",
+        avatar: 'https://picsum.photos/32/32/?random',
-        name: "You",
+        name: 'You',
         message,
       },
     ];
@@ -57,7 +57,7 @@
   }
 
   function handleKeyDown(e) {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       handleSend();
     }
   }
@@ -80,7 +80,7 @@
           height="20"
           src={chat.avatar}
         />
-        <p class="ml-2 text-sm font-bold">{chat.name}</p>
+        <p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
       </div>
       <article class="prose prose-sm sm:prose pt-2 pl-8">
         {@html marked(chat.message)}

src/components/Apps/components/Poll/components/FormSection.svelte

@@ -1,18 +1,20 @@
 <script>
   export let value;
   export let label;
-  export let type = "text";
+  export let type = 'text';
-  export let name = "text";
+  export let name = 'text';
   export let handleLabelButton;
   export let handleInputButton;
 </script>
 
 <div class="mb-3">
   {#if label}
-    <p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
+    <p
+      class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
+    >
       {label}
 
-      {#if typeof handleLabelButton === "function"}
+      {#if typeof handleLabelButton === 'function'}
         <button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
           +
         </button>
@@ -21,15 +23,15 @@
   {/if}
 
   <div class="w-full">
-    {#if type === "text"}
+    {#if type === 'text'}
       <input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
     {/if}
 
-    {#if type === "date"}
+    {#if type === 'date'}
       <input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
     {/if}
 
-    {#if typeof handleInputButton === "function"}
+    {#if typeof handleInputButton === 'function'}
       <button class="text-xl px-3 ml-5" on:click={handleInputButton}>
         -
       </button>

src/components/Apps/components/Poll/components/Label.svelte

@@ -1,3 +1,5 @@
-<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
+<p
+  class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
+>
   <slot />
 </p>

src/components/Apps/components/Poll/components/Poll.svelte

@@ -48,7 +48,7 @@
   }
 </script>
 
-<div class="p-4 bg-white-100 border-2 rounded-md mb-3">
+<div class="p-4 bg-white dark:bg-gray-800-100 border-2 rounded-md mb-3">
   {#if selectedOptionToView}
     <div>
       <div class="flex items-center mb-5">
@@ -59,13 +59,13 @@
           {`<`}
         </button>
         <div class="flex-grow text-center">
-          <h3 class="font-bold">Voted</h3>
+          <h3 class="dark:text-white font-bold">Voted</h3>
         </div>
       </div>
       {#each selectedOptionToView.selectedBy as user}
         <div class="flex items-center mb-2">
           <Avatar src={user.avatar} name={user.label} className="mr-2" />
-          <p>
+          <p class="dark:text-white">
             {user.label}
           </p>
         </div>
@@ -74,10 +74,10 @@
   {:else}
     <div class="flex mb-3 justify-between">
       <div>
-        <h3 class="font-bold">
+        <h3 class="dark:text-white font-bold">
           {poll.question}
         </h3>
-        <p class="text-sm italic">
+        <p class="dark:text-white text-sm italic">
           Created by <a
             class="text-blue-500"
             href="https://twitter.com/rotimi_best"
@@ -102,13 +102,13 @@
       <div class="flex items-center justify-between">
         <div class="mr-5">
           <Label>Expiration</Label>
-          <p class="text-sm text-gray-600 mb-4">
+          <p class="dark:text-white text-sm text-gray-600 mb-4">
             {poll.expiration || 'Today'}
           </p>
         </div>
         <div class="flex flex-col items-center">
           <Label>Total Votes</Label>
-          <p class="text-sm text-gray-600 mb-4">
+          <p class="dark:text-white text-sm text-gray-600 mb-4">
             {totalVotes}
           </p>
         </div>
@@ -117,7 +117,7 @@
       <Label>Responses</Label>
       {#each poll.options as option, index}
         <div class="border-b p-5">
-          <p>
+          <p class="dark:text-white">
             {option.label}
           </p>
 
@@ -148,7 +148,7 @@
     {:else}
       {#each poll.options as option, index}
         <button
-          class="bg-white rounded-md border-2 border-gray-500 {didUserSelect(
+          class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
             option
           ) &&
             'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
@@ -158,7 +158,7 @@
             <span
               class="progress absolute top-0 left-0 {didUserSelect(option)
                 ? 'bg-blue-700'
-                : 'bg-gray-300'} h-full bg-opacity-25 "
+                : 'bg-gray-300'} h-full bg-opacity-25"
               style="width: {calculatePercent(poll.options, option)}%;"
             />
             <strong class="mr-3"
@@ -169,11 +169,11 @@
         </button>
       {/each}
       <div class="flex items-center">
-        <p class="text-sm text-gray-600">
+        <p class="dark:text-white text-sm text-gray-600">
           Expires: {poll.expiration || 'Today'}
         </p>
         <span class="mx-2">|</span>
-        <p class="text-sm text-gray-600">
+        <p class="dark:text-white text-sm text-gray-600">
           Voted: {totalVotes}
         </p>
       </div>

src/components/Apps/components/Poll/index.svelte

@@ -1,43 +1,43 @@
 <script>
-  import PageNav from "../../../PageNav/index.svelte";
+  import PageNav from '../../../PageNav/index.svelte';
-  import CloseButton from "../../../Buttons/Close/index.svelte";
+  import CloseButton from '../../../Buttons/Close/index.svelte';
-  import PrimaryButton from "../../../PrimaryButton/index.svelte";
+  import PrimaryButton from '../../../PrimaryButton/index.svelte';
-  import { VARIANTS } from "../../../PrimaryButton/constants";
+  import { VARIANTS } from '../../../PrimaryButton/constants';
-  import CreatePollForm from "./components/CreatePollForm.svelte";
+  import CreatePollForm from './components/CreatePollForm.svelte';
-  import Poll from "./components/Poll.svelte";
+  import Poll from './components/Poll.svelte';
-  import Tabs from "./components/Tabs.svelte";
+  import Tabs from './components/Tabs.svelte';
 
   export let handleClose;
 
   const users = [
     {
-      label: "Rich Harris",
+      label: 'Rich Harris',
-      value: "rich-harris",
+      value: 'rich-harris',
-      avatar: "https://i.pravatar.cc/150?img=1",
+      avatar: 'https://i.pravatar.cc/150?img=1',
     },
     {
-      label: "Linus Torvalds",
+      label: 'Linus Torvalds',
-      value: "linus-torvalds",
+      value: 'linus-torvalds',
-      avatar: "https://i.pravatar.cc/150?img=2",
+      avatar: 'https://i.pravatar.cc/150?img=2',
     },
     {
-      label: "Elon Musk",
+      label: 'Elon Musk',
-      value: "elon-musk",
+      value: 'elon-musk',
-      avatar: "https://i.pravatar.cc/150?img=3",
+      avatar: 'https://i.pravatar.cc/150?img=3',
     },
     {
-      label: "Satoshi Nakamoto",
+      label: 'Satoshi Nakamoto',
-      value: "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",
+      label: 'My polls',
       value: 0,
     },
     {
-      label: "Other polls",
+      label: 'Other polls',
       value: 1,
     },
   ];
@@ -47,36 +47,36 @@
   let shouldCreatePoll = false;
   let polls = [
     {
-      question: "Who is the creator of Svelte?",
+      question: 'Who is the creator of Svelte?',
       author: users[0],
-      status: "draft", // public
+      status: 'draft', // public
       expiration: new Date().toDateString(),
       options: [
         {
-          label: "Dan Abrahmov",
+          label: 'Dan Abrahmov',
           selectedBy: [],
         },
         {
-          label: "Evan You",
+          label: 'Evan You',
           selectedBy: [
             {
-              label: "Rich Harris",
+              label: 'Rich Harris',
-              value: "rich-harris",
+              value: 'rich-harris',
-              avatar: "https://i.pravatar.cc/150?img=1",
+              avatar: 'https://i.pravatar.cc/150?img=1',
             },
             {
-              label: "Linus Torvalds",
+              label: 'Linus Torvalds',
-              value: "linus-torvalds",
+              value: 'linus-torvalds',
-              avatar: "https://i.pravatar.cc/150?img=2",
+              avatar: 'https://i.pravatar.cc/150?img=2',
             },
           ],
         },
         {
-          label: "Rich Harris",
+          label: 'Rich Harris',
           selectedBy: [],
         },
         {
-          label: "Yehuda Katz",
+          label: 'Yehuda Katz',
           selectedBy: [],
         },
       ],
@@ -186,7 +186,7 @@
         {/if}
       {:else}
         <div
-          class="bg-gray-100 border rounded-md h-60 flex items-center justify-center "
+          class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
         >
           <h2 class="text-xl font-bold">No polls to display</h2>
         </div>

src/components/Apps/components/QandA/index.svelte

@@ -1,10 +1,10 @@
 <script>
-  import marked from "marked";
+  import marked from 'marked';
-  import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
+  import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
-  import PageNav from "../../../PageNav/index.svelte";
+  import PageNav from '../../../PageNav/index.svelte';
-  import CloseButton from "../../../Buttons/Close/index.svelte";
+  import CloseButton from '../../../Buttons/Close/index.svelte';
-  import Vote from "../../../Vote/index.svelte";
+  import Vote from '../../../Vote/index.svelte';
-  import TextField from "../../../Form/TextField.svelte";
+  import TextField from '../../../Form/TextField.svelte';
 
   export let handleClose;
   let bodyRef;
@@ -13,30 +13,30 @@
   let questions = [
     {
       id: 1,
-      name: "Evgeniy",
+      name: 'Evgeniy',
       question: "I'am looking at this and it looks great",
       vote: 1,
       answered: false,
     },
     {
       id: 2,
-      name: "Sergey Semko",
+      name: 'Sergey Semko',
       question:
-        "Thanks for the feedback, what do you think about my website. https://rotimibest.com",
+        'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
       vote: 4,
       answered: false,
     },
     {
       id: 3,
-      name: "Vitalii Marushko",
+      name: 'Vitalii Marushko',
-      question: "Всем привет",
+      question: 'Всем привет',
       vote: 20,
       answered: false,
     },
     {
       id: 4,
-      name: "Natasha",
+      name: 'Natasha',
-      question: "Привет Виталий",
+      question: 'Привет Виталий',
       vote: 0,
       answered: false,
     },
@@ -51,7 +51,7 @@
       ...questions,
       {
         id: questions.length,
-        name: "You",
+        name: 'You',
         question,
         vote: 0,
         answered: false,
@@ -82,7 +82,7 @@
   }
 
   function handleKeyDown(e) {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       handleSend();
     }
   }
@@ -99,13 +99,13 @@
     <div class="flex items-start ml-2 mb-2 mt-2">
       <Vote bind:value={question.vote} />
       <div class="ml-2 flex-grow">
-        <p class="text-sm font-bold">{question.name}</p>
+        <p class="dark:text-white text-sm font-bold">{question.name}</p>
         <article class="prose prose-sm sm:prose">
           {@html marked(question.question)}
         </article>
       </div>
       <button
-        class={`${question.answered && "active"}`}
+        class={`${question.answered && 'active'}`}
         on:click={handleMarkAnswered(question.id)}
       >
         <CheckmarkOutline20 class="carbon-icon" />

src/components/AskPage/AskPage.svelte

@@ -57,7 +57,9 @@
       </button>
 
       {#if facultyFilterOpened}
-        <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-3">
+        <div
+          class="w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3"
+        >
           {#each faculties as faculty}
             <div class="block px-4 py-3 border-b">
               <input

src/components/AuthUI/index.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div class="w-full min-h-screen flex items-center justify-center mt-4">
-  <div class="container border border-gray bg-white">
+  <div class="container border border-gray bg-white dark:bg-gray-800">
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
       {#if !showOnlyContent || showLogo}
         <div class="flex items-center w-full justify-center pt-4">
@@ -38,7 +38,7 @@
             width="50"
             data-atf="1"
           />
-          <h4 class="text-xl">ClassroomIO</h4>
+          <h4 class="dark:text-white text-xl">ClassroomIO</h4>
         </div>
       {/if}
       <form
@@ -50,7 +50,7 @@
       </form>
       {#if !showOnlyContent}
         <div class="w-10/12 mb-3">
-          <p class="text-sm mb-5">or sign up with:</p>
+          <p class="dark:text-white text-sm mb-5">or sign up with:</p>
           <PrimaryButton
             variant={VARIANTS.OUTLINED}
             onClick={signInWithGoogle}

src/components/CodeSnippet/index.svelte

@@ -1,9 +1,9 @@
 <script>
-  import marked from "marked";
+  import marked from 'marked';
 
-  export let code = "";
+  export let code = '';
 </script>
 
-<div class="bg-gray-200 p-5 rounded-md mb-3">
+<div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
-  {@html marked("```js\n" + code + "\n```")}
+  {@html marked('```js\n' + code + '\n```')}
 </div>

src/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte

@@ -21,7 +21,9 @@
   modalHeading="Delete question"
 >
   <div>
-    <h1 class="text-lg">Are you sure you want to delete this question?</h1>
+    <h1 class="dark:text-white text-lg">
+      Are you sure you want to delete this question?
+    </h1>
 
     <div class="mt-5 flex items-center justify-between">
       <PrimaryButton

src/components/Course/components/Lesson/Exercise/EditMode.svelte

@@ -128,7 +128,7 @@
 >
   {#if shouldDelete}
     <form on:submit|preventDefault={() => (shouldDelete = false)}>
-      <h1 class="text-2xl">Are you sure?</h1>
+      <h1 class="dark:text-white text-2xl">Are you sure?</h1>
 
       <div class="mt-5 flex items-center justify-between">
         <PrimaryButton
@@ -222,7 +222,7 @@
           handleOptionClick={handleOptionClick(question.id)}
         >
           <AddFilled24 class="carbon-icon" />
-          <p class="ml-2 text-gray-600">Add</p>
+          <p class="dark:text-white ml-2 text-gray-600">Add</p>
         </Dropdown> -->
 
           <Select
@@ -333,7 +333,7 @@
               onClick={handleAddOption(question.id)}
             >
               <AddFilled24 class="carbon-icon" />
-              <p class="ml-2">Add option</p>
+              <p class="dark:text-white ml-2">Add option</p>
             </PrimaryButton>
           </div>
         {/if}

src/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte

@@ -116,9 +116,9 @@
     </div>
     <div class="border border-gray-300 rounded-md mt-2">
       <div
-        class="hover:bg-gray-100 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
+        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"
       >
-        <p class="font-bold text-lg">
+        <p class="dark:text-white font-bold text-lg">
           Details
           {#if data.isEarly}
             <span
@@ -137,30 +137,30 @@
       </div>
 
       <div class="flex items-center text-sm p-3">
-        <p class="font-bold w-2/5">Total grade</p>
+        <p class="dark:text-white font-bold w-2/5">Total grade</p>
-        <p>{total} / {maxPoints}</p>
+        <p class="dark:text-white">{total} / {maxPoints}</p>
       </div>
       <!-- <div class="flex items-center text-sm p-3">
-        <p class="font-bold w-1/2">Status</p>
+        <p class="dark:text-white font-bold w-1/2">Status</p>
         <div class="flex items-center">
-          <p class="rounded-full w-5 h-5 bg-yellow-300 mr-2" />
+          <p class="dark:text-white rounded-full w-5 h-5 bg-yellow-300 mr-2" />
-          <p>Grading</p>
+          <p class="dark:text-white">Grading</p>
         </div>
       </div> -->
       <div class="flex items-center text-sm p-3">
-        <p class="font-bold w-2/5">Student</p>
+        <p class="dark:text-white font-bold w-2/5">Student</p>
         {#if data.student}
           <img
             alt="Student avatar"
             class="block rounded-full h-6 w-6"
             src={data.student.avatar_url}
           />
-          <p class="ml-2 text-sm">{data.student.fullname}</p>
+          <p class="dark:text-white ml-2 text-sm">{data.student.fullname}</p>
         {/if}
       </div>
       <!-- <div class="flex items-center text-sm p-3">
-        <p class="font-bold w-1/2">Teacher</p>
+        <p class="dark:text-white font-bold w-1/2">Teacher</p>
-        <p>rotimi-best</p>
+        <p class="dark:text-white">rotimi-best</p>
       </div> -->
     </div>
   </div>

src/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -181,7 +181,7 @@
   <div
     class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
   >
-    <h3 class="text-2xl">
+    <h3 class="dark:text-white text-2xl">
       No questions added. <br />
       <RoleBasedSecurity allowedRoles="[1,2]">
         Click the <span class="text-blue-700">Edit</span> button to add.
@@ -193,18 +193,18 @@
     <h2 class="my-1">{$questionnaire.title}</h2>
 
     <div class="flex items-center">
-      <p class="mx-2">
+      <p class="dark:text-white mx-2">
         <strong>{$questionnaire.questions.length}</strong> questions
       </p>
       |
-      <p class="mx-2">
+      <p class="dark:text-white mx-2">
         <strong>{getTotalPossibleGrade()}</strong> points.
       </p>
       |
-      <p class="mx-2">All required</p>
+      <p class="dark:text-white mx-2">All required</p>
       {#if $questionnaire.due_by}
         |
-        <p class="mx-2">
+        <p class="dark:text-white mx-2">
           <strong>Due by:</strong>
           {new Date($questionnaire.due_by).toLocaleString()}
         </p>

src/components/Course/components/Lesson/Exercises/index.svelte

@@ -168,16 +168,18 @@
     <div class="flex flex-wrap">
       {#each $lesson.exercises as exercise}
         <a
-          class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4"
+          class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4"
           href="{path}/{exercise.id}"
         >
-          <h3 class="text-xl">{exercise.title}</h3>
+          <h3 class="dark:text-white text-xl">{exercise.title}</h3>
-          <p class="mt-4 text-sm">Created Jul 3, 2021</p>
+          <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>
         </a>
       {:else}
         <Box>
           <AudioConsole32 class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500">No Exercise Added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No Exercise Added
+          </h3>
         </Box>
       {/each}
     </div>

src/components/Course/components/Lesson/Materials/index.svelte

@@ -81,7 +81,9 @@
         />
       {:else}
         <Box>
-          <h3 class="text-3xl text-gray-500">No slide added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No slide added
+          </h3>
           <img alt="Slide not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}
@@ -99,7 +101,9 @@
         <MarkdownRender content={$lesson.materials.note} />
       {:else}
         <Box>
-          <h3 class="text-3xl text-gray-500">No note added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No note added
+          </h3>
           <img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}
@@ -129,7 +133,9 @@
         {/each}
       {:else}
         <Box>
-          <h3 class="text-3xl text-gray-500">No youtube video added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-gray-200">
+            No youtube video added
+          </h3>
           <img alt="Video not found" src="/notfound.webp" class="w-80" />
         </Box>
       {/if}

src/components/Course/components/Navigation/NavExpandable.svelte

@@ -26,7 +26,7 @@
         class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
       />
     {/if}
-    <span class="font-bold">{label}</span>
+    <span class="dark:text-white font-bold">{label}</span>
   </div>
   {#if isExpanded}
     <div class="flex flex-col">
@@ -52,6 +52,11 @@
     border-left: 3px solid var(--main-primary-color);
   }
 
+  :global(body.dark) .active,
+  :global(body.dark) .item:hover {
+    background-color: rgba(107, 114, 128);
+  }
+
   .active span {
     padding-left: 1.3rem;
   }

src/components/Course/components/Navigation/index.svelte

@@ -143,7 +143,7 @@
   class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
 >
   {#if show}
-    <div class="relative h-full">
+    <div class="relative h-full dark:bg-gray-700">
       <PageNav bind:title={$course.title} paddingClass="pl-2">
         <slot:fragment slot="image">
           <Avatar src={$course.logo} />
@@ -280,10 +280,15 @@
 
   .item {
     font-size: 0.875rem;
+    font-weight: bold;
     &:hover {
       background-color: #cae2f9;
     }
   }
+  :global(body.dark) .active,
+  :global(body.dark) .item:hover {
+    background-color: rgba(107, 114, 128);
+  }
 
   .navItems {
     height: 82%;

src/components/Course/components/People/DeleteConfirmation.svelte

@@ -21,7 +21,7 @@
   modalHeading="Delete"
 >
   <div>
-    <h1 class="text-lg">
+    <h1 class="dark:text-white text-lg">
       Are you sure you want to delete <strong>{email}</strong>?
     </h1>
 

src/components/Course/components/Settings/index.svelte

@@ -62,7 +62,7 @@
 >
   {#if shouldDelete}
     <form on:submit|preventDefault={() => (shouldDelete = false)}>
-      <h1 class="text-2xl">Are you sure?</h1>
+      <h1 class="dark:text-white text-2xl">Are you sure?</h1>
 
       <div class="mt-5 flex items-center justify-between">
         <PrimaryButton

src/components/CourseLandingPage/components/Editor/Container.svelte

@@ -11,7 +11,7 @@
   class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
 >
   {#if show}
-    <div class="relative h-full bg-white">
+    <div class="relative h-full bg-white dark:bg-gray-800">
       <slot />
     </div>
   {/if}

src/components/CourseLandingPage/components/Editor/PricingForm.svelte

@@ -82,7 +82,7 @@
 </div>
 
 {#if giftToggled}
-  <p class="font-bold mt-5">About Gift</p>
+  <p class="dark:text-white font-bold mt-5">About Gift</p>
 
   <div class="h-2/5">
     <TextEditor

src/components/CourseLandingPage/components/Editor/index.svelte

@@ -132,24 +132,24 @@
       </div>
     </div>
     <div class="flex justify-between items-center px-2 w-full mb-2">
-      <h3 class="">Page Builder</h3>
+      <h3 class="dark:text-white">Page Builder</h3>
     </div>
     {#each sections as section}
       <button
         class="w-full flex items-center justify-between px-2 py-3 border border-b-0 border-gray-300"
         on:click={handleSectionSelect(section.key)}
       >
-        <p class="mr-2">{section.title} section</p>
+        <p class="dark:text-white mr-2">{section.title} section</p>
         <ChevronRight24 class="carbon-class" />
       </button>
     {/each}
   {:else}
     <!-- Title -->
-    <div class="flex items-center  {borderBottomGrey} w-full">
+    <div class="flex items-center {borderBottomGrey} w-full">
       <IconButton onClick={handleClose}>
         <ArrowLeft24 class="carbon-icon" title="Go back" />
       </IconButton>
-      <h3 class="">{selectedSection.title}</h3>
+      <h3 class="dark:text-white">{selectedSection.title}</h3>
     </div>
 
     <div class="p-2 h-4/5 overflow-y">

src/components/CourseLandingPage/components/PricingSection.svelte

@@ -42,11 +42,13 @@
   <div class="p-10">
     <!-- Pricing -->
     <div class="mb-6">
-      <p class="font-medium text-lg">
+      <p class="dark:text-white font-medium text-lg">
         {formatter?.format(calculatedCost) || calculatedCost}
       </p>
       {#if courseData?.metadata?.showDiscount}
-        <p class="font-light text-sm text-gray-500">
+        <p
+          class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
+        >
           {discount}% Discount.
           <span class="line-through"
             >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
@@ -68,7 +70,11 @@
         variant={VARIANTS.OUTLINED}
         onClick={addToCart}
       />
-      <p class="font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
+      <p
+        class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
+      >
+        Early bird offer. Buy ASAP
+      </p>
     </div>
   </div>
 

src/components/CourseLandingPage/index.svelte

@@ -73,7 +73,7 @@
   <title>{get(courseData, 'title', '')}</title>
 </svelte:head>
 
-<div class="w-full bg-white flex flex-col items-center">
+<div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
   <!-- Header Section -->
   <header class="banner w-full flex items-center justify-center p-">
     <div
@@ -81,14 +81,14 @@
     >
       <!-- Course Description -->
       <div class="md:w-2/5 w-11/12 py-10">
-        <h1 class="text-5xl text-white my-4 font-bold">
+        <h1 class="dark:text-white text-5xl text-white my-4 font-bold">
           {get(courseData, 'title', '')}
         </h1>
-        <p class="text-md text-white mb-6">
+        <p class="dark:text-white text-md text-white mb-6">
           {get(courseData, 'description', '')}
         </p>
 
-        <p class="author my-3 text-sm">
+        <p class="dark:text-white author my-3 text-sm">
           {get(courseData, 'metadata.instructor.name', '')}
         </p>
         <PrimaryButton
@@ -141,7 +141,7 @@
   </header>
   <PricingSection className="md:hidden" {courseData} />
   <!-- Body -->
-  <div class="bg-white w-full">
+  <div class="bg-white dark:bg-gray-800 w-full">
     <div class="py-8 lg:w-10/12 w-full m-2 lg:m-auto flex justify-between">
       <!-- Course Details -->
       <div class="course-content w-full p-3 md:w-9/12 md:mr-14">
@@ -169,7 +169,7 @@
         <!-- Sections - Course Description -->
         <section id="description" class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
-          <p class="text-sm font-light">
+          <p class="dark:text-white text-sm font-light">
             {@html get(courseData, 'metadata.description', '')}
           </p>
         </section>
@@ -185,7 +185,7 @@
         <!-- Sections - Certificate -->
         <section class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0">Certificate</h3>
-          <p class="text-sm font-light mb-3">
+          <p class="dark:text-white text-sm font-light mb-3">
             When you complete all of the courses in the program, you'll earn a
             Certificate to share with your professional network.
           </p>
@@ -199,7 +199,7 @@
         <section id="lessons" class="border-b border-gray-300 mt-8 pb-10">
           <div class="flex items-center justify-between w-full mb-3">
             <h3 class="text-2xl font-bold mt-0 mb-3">Course Content</h3>
-            <p class="text-sm font-light">
+            <p class="dark:text-white text-sm font-light">
               <!-- {lessons.length} lessons -->
               {pluralize('lesson', lessons.length, true)}
             </p>
@@ -213,7 +213,9 @@
                   value={getLectureNo(index + 1, '0')}
                   className="bg-blue-100 text-blue-700"
                 />
-                <p class="ml-2 text-sm font-light">{lesson.title}</p>
+                <p class="dark:text-white ml-2 text-sm font-light">
+                  {lesson.title}
+                </p>
               </div>
 
               <div class="w-2/4">
@@ -260,9 +262,13 @@
               src={get(instructor, 'imgUrl', '')}
             />
             <div>
-              <p class="text-md font-light">{get(instructor, 'name', '')}</p>
+              <p class="dark:text-white text-md font-light">
-              <p class="text-xs font-light">{get(instructor, 'role', '')}</p>
+                {get(instructor, 'name', '')}
-              <p class="text-md font-light flex items-center">
+              </p>
+              <p class="dark:text-white text-xs font-light">
+                {get(instructor, 'role', '')}
+              </p>
+              <p class="dark:text-white text-md font-light flex items-center">
                 <PlayFilled class="text-blue-700" />
                 <span class="ml-1"
                   >{get(instructor, 'courseNo', '')} courses</span
@@ -271,7 +277,7 @@
             </div>
           </div>
 
-          <p class="text-sm font-light">
+          <p class="dark:text-white text-sm font-light">
             {get(instructor, 'description', '')}
           </p>
         </section>

src/components/Courses/components/Card/Loader.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="root w-72 border bg-white mr-4 mb-4 rounded-md transition ease-in-out relative"
+  class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
 >
   <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
   <div class="p-3 pb-0">

src/components/Courses/components/Card/index.svelte

@@ -42,16 +42,16 @@
   }
 </script>
 
-<a rel="prefetch" href="/courses/{id}" class=" text-black ">
+<a rel="prefetch" href="/courses/{id}" class=" text-black">
   <div
-    class="root w-72 border bg-white mr-4 mb-4 rounded-md transition ease-in-out relative"
+    class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
   >
     <Dropdown
       options={getOptions()}
       classNames="absolute top-4 right-4"
       isIcon={true}
     >
-      <div class="p-1 rounded-full bg-white">
+      <div class="p-1 rounded-full bg-white dark:bg-gray-600">
         <OverflowMenuHorizontal24 class="carbon-icon" />
       </div>
     </Dropdown>
@@ -61,17 +61,17 @@
       alt="Course Logo"
     />
     <div class="p-3 pb-0">
-      <h4 class="title text-md font-bold">
+      <h4 class="dark:text-white title text-md font-bold">
         {title}
       </h4>
       <p
-        class="description text-left text-sm font-small flex flex-col text-gray-500 my-3"
+        class="description text-left text-sm font-small flex flex-col text-gray-500 dark:text-gray-200 my-3"
         title={description}
       >
         {description}
       </p>
       <div class="flex justify-between">
-        <p>{totalLessons} lessons</p>
+        <p class="dark:text-white">{totalLessons} lessons</p>
         <div class="rounded bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
           {#if isPublished}
             Published
@@ -80,7 +80,7 @@
           {/if}
         </div>
       </div>
-      <p class="text-gray-500 text-xs mt-1">
+      <p class="dark:text-white text-gray-500 text-xs mt-1">
         {!cost ? 'free' : formatter.format(cost)}
       </p>
     </div>

src/components/Courses/index.svelte

@@ -33,8 +33,8 @@
     {:else}
       <Box>
         <CoursesEmptyIcon />
-        <h3 class="text-2xl my-5">No Courses Created</h3>
+        <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
-        <p class="w-1/3 text-center">
+        <p class="dark:text-white w-1/3 text-center">
           Share your knowledge with the world by creating engaging courses for
           your students.
         </p>

src/components/Dropdown/index.svelte

@@ -45,11 +45,12 @@
 
   {#if open}
     <div
-      class="dropdown w-48 bg-white border border-grey rounded-lg mt-2 py-3 absolute"
+      class="dropdown w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
     >
       {#each options as option, index}
         <button
-          class="block px-4 py-3 {!isOptionLast(index) && 'border-b'} w-full"
+          class="block px-4 py-3 {!isOptionLast(index) &&
+            'border-b'} w-full dark:text-white"
           on:click={onClick(option)}
         >
           {option.label}

src/components/EditContent/index.svelte

@@ -62,7 +62,7 @@
           d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
         />
       </svg>
-      <p>
+      <p class="dark:text-white">
         Styling with Markdown is supported.
         <a
           target="_blank"

src/components/ErrorMessage/index.svelte

@@ -2,4 +2,4 @@
   export let message;
 </script>
 
-<p class="text-sm text-red-500">{message}</p>
+<p class="dark:text-white text-sm text-red-500">{message}</p>

src/components/Expandable/index.svelte

@@ -22,7 +22,7 @@
   }
 </script>
 
-<div {id} class="w-full bg-white {rootClass}">
+<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
   <div
     class="w-full relative flex items-center justify-between {!disableContainerPadding &&
       'p-5'}"
@@ -30,7 +30,7 @@
     tabindex="0"
     on:click={handleClick}
   >
-    <p class="font-bold flex items-center {titleClass}">
+    <p class="dark:text-white font-bold flex items-center {titleClass}">
       {title}
       {#if supportsLink}
         <a

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

src/components/Icons/AudienceIcon.svelte

@@ -4,6 +4,7 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class="dark"
 >
   <path
     fill-rule="evenodd"

src/components/Icons/CourseIcon.svelte

@@ -4,6 +4,7 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class="dark"
 >
   <path
     d="M18 22.5H6C5.60232 22.4995 5.22105 22.3414 4.93984 22.0602C4.65864 21.7789 4.50046 21.3977 4.5 21V3C4.5004 2.6023 4.65856 2.221 4.93978 1.93978C5.221 1.65856 5.6023 1.5004 6 1.5H18C18.3977 1.50046 18.779 1.65864 19.0602 1.93984C19.3414 2.22105 19.4995 2.60232 19.5 3V15.4636L15.75 13.5886L12 15.4636V3H6V21H18V18H19.5V21C19.4995 21.3977 19.3413 21.7789 19.0601 22.0601C18.7789 22.3413 18.3977 22.4995 18 22.5ZM15.75 11.9114L18 13.0364V3H13.5V13.0364L15.75 11.9114Z"

src/components/Icons/HomeIcon.svelte

@@ -4,6 +4,7 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class="dark"
 >
   <path
     fill-rule="evenodd"

src/components/Icons/PasswordEye.svelte

@@ -9,6 +9,7 @@
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    class="dark"
   >
     <path
       fill-rule="evenodd"
@@ -24,6 +25,7 @@
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    class="dark"
   >
     <path
       d="M0.666748 8.00008C0.666748 8.00008 3.33341 2.66675 8.00008 2.66675C12.6667 2.66675 15.3334 8.00008 15.3334 8.00008C15.3334 8.00008 12.6667 13.3334 8.00008 13.3334C3.33341 13.3334 0.666748 8.00008 0.666748 8.00008Z"

src/components/Icons/SiteSettingsIcon.svelte

@@ -4,6 +4,7 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class="dark"
 >
   <path
     fill-rule="evenodd"

src/components/Modal/index.svelte

@@ -20,17 +20,17 @@
 
 {#if open}
   <div
-    class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
+    class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 dark:bg-gray-700 bg-opacity-50"
     on:click={onClose}
   >
     <div aria-hidden="true" class="backdrop" />
     <div
       class="{maxWidth ||
-        'container'} bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+        'container'} bg-white dark:bg-gray-800 mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
       on:click={(e) => e.stopPropagation()}
     >
       <div class="flex items-center justify-between mb-4">
-        <h3 class="text-xl m-0">
+        <h3 class="dark:text-white text-xl m-0">
           {modalHeading}
         </h3>
         <CloseButton onClick={onClose} contained={true} />

src/components/Navigation/app.svelte

@@ -1,13 +1,31 @@
 <script>
   import NotificationIcon from 'carbon-icons-svelte/lib/Notification20';
+  import Moon from 'carbon-icons-svelte/lib/Moon16';
+  import Sun from 'carbon-icons-svelte/lib/Sun16';
+
+  import IconButton from '../IconButton/index.svelte';
+  import { appStore } from '../../utils/store/app';
+  import { toggleBodyByTheme } from '../../utils/functions/app';
 
   export let navClass = '';
+
+  function toggleTheme() {
+    $appStore.isDark = !$appStore.isDark;
+
+    toggleBodyByTheme($appStore.isDark);
+    localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
+  }
 </script>
 
 <nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
   <ul class="flex w-full items-center">
     <div class="">
-      <a href="/" title="Go to ClassroomIO Home" id="logo" class="text-lg">
+      <a
+        href={window.location.pathname}
+        title="Go to ClassroomIO Home"
+        id="logo"
+        class="text-lg"
+      >
         ClassroomIO
       </a>
     </div>
@@ -17,6 +35,15 @@
     <li>
       <NotificationIcon class="text-white mr-2" />
     </li>
+    <li>
+      <IconButton size="small" onClick={toggleTheme}>
+        {#if $appStore.isDark}
+          <Sun class="text-white" />
+        {:else}
+          <Moon class="text-white" />
+        {/if}
+      </IconButton>
+    </li>
     <li />
   </ul>
 </nav>

src/components/Org/Audience/index.svelte

@@ -22,8 +22,8 @@
   {:else}
     <Box>
       <AudienceEmptyIcon />
-      <h3 class="text-2xl my-5">No audience to manage!</h3>
+      <h3 class="dark:text-white text-2xl my-5">No audience to manage!</h3>
-      <p class="w-1/3 text-center">
+      <p class="dark:text-white w-1/3 text-center">
         Manage all your students here and stay connected with them.
       </p>
     </Box>

src/components/Org/SectionTitle.svelte

@@ -0,0 +1,3 @@
+<p class="dark:text-white font-bold">
+  <slot />
+</p>

src/components/Org/Settings/Domains.svelte

@@ -9,6 +9,7 @@
   import { supabase } from '../../../utils/functions/supabase';
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let siteName;
   let errors = '';
@@ -56,7 +57,7 @@
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 mb-5">
+      <p class="text-md text-gray-500 dark:text-gray-200 mb-5">
         Add your team mates or collaborators to your organization. Start working
         together
       </p>
@@ -86,11 +87,11 @@
 
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"
-      ><strong>Custom domain</strong></Column
+      ><SectionTitle>Custom domain</SectionTitle></Column
     >
     <Column sm={2} md={6} lg={8}>
       <div class="flex items-center">
-        <p class="mr-3">Add your own domain name</p>
+        <p class="dark:text-white mr-3">Add your own domain name</p>
         <ComingSoon />
       </div>
     </Column>

src/components/Org/Settings/OrgSettings.svelte

@@ -9,6 +9,7 @@
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
   import { currentOrg } from '../../../utils/store/org';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let avatar;
   let loading = false;
@@ -79,7 +80,9 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Organization Profile</strong></Column>
+    <Column sm={2} md={2} lg={4}
+      ><SectionTitle>Organization Profile</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
       <TextField
         label="Organization Name"
@@ -102,16 +105,18 @@
     </Column>
   </Row>
   <!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Theme</strong></Column>
+    <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4>Set your brand</h4>
+      <h4 class="dark:text-white">Set your brand</h4>
     </Column>
   </Row> -->
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Custom Domain</strong></Column>
+    <Column sm={2} md={2} lg={4}
+      ><SectionTitle>Custom Domain</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
-      <h4>Customise your Domain</h4>
+      <h4 class="dark:text-white">Customise your Domain</h4>
-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-gray-500 dark:text-gray-200">
         Create a custom URL so your audience can get to your organization easily
       </p>
       <PrimaryButton
@@ -123,10 +128,10 @@
     </Column>
   </Row>
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Team</strong></Column>
+    <Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4>Set up your website</h4>
+      <h4 class="dark:text-white">Set up your website</h4>
-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-gray-500 dark:text-gray-200">
         Add team mates to your organization so you can both collaborate on
         projects.
       </p>

src/components/Org/Settings/Profile.svelte

@@ -2,6 +2,7 @@
   import { goto } from '@sapper/app';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '../../Form/TextField.svelte';
+  import SectionTitle from '../SectionTitle.svelte';
   import PrimaryButton from '../../PrimaryButton/index.svelte';
   import { VARIANTS } from '../../PrimaryButton/constants';
   import UploadImage from '../../UploadImage/index.svelte';
@@ -82,7 +83,9 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Profile Picture</strong></Column>
+    <Column sm={2} md={2} lg={4}>
+      <SectionTitle>Profile Picture</SectionTitle>
+    </Column>
     <Column sm={2} md={6} lg={8}>
       <UploadImage
         bind:avatar
@@ -92,7 +95,9 @@
     </Column>
   </Row>
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Personal Information</strong></Column>
+    <Column sm={2} md={2} lg={4}>
+      <SectionTitle>Personal Information</SectionTitle>
+    </Column>
     <Column sm={2} md={6} lg={8}>
       <TextField
         label="Full Name"

src/components/Org/Settings/TeamMembers.svelte

@@ -20,6 +20,7 @@
   import { getOrgTeam } from '../../../utils/services/org';
   import { profile } from '../../../utils/store/user';
   import { supabase } from '../../../utils/functions/supabase';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let emailsStr = '';
   let errorMessage = '';
@@ -128,9 +129,11 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
+    <Column sm={2} md={2} lg={4} class="text-lg"
+      ><SectionTitle>Add</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 mb-5">
+      <p class="text-md text-gray-500 dark:text-gray-200 mb-5">
         Add your team mates or collaborators to your organization. Start working
         together
       </p>
@@ -161,7 +164,7 @@
 
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"
-      ><strong>Members</strong></Column
+      ><SectionTitle>Members</SectionTitle></Column
     >
     <Column sm={2} md={6} lg={8}>
       {#if isFetching}
@@ -170,7 +173,7 @@
         {#each $orgTeam as teamMember}
           <div class="flex justify-between items-center mb-5">
             <div class="flex">
-              <p class="text-sm text-gray-500 mr-3">
+              <p class="text-sm text-gray-500 dark:text-gray-200 mr-3">
                 {teamMember.email}
               </p>
               <TextChip

src/components/Org/SideBar.svelte

@@ -13,7 +13,7 @@
   import { profile } from '../../utils/store/user';
 
   let orgSiteName = '';
-  let activeClass = 'bg-gray-200';
+  let activeClass = 'bg-gray-200 dark:bg-gray-500';
   let { page } = stores();
 
   function isActive(pagePath, itemPath) {
@@ -30,7 +30,7 @@
   $: orgSiteName = $currentOrg.siteName;
 </script>
 
-<aside class="root bg-gray-100 h-full">
+<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
       {#if $currentOrg.avatar_url}
@@ -53,46 +53,46 @@
       <ul class="my-5">
         <a href="/org/{orgSiteName}" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
               $page.path,
               `/org/${orgSiteName}`
             ) && activeClass}"
           >
             <HomeIcon />
-            <p class="ml-2">Home</p>
+            <p class="dark:text-white ml-2">Home</p>
           </li>
         </a>
         <a href="/org/{orgSiteName}/courses" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
               $page.path,
               `/org/${orgSiteName}/courses`
             ) && activeClass}"
           >
             <CourseIcon />
-            <p class="ml-2">Courses</p>
+            <p class="dark:text-white ml-2">Courses</p>
           </li>
         </a>
         <a href="/org/{orgSiteName}/site" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
               $page.path,
               `/org/${orgSiteName}/site`
             ) && activeClass}"
           >
             <SiteSettingsIcon />
-            <p class="ml-2">Site settings</p>
+            <p class="dark:text-white ml-2">Site settings</p>
           </li>
         </a>
         <a href="/org/{orgSiteName}/audience" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
               $page.path,
               `/org/${orgSiteName}/audience`
             ) && activeClass}"
           >
             <AudienceIcon />
-            <p class="ml-2">Audience</p>
+            <p class="dark:text-white ml-2">Audience</p>
           </li>
         </a>
       </ul>
@@ -100,14 +100,16 @@
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
       <a href="/help" class="text-black">
-        <li class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200">
+        <li
-          <Help />
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
-          <p class="ml-2">Help</p>
+        >
+          <Help class="carbon-icon" />
+          <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
       <a href="/org/{orgSiteName}/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
             $page.path,
             `/org/${orgSiteName}/settings`
           ) && activeClass}"
@@ -118,7 +120,7 @@
             width="w-7"
             height="h-7"
           />
-          <p class="ml-2">Settings</p>
+          <p class="dark:text-white ml-2">Settings</p>
         </li>
       </a>
     </ul>

src/components/OrgSelector/OrgSelector.svelte

@@ -39,7 +39,7 @@
       open = !open;
     }}
   >
-    <p class="text-lg font-bold">{$currentOrg.name}</p>
+    <p class="dark:text-white text-lg font-bold">{$currentOrg.name}</p>
     <CaretSortIcon class="ml-2" />
   </div>
   <Popover bind:open closeOnOutsideClick align="bottom-left">

src/components/PageBody/index.svelte

@@ -9,7 +9,7 @@
 <div class="root mt-4 mx-auto {width} {className} relative {padding}">
   {#if $$slots.header}
     <div
-      class="head flex items-center justify-between sticky right-0 w-full px-3"
+      class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3"
     >
       <slot name="header" />
     </div>
@@ -26,6 +26,5 @@
   .head {
     top: 0px;
     z-index: 1;
-    background-color: #fafbfc;
   }
 </style>

src/components/PageNav/index.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <div
-  class="header flex items-center justify-between {!disableSticky &&
+  class="header dark:bg-gray-700 flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >
@@ -28,7 +28,7 @@
     {#if isTitleEditable}
       {#if !enterEditTitleMode}
         <h4
-          class="title editable-title hover:bg-gray-100 px-3 rounded-md overflow-ellipsis"
+          class="title editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis"
           on:click={() => (enterEditTitleMode = true)}
         >
           {title}
@@ -49,7 +49,7 @@
     {:else}
       <div class="flex items-center" {title}>
         <slot name="image" />
-        <h4 class="title">{title}</h4>
+        <h4 class="dark:text-white title">{title}</h4>
       </div>
     {/if}
   {/if}
@@ -79,7 +79,6 @@
   .header {
     border-bottom: 1px solid var(--border-color);
     min-height: 61px;
-    background-color: #fff;
     z-index: 1;
   }
 

src/components/PrimaryButton/constants.js

@@ -15,7 +15,7 @@ export const VARIANTS_CLASS = {
   [VARIANTS.OUTLINED]:
     'border border-blue-700 hover:border-black-300 hover:bg-blue-200 text-black',
   [VARIANTS.NONE]:
-    'border-none hover:border-black-300 hover:bg-gray-200 text-black',
+    'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]:
     'text-black hover:border border-t-0 border-l-0 border-r-0 border-black-300',
   [VARIANTS.TEXT_DANGER]:

src/components/Question/CheckboxQuestion/index.svelte

@@ -70,7 +70,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>
@@ -82,7 +82,7 @@
   <div class="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"

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"

src/components/Question/TextareaQuestion/index.svelte

@@ -45,7 +45,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>
@@ -56,7 +56,7 @@
 
   <div class="ml-4">
     {#if disabled}
-      <div class="bg-gray-200 p-5 rounded-md mb-3">
+      <div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
         {@html marked(defaultValue)}
       </div>
     {:else}

src/components/QuestionContainer/index.svelte

@@ -29,7 +29,7 @@
 
 <div
   bind:this={ref}
-  class="bg-white border {hasError
+  class="bg-white dark:bg-gray-800 border {hasError
     ? 'border-red-700'
     : 'border-gray hover:border-blue-700'} rounded-md mb-6 relative root"
 >
@@ -49,7 +49,7 @@
   {#if typeof points !== 'undefined'}
     <div class="border-gray border-t-2 border-r-0 border-b-0 border-l-0 p-2">
       <div class="flex items-center w-40">
-        <p class="text-sm mr-2">Points:</p>
+        <p class="dark:text-white text-sm mr-2">Points:</p>
         <TextField
           placeholder="Points"
           bind:value={points}

src/components/SideBar/index.svelte

@@ -2,19 +2,19 @@
   // your script goes here
   const contributors = [
     {
-      name: "Koskting",
+      name: 'Koskting',
     },
     {
-      name: "Koskting",
+      name: 'Koskting',
     },
     {
-      name: "Koskting",
+      name: 'Koskting',
     },
     {
-      name: "Koskting",
+      name: 'Koskting',
     },
     {
-      name: "Koskting",
+      name: 'Koskting',
     },
   ];
 </script>
@@ -23,7 +23,9 @@
 <div
   class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12"
 >
-  <h4 class="border-b border-gray text-base font-bold pb-1">Самые полезные</h4>
+  <h4 class="dark:text-white border-b border-gray text-base font-bold pb-1">
+    Самые полезные
+  </h4>
   {#each contributors as contributor}
     <a class="flex pt-3" href="/{contributor.name}">
       <img

src/components/Snackbar/index.svelte

@@ -56,7 +56,7 @@
         {:else}
           <Information24 class="carbon-icon" />
         {/if}
-        <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+        <p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
       </div>
 
       <CloseButton onClick={handleClose} contained={true} color="text-white" />

src/components/Tabs/index.svelte

@@ -11,8 +11,8 @@
       <button
         class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
         tab.value
-          ? 'text-black font-bold bg-gray-100'
+          ? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
-          : 'bg-gray-200 text-gray'} focus:outline-none w-40 text-left p-3"
+          : 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
         on:click={onChange(tab.value)}
       >
         {tab.label}

src/components/Tailwindcss.svelte

@@ -57,6 +57,17 @@
       line-height: 1.25 !important;
     }
   }
+  .dark .prose {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      color: #fff;
+    }
+  }
 
   code {
     white-space: pre-wrap;
@@ -74,4 +85,8 @@
   .success :global(svg.carbon-icon) {
     fill: green;
   }
+
+  .dark :global(svg.carbon-icon) {
+    fill: #fff;
+  }
 </style>

src/components/TimeTable/index.svelte

@@ -1,13 +1,52 @@
 <script>
-  import Star24 from "carbon-icons-svelte/lib/Star24";
+  import Star24 from 'carbon-icons-svelte/lib/Star24';
-  import StarFilled24 from "carbon-icons-svelte/lib/StarFilled24";
+  import StarFilled24 from 'carbon-icons-svelte/lib/StarFilled24';
-  import Link24 from "carbon-icons-svelte/lib/Link24";
+  import Link24 from 'carbon-icons-svelte/lib/Link24';
-  import Row from "./Row.svelte";
+  import Row from './Row.svelte';
-  import data from "./data";
+  import data from './data';
 
   let starred = false;
 </script>
 
+<div class="sub-header flex justify-between mb-2">
+  <h4 class="dark:text-white title">АИ-153</h4>
+  <div class="flex justify-evenly items-center">
+    {#if starred}
+      <StarFilled24
+        class="clickables mr-5 text-sm"
+        on:click={() => (starred = !starred)}
+        focusable="true"
+        tabindex={0}
+      />
+    {:else}
+      <Star24
+        class="clickables mr-5 text-sm"
+        on:click={() => (starred = !starred)}
+        focusable="true"
+        tabindex="{1}/"
+      />
+    {/if}
+
+    <Link24 class="clickables mr-5 text-sm" />
+  </div>
+</div>
+<div class="container">
+  <div class="col">
+    <div class="colItem">Пн</div>
+    <div class="colItem">Вт</div>
+    <div class="colItem">Ср</div>
+    <div class="colItem">Чт</div>
+    <div class="colItem">Пя</div>
+  </div>
+  <div class="table">
+    <Row items={data.slice(0, 4)} />
+    <Row items={data.slice(4, 8)} />
+    <Row current items={data.slice(8, 12)} />
+    <Row items={data.slice(12, 16)} />
+    <Row items={data.slice(16, 20)} />
+  </div>
+</div>
+
 <style>
   .sub-header {
     padding: 10px 20px;
@@ -52,40 +91,3 @@
     cursor: pointer;
   }
 </style>
-
-<div class="sub-header flex justify-between mb-2">
-  <h4 class="title">АИ-153</h4>
-  <div class="flex justify-evenly items-center">
-    {#if starred}
-      <StarFilled24
-        class="clickables mr-5 text-sm"
-        on:click={() => (starred = !starred)}
-        focusable="true"
-        tabindex={0} />
-    {:else}
-      <Star24
-        class="clickables mr-5 text-sm"
-        on:click={() => (starred = !starred)}
-        focusable="true"
-        tabindex="{1}/" />
-    {/if}
-
-    <Link24 class="clickables mr-5 text-sm" />
-  </div>
-</div>
-<div class="container">
-  <div class="col">
-    <div class="colItem">Пн</div>
-    <div class="colItem">Вт</div>
-    <div class="colItem">Ср</div>
-    <div class="colItem">Чт</div>
-    <div class="colItem">Пя</div>
-  </div>
-  <div class="table">
-    <Row items={data.slice(0, 4)} />
-    <Row items={data.slice(4, 8)} />
-    <Row current items={data.slice(8, 12)} />
-    <Row items={data.slice(12, 16)} />
-    <Row items={data.slice(16, 20)} />
-  </div>
-</div>

src/components/UserCard/index.svelte

@@ -1,17 +1,17 @@
 <script>
-  import Icon from "svelte-awesome/components/Icon.svelte";
+  import Icon from 'svelte-awesome/components/Icon.svelte';
-  import { faTelegram } from "@fortawesome/free-brands-svg-icons";
+  import { faTelegram } from '@fortawesome/free-brands-svg-icons';
-  import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+  import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 
   export let avatarUrl =
-    "https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg";
+    'https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg';
-  export let name = "Sarah Dayan";
+  export let name = 'Sarah Dayan';
-  export let title = "Staff Engineer, Algolia";
+  export let title = 'Staff Engineer, Algolia';
   export let mailLink;
   export let telegramLink;
 </script>
 
-<figure class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4">
+<figure class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4">
   <img
     class="w-32 h-32 rounded-full mx-auto"
     src={avatarUrl}
@@ -22,7 +22,7 @@
   <div class="pt-6 text-center space-y-4">
     <div class="description font-medium flex flex-col justify-around">
       <div class="text-cyan-600">{name}</div>
-      <div class="text-gray-500">{title}</div>
+      <div class="text-gray-500 dark:text-gray-200">{title}</div>
     </div>
   </div>
   {#if telegramLink && mailLink}

src/routes/_error.svelte

@@ -25,7 +25,7 @@
 <div class="w-3/5 h-3/5 m-auto flex flex-col items-center justify-center">
   <h1>Opps 😢</h1>
   <h2>Something wen't wrong and it's our fault.</h2>
-  <p>Please screenshot this page and send to me.</p>
+  <p class="dark:text-white">Please screenshot this page and send to me.</p>
   <pre>
     {errorContent}
   </pre>
@@ -34,7 +34,7 @@
 <!-- {#if dev && error.stack}
   <h1>{status}</h1>
 
-  <p>{error.message}</p>
+  <p class="dark:text-white">{error.message}</p>
   <pre>{error.stack}</pre>
 {/if} -->
 <style>

src/routes/_layout.svelte

@@ -27,6 +27,8 @@
   import { isMobile } from '../utils/store/useMobile';
   import { ROUTES_TO_HIDE_NAV, ROUTE } from '../utils/constants/routes';
   import { getOrganizations } from '../utils/services/org';
+  import { toggleBodyByTheme } from '../utils/functions/app';
+  import { appStore } from '../utils/store/app';
 
   export let segment;
   export let config;
@@ -155,6 +157,10 @@
       }
     );
 
+    // Update theme - dark or light mode
+    $appStore.isDark = localStorage.getItem('theme') === 'dark';
+    toggleBodyByTheme($appStore.isDark);
+
     return () => {
       authListener.unsubscribe();
     };
@@ -185,7 +191,7 @@
 <!-- <Nav {segment} /> -->
 <Snackbar />
 
-<main>
+<main class="dark:bg-gray-800">
   {#if $preloading && $delayedPreloading}
     <Backdrop>
       <Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
@@ -203,7 +209,7 @@
     {#if isOrgPage($page.path)}
       <div class="org-root w-full flex items-center justify-between">
         <OrgSideBar />
-        <div class="org-slot bg-white">
+        <div class="org-slot bg-white dark:bg-gray-800">
           <slot />
         </div>
       </div>
@@ -252,4 +258,8 @@
   :global(.bx--data-table-container) {
     width: 100%;
   }
+
+  :global(.dark svg.dark path) {
+    fill: #fff;
+  }
 </style>

src/routes/admin.svelte

@@ -84,11 +84,11 @@
   <title>Admin Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<div class="root w-full py-10 bg-gray-100">
+<div class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
   <div class="flex items-center justify-evenly max-w-6xl m-auto">
     {#each boxes as box}
       <div
-        class="bg-white rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
+        class="bg-white dark:bg-gray-800 rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
       >
         {#if box.icon === 'students'}
           <UserSpeaker32 class="carbon-icon" />
@@ -97,43 +97,45 @@
         {:else if box.icon === 'courses'}
           <Book32 class="carbon-icon" />
         {/if}
-        <p class="text-xl">{box.label}</p>
+        <p class="dark:text-white text-xl">{box.label}</p>
-        <h3 class="text-3xl m-0 my-2">{box.value}</h3>
+        <h3 class="dark:text-white text-3xl m-0 my-2">{box.value}</h3>
       </div>
     {/each}
   </div>
 
   <div class="flex items-center justify-evenly mt-16">
-    <div class="table rounded-md bg-white shadow-md">
+    <div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
       <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-3 pl-2 text-lg">Outstanding students</h3>
+        <h3 class="dark:text-white m-0 py-3 pl-2 text-lg">
+          Outstanding students
+        </h3>
       </div>
 
       {#each topStudents as topStudent, index}
         <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
         >
           <span class="mr-2">{index + 1}</span>
-          <p class="text-lg">{topStudent.name}</p>
+          <p class="dark:text-white text-lg">{topStudent.name}</p>
           <span class="flex-grow" />
-          <p class="text-lg">{topStudent.score}</p>
+          <p class="dark:text-white text-lg">{topStudent.score}</p>
         </div>
       {/each}
     </div>
 
-    <div class="table rounded-md bg-white shadow-md">
+    <div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
       <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-3 pl-2 text-lg">Top rated courses</h3>
+        <h3 class="dark:text-white m-0 py-3 pl-2 text-lg">Top rated courses</h3>
       </div>
 
       {#each topCourses as topCourse, index}
         <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
         >
           <span class="mr-2">{index + 1}</span>
-          <p class="text-lg">{topCourse.title}</p>
+          <p class="dark:text-white text-lg">{topCourse.title}</p>
           <span class="flex-grow" />
-          <p class="text-lg">{topCourse.rating}</p>
+          <p class="dark:text-white text-lg">{topCourse.rating}</p>
         </div>
       {/each}
     </div>

src/routes/ask.svelte

@@ -49,7 +49,7 @@
 
       {#if facultyFilterOpened}
         <div
-          class="w-48 bg-white border border-grey rounded-lg mt-2 py-3 absolute"
+          class="w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
         >
           {#each faculties as faculty}
             <div class="block px-4 py-3 border-b">

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 class="dark:text-white font-semibold">
-              <p>
+                {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="dark:text-white text-lg w-2/4">Name</p>
-        <p class="text-lg w-1/4 ">Role</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">

src/routes/dashboard.svelte

@@ -136,7 +136,7 @@
   <title>Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<section class="root w-full py-10 bg-gray-100">
+<section class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
   <div class="calendar-root flex mx-2">
     {#if !$isMobile}
       <div id="calendar">
@@ -188,7 +188,7 @@
                 <span class="text-md ml-2">🔒</span>
               {/if}
             </a>
-            <p class="text-grey text-sm flex items-center">
+            <p class="dark:text-white text-grey text-sm flex items-center">
               <a
                 class="underline text-blue-700 my-2"
                 href="/courses/{lessonData.course_id}"
@@ -212,7 +212,9 @@
           {/if}
         </div>
       {:else}
-        <p class="flex items-center justify-center w-full no-data">
+        <p
+          class="dark:text-white flex items-center justify-center w-full no-data"
+        >
           No lesson on this day
         </p>
       {/each}

src/routes/discussions.svelte

@@ -177,7 +177,7 @@
     <div class="discussion-box">
       <Vote value={discussion.votes} />
       <div class="discussion-topic-author">
-        <h4>
+        <h4 class="dark:text-white">
           <a rel="prefetch" href="discussions/{discussion.id}"
             >{discussion.title}</a
           >

src/routes/discussions/[id].svelte

@@ -45,8 +45,12 @@
           class="block rounded-full"
           src="https://picsum.photos/32/32/?random"
         />
-        <p class="ml-2 text-sm">{discussion.author.name}</p>
+        <p class="dark:text-white ml-2 text-sm">{discussion.author.name}</p>
-        <p class="ml-2 text-sm text-gray-500">12h ago</p>
+        <p
+          class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
+        >
+          12h ago
+        </p>
       </a>
     </header>
     <section class="prose prose-sm sm:prose p-2">
@@ -75,8 +79,12 @@
               height="20"
               src={comment.avatar}
             />
-            <p class="ml-2 text-sm">{comment.name}</p>
+            <p class="dark:text-white ml-2 text-sm">{comment.name}</p>
-            <p class="ml-2 text-sm text-gray-500">12h ago</p>
+            <p
+              class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
+            >
+              12h ago
+            </p>
           </a>
 
           <CheckmarkOutline20 />

src/routes/forgot.svelte

@@ -61,8 +61,8 @@
   {#if success}
     <div class="mt-4 w-full flex items-center justify-center flex-col">
       <EmailSentIcon />
-      <h3 class="text-xl font-semibold my-3">Email Sent!</h3>
+      <h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
-      <p class="text-md mb-6 text-center">
+      <p class="dark:text-white text-md mb-6 text-center">
         We have sent a confirmation email to <span class="text-blue-700"
           >{fields.email}</span
         >. Kindly check your inbox to reset password or spam to reset your
@@ -80,8 +80,12 @@
     </div>
   {:else}
     <div class="mt-4 w-full">
-      <h3 class="text-xl font-semibold my-3">Forgot Password</h3>
+      <h3 class="dark:text-white text-xl font-semibold my-3">
-      <p class="text-sm mb-6">We will send you a reset link to your email</p>
+        Forgot Password
+      </h3>
+      <p class="dark:text-white text-sm mb-6">
+        We will send you a reset link to your email
+      </p>
       <TextField
         label="Your email"
         bind:value={fields.email}
@@ -94,7 +98,7 @@
         errorMessage={errors.email}
       />
       {#if submitError}
-        <p class="text-sm text-red-500">{submitError}</p>
+        <p class="dark:text-white text-sm text-red-500">{submitError}</p>
       {/if}
     </div>
 

src/routes/index.svelte

@@ -65,10 +65,10 @@
     />
   -->
   <div>
-    <h3 class="text-4xl text-center">
+    <h3 class="dark:text-white text-4xl text-center">
       Classroom<span class="text-blue-700">IO</span>
     </h3>
-    <p class="text-lg text-center">
+    <p class="dark:text-white text-lg text-center">
       The operating system for classroooms of the future 🚀🚀🚀.
     </p>
   </div>
@@ -76,7 +76,9 @@
   <form on:submit|preventDefault={handleSubmit} class="my-4">
     <div class="flex items-center flex-col sm:flex-row">
       {#if success}
-        <p>You have been added successfully. Thanks for joining.</p>
+        <p class="dark:text-white">
+          You have been added successfully. Thanks for joining.
+        </p>
       {:else}
         <TextField
           bind:value={email}
@@ -97,9 +99,9 @@
   <div class="flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="box m-3 bg-white rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
+        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
       >
-        <h3 class="text-3xl">
+        <h3 class="dark:text-white text-3xl">
           {#if index === 0}
             <FlowStreamReference32 class="carbon-icon" />
           {:else if index === 1}
@@ -109,7 +111,7 @@
           {/if}
           {area.title}
         </h3>
-        <p>{area.description}</p>
+        <p class="dark:text-white">{area.description}</p>
       </div>
     {/each}
   </div>

src/routes/login.svelte

@@ -58,7 +58,7 @@
   bind:formRef
 >
   <div class="mt-4 w-full">
-    <p class="text-lg font-semibold mb-6">Welcome back</p>
+    <p class="dark:text-white text-lg font-semibold mb-6">Welcome back</p>
     <TextField
       label="Your email"
       bind:value={fields.email}
@@ -81,7 +81,7 @@
       errorMessage={errors.password}
     />
     {#if submitError}
-      <p class="text-sm text-red-500">{submitError}</p>
+      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
     {/if}
     <div class="w-full text-right">
       <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>

src/routes/onboarding.svelte

@@ -193,15 +193,15 @@
             width="50"
             data-atf="1"
           />
-          <h4 class="text-xl">ClassroomIO</h4>
+          <h4 class="dark:text-white text-xl">ClassroomIO</h4>
         </div>
 
         <!-- Loggedin Email -->
         <div
-          class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 rounded-2xl border border-gray-300"
+          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"
         >
           <UserProfileIcon />
-          <p class="text-sm ml-2">{$profile.email}</p>
+          <p class="dark:text-white text-sm ml-2">{$profile.email}</p>
         </div>
       </div>
 
@@ -252,14 +252,17 @@
               <div
                 class="w-full flex items-start flex-col justify-between mb-10"
               >
-                <label for="text-field" class="m-0 text-lg font-normal mb-3">
+                <label
+                  for="text-field"
+                  class="dark:text-white m-0 text-lg font-normal mb-3"
+                >
                   What brings you to ClassroomIO?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each educatorGoals as goal}
                   <label
-                    class="w-full inline-flex items-center mb-1 font-light"
+                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
                   >
                     <input
                       type="radio"
@@ -273,20 +276,25 @@
                 {/each}
                 <!-- Goal: Error message -->
                 {#if errors.goal}
-                  <p class="text-sm text-red-500">{errors.goal}</p>
+                  <p class="dark:text-white text-sm text-red-500">
+                    {errors.goal}
+                  </p>
                 {/if}
               </div>
 
               <!-- Source Question -->
               <div class="w-full flex items-start flex-col justify-between">
-                <label for="text-field" class="m-0 text-lg font-normal mb-3">
+                <label
+                  for="text-field"
+                  class="dark:text-white m-0 text-lg font-normal mb-3"
+                >
                   How did you hear about us?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each sources as source}
                   <label
-                    class="w-full inline-flex items-center mb-1 font-light"
+                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
                   >
                     <input
                       type="radio"
@@ -300,7 +308,9 @@
                 {/each}
                 <!-- Goal: Error message -->
                 {#if errors.source}
-                  <p class="text-sm text-red-500">{errors.source}</p>
+                  <p class="dark:text-white text-sm text-red-500">
+                    {errors.source}
+                  </p>
                 {/if}
               </div>
             </div>

src/routes/org/[slug]/audience.svelte

@@ -17,7 +17,7 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="text-3xl font-bold">Audience</h1>
+      <h1 class="dark:text-white text-3xl font-bold">Audience</h1>
       <PrimaryButton
         label="Export"
         onClick={exportAudience}

src/routes/org/[slug]/courses.svelte

@@ -68,7 +68,7 @@
 <section class="w-full max-w-7xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="text-3xl font-bold">Courses</h1>
+      <h1 class="dark:text-white text-3xl font-bold">Courses</h1>
       <PrimaryButton
         label="Create Course"
         onClick={() => ($createCourseModal.open = true)}

src/routes/org/[slug]/index.svelte

@@ -211,7 +211,7 @@
 
 <div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
-    <h1 class="text-3xl font-bold">Dashboard</h1>
+    <h1 class="dark:text-white text-3xl font-bold">Dashboard</h1>
     <PrimaryButton label="Create Course" onClick={createCourse} />
   </div>
 
@@ -220,8 +220,8 @@
       <div
         class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5"
       >
-        <p class="mb-2 text-sm">{box.label}</p>
+        <p class="dark:text-white mb-2 text-sm">{box.label}</p>
-        <p class="text-xl font-bold">{box.value}</p>
+        <p class="dark:text-white text-xl font-bold">{box.value}</p>
       </div>
     {/each}
   </div>
@@ -229,7 +229,7 @@
   <div class="flex flex-wrap">
     <!-- Your Schedule -->
     <div>
-      <p class="font-bold mb-7">Your Schedule</p>
+      <p class="dark:text-white font-bold mb-7">Your Schedule</p>
       <div class="rounded border w-2/5 border-gray-200 mr-5 schedule-box">
         {#if !$isMobile}
           <div id="calendar" class="flex justify-center mt-5">
@@ -253,7 +253,7 @@
             </Datepicker>
           </div>
         {:else}
-          <p class="font-bold m-5">
+          <p class="dark:text-white font-bold m-5">
             {formatDate($store?.selected)}
           </p>
         {/if}
@@ -276,7 +276,7 @@
                   <span class="text-md ml-2">🔒</span>
                 {/if}
               </a>
-              <p class="text-grey text-sm flex items-center">
+              <p class="dark:text-white text-grey text-sm flex items-center">
                 <a
                   class="underline text-blue-700 my-2"
                   href="/courses/{lessonData.course_id}"
@@ -300,7 +300,9 @@
             {/if}
           </div>
         {:else}
-          <p class="flex items-center justify-center w-full no-data">
+          <p
+            class="dark:text-white flex items-center justify-center w-full no-data"
+          >
             No lesson on this day
           </p>
         {/each}
@@ -309,22 +311,22 @@
 
     <!-- Your Activities -->
     <div>
-      <p class="font-bold mb-7">Your Activities</p>
+      <p class="dark:text-white font-bold mb-7">Your Activities</p>
       <div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
         {#each activities as activity}
           <div class="flex mb-3 pb-3 border-b border-gray-200">
             <Avatar src={activity.avatar} name="avatar" />
             <div class="ml-2 flex">
               <div class="mr-2">
-                <p>{activity.name}</p>
+                <p class="dark:text-white">{activity.name}</p>
-                <p class="mb-2 mt-1">
+                <p class="dark:text-white mb-2 mt-1">
                   {activity.description}
                 </p>
                 <a href={activity.link}>View</a>
               </div>
 
               <div>
-                <p>{activity.time}</p>
+                <p class="dark:text-white">{activity.time}</p>
               </div>
             </div>
           </div>

src/routes/org/[slug]/settings/domains.svelte

@@ -10,11 +10,11 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <a
-      class="text-gray-500 text-md"
+      class="text-gray-500 dark:text-gray-200 text-md"
       href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
-      <h1 class="text-3xl font-bold">Custom domain</h1>
+      <h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
     </div>
 
     <Domains />

src/routes/org/[slug]/settings/index.svelte

@@ -9,7 +9,7 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="text-3xl font-bold">Settings</h1>
+      <h1 class="dark:text-white text-3xl font-bold">Settings</h1>
     </div>
 
     <OrgSettings />

src/routes/org/[slug]/settings/teams.svelte

@@ -10,11 +10,11 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <a
-      class="text-gray-500 text-md"
+      class="text-gray-500 dark:text-gray-200 text-md"
       href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
-      <h1 class="text-3xl font-bold">Team members</h1>
+      <h1 class="dark:text-white text-3xl font-bold">Team members</h1>
     </div>
 
     <TeamMembers />

src/routes/people.svelte

@@ -38,7 +38,7 @@
     <div
       class="flex items-center justify-between {borderBottom} border-blue-700"
     >
-      <h3 class="text-3xl text-blue-700">Teachers</h3>
+      <h3 class="dark:text-white text-3xl text-blue-700">Teachers</h3>
       <IconButton
         toolTipProps={{ title: 'Add', direction: 'right' }}
         onClick={addTeacher}
@@ -54,7 +54,7 @@
           borderBottom} border-gray-300"
       >
         <Avatar src={teacher.avatar} name={teacher.name} />
-        <p class="ml-2">{teacher.name}</p>
+        <p class="dark:text-white ml-2">{teacher.name}</p>
       </div>
     {/each}
   </div>
@@ -63,7 +63,7 @@
     <div
       class="flex items-center justify-between {borderBottom} border-blue-700"
     >
-      <h3 class="text-3xl text-blue-700">Students</h3>
+      <h3 class="dark:text-white text-3xl text-blue-700">Students</h3>
       <IconButton
         toolTipProps={{ title: 'Add', direction: 'right' }}
         onClick={addStudent}
@@ -79,7 +79,7 @@
           borderBottom} border-gray-300"
       >
         <Avatar src={student.avatar} name={student.name} />
-        <p class="ml-2">{student.name}</p>
+        <p class="dark:text-white ml-2">{student.name}</p>
       </div>
     {/each}
   </div>

src/routes/profile/[id].svelte

@@ -171,23 +171,23 @@
           />
         {/if}
       {:else}
-        <h3 class="text-xl">{currentProfile.username}</h3>
+        <h3 class="dark:text-white text-xl">{currentProfile.username}</h3>
       {/if}
     </div>
 
     <div class="flex-grow" />
     <div class="flex-grow flex flex-wrap mx-3 w-3/5">
       <div class="mb-3 w-full">
-        <h3 class="font-bold text-md m-0">Organizations</h3>
+        <h3 class="dark:text-white font-bold text-md m-0">Organizations</h3>
-        <p class="text-gray-500 text-sm">
+        <p class="dark:text-white text-gray-500 dark:text-gray-200 text-sm">
           This are the organizations you work at
         </p>
 
         <div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
-          <h4 class="m-0 font-normal">
+          <h4 class="dark:text-white m-0 font-normal">
             <a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
           </h4>
-          <p class="text-gray-500">
+          <p class="dark:text-white text-gray-500 dark:text-gray-200">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam
             tenetur magnam. Alias cumque quaerat expedita dolores placeat
             laboriosam culpa, suscipit veritatis adipisci eius magni obcaecati.
@@ -205,12 +205,12 @@
         </div>
 
         <div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
-          <h4 class="m-0 font-normal">
+          <h4 class="dark:text-white m-0 font-normal">
             <a class="text-blue-700 font-bold" href="/courses">
               Climate Change Group
             </a>
           </h4>
-          <p class="text-gray-500">
+          <p class="dark:text-white text-gray-500 dark:text-gray-200">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi
             autem quo possimus illum consequuntur repudiandae nobis error, porro
           </p>
@@ -241,7 +241,7 @@
       <div>
         <Search32 />
       </div>
-      <h3 class="text-xxl">Profile not found</h3>
+      <h3 class="dark:text-white text-xxl">Profile not found</h3>
     </Box> -->
   {/if}
 </section>

src/routes/reset.svelte

@@ -71,8 +71,8 @@
   bind:formRef
 >
   <div class="mt-4 w-full">
-    <h3 class="text-xl font-semibold my-3">New Password</h3>
+    <h3 class="dark:text-white text-xl font-semibold my-3">New Password</h3>
-    <p class="text-sm mb-6">Enter your new password details</p>
+    <p class="dark:text-white text-sm mb-6">Enter your new password details</p>
     <TextField
       label="Your Password"
       bind:value={fields.password}
@@ -97,7 +97,7 @@
       isRequired
     />
     {#if submitError}
-      <p class="text-sm text-red-500">{submitError}</p>
+      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
     {/if}
   </div>
 

src/routes/signup.svelte

@@ -74,7 +74,9 @@
   bind:formRef
 >
   <div class="mt-4 w-full">
-    <p class="text-lg font-semibold mb-6">Create a free account</p>
+    <p class="dark:text-white text-lg font-semibold mb-6">
+      Create a free account
+    </p>
     <!-- <TextField
       label="Full Name"
       bind:value={fields.name}
@@ -122,7 +124,7 @@
       isRequired
     />
     {#if submitError}
-      <p class="text-sm text-red-500">{submitError}</p>
+      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
     {/if}
   </div>
 

src/utils/functions/app.js

@@ -0,0 +1,7 @@
+export function toggleBodyByTheme(isDark) {
+  if (isDark) {
+    document.body.className = document.body.className.concat(' ', 'dark');
+  } else {
+    document.body.className = document.body.className.replace('dark', '');
+  }
+}

src/utils/store/app.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export const appStore = writable({
+  isDark: false,
+});

tailwind.config.js

@@ -1,19 +1,17 @@
 module.exports = {
+  darkMode: 'class',
   purge: {
-    mode: "all",
+    mode: 'all',
-    content: ["./**/**/*.html", "./**/**/*.svelte"],
+    content: ['./**/**/*.html', './**/**/*.svelte'],
 
     options: {
-      whitelistPatterns: [/svelte-/]
+      whitelistPatterns: [/svelte-/],
-    }
+    },
   },
 
   theme: {
-    extend: {}
+    extend: {},
   },
   variants: {},
-  plugins: [
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
-    require("@tailwindcss/typography"),
-    require('@tailwindcss/forms')
-  ]
 };