Merge pull request #789 from epfml/387-emmanuel-dark-mode

Add dark mode feature
epfml · Oct 7, 2024 · f68b6a3 · f68b6a3
2 parents fa29951 + 29aaf86
commit f68b6a3
Show file tree

Hide file tree

Showing 33 changed files with 207 additions and 69 deletions.
diff --git a/webapp/src/assets/svg/MoonIcon.vue b/webapp/src/assets/svg/MoonIcon.vue
@@ -5,6 +5,7 @@
     stroke="currentColor"
     :class="customClass"
     :viewBox="viewBox"
+    stroke-width="2" 
   >
     <path
       stroke-linecap="round"
@@ -19,7 +20,7 @@ export default {
   name: 'MoonIcon',
   props: {
     customClass: {
-      default: 'w-6 h-6',
+      default: 'bi bi-info-circle w-7 h-7',
       type: String
     },
     viewBox: { default: '0 0 24 24', type: String }

diff --git a/webapp/src/assets/svg/SunIcon.vue b/webapp/src/assets/svg/SunIcon.vue
@@ -0,0 +1,28 @@
+<template>
+  <!-- This SVG came from https://tablericons.com/, a website that provides open source svg -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      :class="customClass"
+      :viewBox="viewBox"
+      stroke-width="2" 
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+        <path d="M6 6h3.5l2.5 -2.5l2.5 2.5h3.5v3.5l2.5 2.5l-2.5 2.5v3.5h-3.5l-2.5 2.5l-2.5 -2.5h-3.5v-3.5l-2.5 -2.5l2.5 -2.5z" />
+    </svg>
+  </template>
+  <script lang="ts">
+  export default {
+    name: 'SunIcon',
+    props: {
+      customClass: {
+        default: 'w-8 h-8',
+        type: String
+      },
+      viewBox: { default: '0 0 24 24', type: String }
+    }
+  }
+  </script>
+
diff --git a/webapp/src/components/App.vue b/webapp/src/components/App.vue
@@ -8,6 +8,8 @@
         antialiased
         text-slate-900
         bg-slate-100
+        dark:bg-slate-900
+        dark:text-slate-100
       "
     >
       <!-- Sidebar -->
@@ -18,7 +20,9 @@
           z-20
           flex flex-shrink-0
           bg-white
+          dark:bg-slate-800
           border-r
+          dark:border-slate-900
           md:static
           focus:outline-none
         "

diff --git a/webapp/src/components/containers/BaseLayout.vue b/webapp/src/components/containers/BaseLayout.vue
@@ -4,7 +4,7 @@
       <slot />
     </main>
 
-    <footer class="flex items-center p-4 bg-white border-t text-slate-500">
+    <footer class="flex items-center p-4 bg-white dark:bg-slate-800 border-t dark:border-slate-900 text-slate-500 dark:text-slate-300">
       <div class="flex mx-auto space-x-6 items-center">
         <a
           class="fa-brands fa-github fa-xl"

diff --git a/webapp/src/components/containers/ButtonsCard.vue b/webapp/src/components/containers/ButtonsCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex flex-col p-7 gap-4 bg-white rounded-lg transition duration-200 group hover:-translate-y-1 hover:scale-[101%] hover:outline hover:outline-2 hover:outline-disco-cyan hover:cursor-pointer"
+    class="flex flex-col p-7 gap-4 bg-white dark:bg-slate-950 rounded-lg transition duration-200 group hover:-translate-y-1 hover:scale-[101%] hover:outline hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-dark-cyan hover:cursor-pointer"
   >
     <div class="flex flex-row">
       <div
-        class="grow text-xl text-disco-blue group-hover:text-disco-cyan"
+        class="grow text-xl text-disco-blue dark:text-slate-300 group-hover:text-disco-cyan dark:group-hover:text-disco-light-cyan"
         :class="`text-${titleAlign}`"
       >
         <slot name="title" />
@@ -13,7 +13,7 @@
       <div><slot name="icon" /></div>
     </div>
 
-    <div class="text-slate-500">
+    <div class="text-slate-500 dark:text-slate-300">
       <slot />
     </div>
 

diff --git a/webapp/src/components/containers/Card.vue b/webapp/src/components/containers/Card.vue
@@ -11,7 +11,7 @@
 export default {
   name: 'CardItem',
   props: {
-    customClass: { default: 'bg-white', type: String }
+    customClass: { default: 'bg-white dark:bg-slate-950', type: String }
   }
 }
 </script>
diff --git a/webapp/src/components/containers/DropdownCard.vue b/webapp/src/components/containers/DropdownCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="grid grid-cols-1 space-y-8 lg:gap-8 rounded-xl group/super">
-    <div class="col-span-1 bg-white rounded-xl">
+    <div class="col-span-1 bg-white dark:bg-slate-950 rounded-xl">
       <IconCardHeader>
         <template #title>
           <button class="focus:outline-none" @click="toggle">
@@ -16,7 +16,7 @@
         </template>
       </IconCardHeader>
 
-      <div v-show="opened" class="text-sm text-slate-500 p-8 border-t">
+      <div v-show="opened" class="text-sm text-slate-500 dark:text-slate-300 p-8 border-t">
         <slot />
       </div>
     </div>

diff --git a/webapp/src/components/containers/IconCard.vue b/webapp/src/components/containers/IconCard.vue
@@ -3,13 +3,13 @@
     class="grid grid-cols-1 space-y-8 lg:gap-8 rounded-xl group/super"
     :class="fillSpace ? 'min-w-full lg:min-w-[42rem]': ''"
     >
-    <div class="col-span-1 bg-white rounded-xl">
+    <div class="col-span-1 bg-white dark:bg-slate-950 rounded-xl">
       <IconCardHeader :title-placement="titlePlacement">
         <template #title> <slot name="title" /> </template>
         <template #icon> <slot name="icon" /> </template>
       </IconCardHeader>
 
-      <div class="text-sm text-slate-500 p-8 border-t">
+      <div class="text-sm text-slate-500 dark:text-slate-200 p-8 border-t">
         <slot />
       </div>
     </div>

diff --git a/webapp/src/components/containers/IconCardHeader.vue b/webapp/src/components/containers/IconCardHeader.vue
@@ -1,7 +1,7 @@
 <template>
       <div class="flex items-center justify-between p-4 md:p-6">
         <h4
-          class="flex w-full text-xl text-disco-blue group-hover/super:text-disco-cyan"
+          class="flex w-full text-xl text-disco-blue dark:text-disco-light-blue group-hover/super:text-disco-cyan"
           :class="`justify-${titlePlacement} text-${titlePlacement}`"
         >
           <slot name="title" />

diff --git a/webapp/src/components/containers/IconCardSmall.vue b/webapp/src/components/containers/IconCardSmall.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex items-center justify-between p-4 bg-white rounded-md"
+    class="flex items-center justify-between p-4 bg-white dark:bg-slate-950 rounded-md"
   >
     <div>
       <h6
-        class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase"
+        class="text-xs font-medium leading-none tracking-wider text-gray-500 dark:text-gray-300 uppercase"
       >
         {{ header }}
       </h6>

diff --git a/webapp/src/components/containers/ImageCard.vue b/webapp/src/components/containers/ImageCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid grid-cols-1 w-full bg-white aspect-square rounded-xl drop-shadow-md hover:drop-shadow-xl transition duration-500 hover:scale-105 opacity-70 hover:opacity-100 shadow hover:shadow-lg"
+    class="grid grid-cols-1 w-full bg-white dark:bg-slate-800 aspect-square rounded-xl drop-shadow-md hover:drop-shadow-xl transition duration-500 hover:scale-105 opacity-70 hover:opacity-100 shadow hover:shadow-lg"
   >
     <div class="grid grid-cols-1 gap-1 text-center content-center p-2 h-16">
       <slot name="title" />

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
@@ -1,7 +1,7 @@
 <template>
   <article
     aria-label="File Upload Model"
-    class="h-full flex flex-col bg-white rounded-lg"
+    class="h-full flex flex-col bg-white dark:bg-slate-950 rounded-lg"
     @drop.prevent
     @dragover.prevent
     @dragenter.prevent
@@ -18,12 +18,12 @@
         @dragleave="onDragLeave"
         @drop="async (e: DragEvent) => await dragFiles(e)"
       >
-        <p class="p-4 text-lg text-disco-blue flex-wrap justify-center">
+        <p class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center">
           <span>Drag and drop the {{ fileType }} or</span>
         </p>
         <label class="mb-6">
           <span
-            class="px-4 py-2 min-w-[8rem] text-lg uppercase text-white bg-disco-cyan rounded duration-200 hover:bg-white hover:outline hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
+            class="px-4 py-2 min-w-[8rem] text-lg uppercase text-white bg-disco-cyan rounded duration-200 hover:bg-white hover:dark:bg-slate-950 hover:outline hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
           >
             select {{ fileType }}
           </span>
@@ -57,7 +57,7 @@
         v-if="$slots.default && files === undefined"
         class="flex justify-center mt-5"
       >
-        <p class="text-slate-500 text-sm">
+        <p class="text-slate-500 dark:text-slate-300 text-sm">
           <span><slot /></span>
         </p>
       </div>
@@ -68,7 +68,7 @@
         class="pt-4 flex flex-col items-center pb-5"
       >
         <div
-          class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue"
+          class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
         >
           <span v-if="multiple"
             >Number of selected files:

diff --git a/webapp/src/components/home/Home.vue b/webapp/src/components/home/Home.vue
@@ -9,17 +9,17 @@
         href="https://framaforms.org/disco-feedback-form-1718716636"
         >
         <div class="flex flex-row flex-wrap shrink-0 items-center gap-x-2 justify-end">
-            <p class="text-disco-blue font-bold text-xs hover:underline hover:text-disco-cyan text-end">Give us some feedback</p>
+            <p class="text-disco-blue font-bold text-xs hover:underline hover:text-disco-cyan text-end dark:text-disco-dark-cyan">Give us some feedback</p>
           <FeedbackIcon custom-class="min-w-8 min-h-8 w-8 h-8"/>
         </div>
       </a>
   </div>
     <!-- Disco logo -->
     <div class="flex flex-col justify-center items-center mb-8 space-y-4">
       <div class="md:max-w-md lg:max-w-lg">
-        <DiscoGIF/>
+        <DiscoGIF class="bg-slate-100 rounded-lg pb-8 px-4"/>
       </div>
-      <span class="text-lg md:text-2xl lg:text-3xl text-center text-slate-600">
+      <span class="text-lg md:text-2xl lg:text-3xl text-center text-slate-600 dark:text-slate-300">
         <span class="font-disco text-disco-cyan font-semibold">DIS</span
         >tributed
         <span class="font-disco text-disco-blue font-semibold">CO</span

diff --git a/webapp/src/components/information/Information.vue b/webapp/src/components/information/Information.vue
@@ -1,11 +1,11 @@
 <template>
     <!-- Page Content -->
     <Card class="flex flex-col place-content-center p-4 space-y-6 rounded-xl ">
-      <p class="flex flex-wrap justify-center text-2xl text-slate-400 mt-2">
-        <span><span class="font-disco text-disco-cyan uppercase">dis</span><span>tributed</span>&nbsp;</span>
+      <p class="flex flex-wrap justify-center text-2xl text-slate-400 dark:text-slate-300 mt-2">
+        <span><span class="font-disco text-disco-cyan dark:text-disco-light-cyan uppercase">dis</span><span>tributed</span>&nbsp;</span>
         <span><span class="font-disco text-disco-blue uppercase">co</span><span>llaborative learning platform</span></span>
       </p>
-      <div class="grid gap-8 p-4 sm:grid-cols-2 text-slate-500 border-t">
+      <div class="grid gap-8 p-4 sm:grid-cols-2 text-slate-400 border-t">
         <!-- Federated insight -->
         <div class="flex flex-col items-center">
           <h6
@@ -20,7 +20,7 @@
           >
             Federated Learning
           </h6>
-          <FederatedGIF class="my-md" />
+          <FederatedGIF class="bg-slate-100 rounded-lg border-slate-300 border-4" />
           <p class="text-sm py-6 text-center">
             The server puts in common local model updates and sends back an aggregated global model. <br/>No data is shared.
           </p>
@@ -39,7 +39,7 @@
           >
             Decentralized Learning
           </h6>
-          <DecentralizedGIF class="my-md" />
+          <DecentralizedGIF class="bg-slate-100 rounded-lg border-slate-300 border-4" />
           <p class="text-sm py-6 text-center">
             Local model aggregation is coordinated between peers without any server.
             <br/> No data is shared.

diff --git a/webapp/src/components/progress_bars/InformationBar.vue b/webapp/src/components/progress_bars/InformationBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 space-y-4">
-    <div class="flex flex-wrap text-3xl text-slate-600 justify-center">
+    <div class="flex flex-wrap text-3xl justify-center">
       <DISCO />
     </div>
     <div class="hidden md:inline-block w-full">

diff --git a/webapp/src/components/progress_bars/ProgressIcon.vue b/webapp/src/components/progress_bars/ProgressIcon.vue
@@ -8,25 +8,25 @@
       >
         <div
           class="w-full rounded items-center align-middle align-center flex-1  transition duration-400"
-          :class="props.active ? 'bg-disco-blue' : 'bg-slate-200'" 
+          :class="props.active ? 'bg-disco-blue dark:bg-disco-light-blue' : 'bg-slate-200 dark:bg-slate-600'" 
         >
           <div class="py-1" />
         </div>
       </div>
       <div
         class="transition duration-400 w-10 h-10 mx-auto rounded-full text-lg text-white flex items-center hover:scale-105 hover:cursor-pointer"
-        :class="(props.active ? 'bg-disco-blue border-4 border-slate-200' : 'bg-white border-4 border-slate-200') + (isCurrentStep ? ' bg-orange-300' : '') "
+        :class="(props.active ? 'bg-disco-blue dark:bg-disco-light-blue border-4 border-slate-200 dark:border-slate-600' : 'bg-white dark:bg-slate-800 border-4 border-slate-200 dark:border-slate-600') + (isCurrentStep ? ' bg-orange-300 dark:bg-orange-400' : '') "
       >
         <span
           class="text-center w-full"
-          :class="props.active ? 'text-white' : 'text-slate-500'"
+          :class="props.active ? 'text-white dark:text-white' : 'text-slate-500 dark:text-slate-200'"
         >
           <slot name="icon" />
         </span>
       </div>
     </div>
     <!-- Text -->
-    <div class="text-xs text-center md:text-base text-slate-700">
+    <div class="text-xs text-center md:text-base text-slate-700 dark:text-slate-400">
       <slot name="text" />
     </div>
   </div>

diff --git a/webapp/src/components/progress_bars/TrainingBar.vue b/webapp/src/components/progress_bars/TrainingBar.vue
@@ -4,11 +4,11 @@
       v-if="taskTitle !== undefined && displayTitle"
       class="flex flex-wrap font-disco text-3xl justify-center"
     >
-      <span class="text-disco-blue">{{ taskTitle }}</span>
+      <span class="text-disco-blue dark:text-disco-light-cyan">{{ taskTitle }}</span>
     </div>
     <div
       v-else
-      class="flex flex-wrap text-3xl text-slate-600 justify-center"
+      class="flex flex-wrap text-3xl text-slate-600 dark:text-slate-300 justify-center"
     >
       <DISCOllaboratives />
     </div>

diff --git a/webapp/src/components/sidebar/SideBar.vue b/webapp/src/components/sidebar/SideBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Mini Sidebar (LHS) -->
-    <nav class="flex flex-col flex-shrink-0 h-full sm:px-4 px-2 py-4 border-r">
+    <nav class="flex flex-col flex-shrink-0 h-full sm:px-4 px-2 py-4 border-r dark:border-black">
       <!-- Brand -->
       <div class="hidden sm:flex flex-shrink-0">
         <RouterLink
@@ -31,11 +31,21 @@
         <SidebarButton to="/information" text="More on DISCO">
           <InfoIcon />
         </SidebarButton>
+
+        <SidebarButton 
+          to="" 
+          :text="currentTheme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'" 
+          @click="toggleDarkMode"
+        >
+          <MoonIcon v-if="currentTheme === 'light'"/>
+          <SunIcon v-else/>
+        </SidebarButton>
       </div>
     </nav>
   </div>
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { RouterLink } from "vue-router";
 
 import HomeIcon from "@/assets/svg/HomeIcon.vue";
@@ -46,4 +56,24 @@ import InfoIcon from "@/assets/svg/InfoIcon.vue";
 import DISCO from "@/components/simple/DISCO.vue";
 
 import SidebarButton from "./SidebarButton.vue";
+import MoonIcon from "@/assets/svg/MoonIcon.vue";
+import SunIcon from "@/assets/svg/SunIcon.vue";
+
+const currentTheme = ref(localStorage.getItem('theme') || 'light');
+
+// Apply the initial theme on mount
+onMounted(() => {
+  if (currentTheme.value === 'dark') {
+    document.documentElement.classList.add('dark');
+  }
+});
+// Function to toggle the dark mode
+const toggleDarkMode = () => {
+  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
+  document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  localStorage.setItem('theme', newTheme);
+  currentTheme.value = newTheme;
+};
+
+
 </script>
diff --git a/webapp/src/components/sidebar/SidebarButton.vue b/webapp/src/components/sidebar/SidebarButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 text-slate-500">
+  <div class="p-2 text-slate-500 dark:text-slate-200">
     <span class="sr-only"> {{ text }} </span>
     <RouterLink
       :to="to"

diff --git a/webapp/src/components/simple/CustomButton.vue b/webapp/src/components/simple/CustomButton.vue
@@ -6,7 +6,7 @@
     text-lg uppercase text-white
     bg-disco-cyan
     rounded duration-200
-    hover:bg-white hover:outline hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan"
+    hover:bg-white dark:hover:bg-black hover:outline hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:outline-2 hover:text-disco-cyan dark:hover:text-disco-light-cyan"
   >
     <slot />
     <!-- Optional description slot -->

diff --git a/webapp/src/components/task_creation_form/TaskCreationForm.vue b/webapp/src/components/task_creation_form/TaskCreationForm.vue
@@ -8,7 +8,7 @@
     </div>
 
     <IconCard>
-      <template #title> Create your own <DISCOllaborative/> </template>
+      <template #title><span>Create your own <DISCOllaborative /></span></template>
 
       <div>
         Fill in the fields below to create your own <DISCOllaborative />, and bring a new (arbitrary) ML task into Disco.