CLASSROOMIO-T-127: Theming configuration

CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


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


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Navigation/app.svelte

@@ -17,7 +17,7 @@
   export let navClass = '';
   export let isCoursePage = false;
 
-  function toggleTheme() {
+  function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
     toggleBodyByTheme($appStore.isDark);
@@ -36,7 +36,9 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-700">
+<nav
+  class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
+>
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       {#if isCoursePage}
@@ -66,7 +68,7 @@
       <NotificationIcon size={20} class="text-white mr-2" />
     </li>
     <li>
-      <IconButton size="small" onClick={toggleTheme}>
+      <IconButton size="small" onClick={toggleDarkMode}>
         {#if $appStore.isDark}
           <Sun size={16} class="text-white" />
         {:else}
@@ -100,21 +102,6 @@
     font-weight: 700;
   }
 
-  /* [aria-current] {
-    color: var(--main-primary-color);
-    position: relative;
-    display: inline-block;
-  }
-  [aria-current]::after {
-    position: absolute;
-    content: '';
-    width: calc(100% - 3em);
-    height: 2px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -17px;
-  } */
-
   @media only screen and (max-width: 1002px) {
     nav.hide {
       display: none;

src/lib/components/Navigation/lms.svelte

@@ -11,7 +11,7 @@
 
   export let navClass = '';
 
-  function toggleTheme() {
+  function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
     toggleBodyByTheme($appStore.isDark);
@@ -21,7 +21,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
   <ul class="flex w-full items-center">
     <div class="">
       <a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
@@ -35,7 +35,7 @@
       <NotificationIcon size={20} class="text-white mr-2" />
     </li>
     <li>
-      <IconButton size="small" onClick={toggleTheme}>
+      <IconButton size="small" onClick={toggleDarkMode}>
         {#if $appStore.isDark}
           <SunIcon size={16} class="text-white" />
         {:else}