Add dark mode feature

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 }

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>
+

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
  "

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"

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>
 

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>

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>

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>

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" />

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>

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" />

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>

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-16 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-300">
  <span class="font-disco text-disco-cyan font-semibold">DIS</span
  >tributed
  <span class="font-disco text-disco-blue font-semibold">CO</span

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="my-md 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="my-md 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.

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">

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>

webapp/src/components/progress_bars/TrainingBar.vue

@@ -4,7 +4,7 @@
  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

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>

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"

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

webapp/src/components/task_creation_form/TaskForm.vue

@@ -35,6 +35,7 @@
  class="
  inline
  text-slate-600
+ dark:text-slate-200
  font-bold
  md:text-right
  mb-1