Merge branch 'feature/51-add-support-for-color-mode' into 'main'

Resolve "Add support for color mode"

Closes #51

See merge request !135

src/components/AppHeader.vue

@@ -3,6 +3,7 @@ import { useUserStore } from "@/stores/users";
 import { useRoute, useRouter } from "vue-router";
 import { watch, ref, computed } from "vue";
 import { OpenAPI } from "@/client";
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 
 const userRepository = useUserStore();
 const route = useRoute();
@@ -13,6 +14,12 @@ function logout() {
   router.push({ name: "login" });
 }
 
+type PossibleThemes = "light" | "dark";
+
+const activeTheme = ref<PossibleThemes>(
+  (localStorage.getItem("theme") as PossibleThemes) ?? "light",
+);
+
 const activeRoute = ref("");
 const objectStorageActive = computed<boolean>(
   () => activeRoute.value == "buckets" || activeRoute.value == "s3_keys",
@@ -43,6 +50,13 @@ watch(
     }
   },
 );
+
+watch(activeTheme, (newTheme, oldTheme) => {
+  if (newTheme !== oldTheme) {
+    document.querySelector("html")?.setAttribute("data-bs-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  }
+});
 </script>
 
 <template>
@@ -259,6 +273,53 @@ watch(
           </li>
         </ul>
       </div>
+      <div class="dropdown">
+        <button
+          class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          <font-awesome-icon
+            :icon="`fa-solid fa-${activeTheme === 'light' ? 'sun' : 'moon'}`"
+          />
+        </button>
+        <ul class="dropdown-menu w-fit">
+          <li>
+            <button
+              class="dropdown-item d-flex align-items-center"
+              :class="{ active: activeTheme === 'light' }"
+              @click="activeTheme = 'light'"
+            >
+              <font-awesome-icon
+                icon="fa-solid fa-sun"
+                class="me-2 opacity-50"
+              />
+              <span class="flex-grow-1">Light</span>
+              <font-awesome-icon
+                v-if="activeTheme === 'light'"
+                icon="fa-solid fa-check"
+              />
+            </button>
+          </li>
+          <li>
+            <button
+              class="dropdown-item d-flex align-items-center"
+              :class="{ active: activeTheme === 'dark' }"
+              @click="activeTheme = 'dark'"
+            >
+              <font-awesome-icon
+                icon="fa-solid fa-moon"
+                class="me-2 opacity-50"
+              />
+              <span class="flex-grow-1">Dark</span>
+              <font-awesome-icon
+                v-if="activeTheme === 'dark'"
+                icon="fa-solid fa-check"
+              />
+            </button>
+          </li>
+        </ul>
+      </div>
       <div
         class="dropdown"
         v-if="userRepository.authenticated && userRepository.user != null"

src/components/parameter-schema/description-mode/ParameterDescription.vue

@@ -54,7 +54,7 @@ const showRightColum = computed<boolean>(
 </script>
 
 <template>
-  <div class="border-top border-dark" v-if="showHidden || !hidden">
+  <div class="border-top" v-if="showHidden || !hidden">
     <div class="d-flex pt-2 justify-content-between">
       <div class="flex-fill ps-2">
         <div class="row">

src/components/parameter-schema/form-mode/ParameterBooleanInput.vue

@@ -23,7 +23,7 @@ const iconPresent = computed<boolean>(() => props.parameter["fa_icon"]);
 const dynamicCssClasses = computed<string[]>(() => {
   const cssClasses = [];
   if (props.border) {
-    cssClasses.push("border", `border-${props.border}`, "text-bg-light");
+    cssClasses.push("border", `border-${props.border}`, "bg-dark-subtle");
   }
   if (!helpTextPresent.value) {
     cssClasses.push("rounded-end");

src/components/workflows/modals/ArbitraryWorkflowModal.vue

@@ -397,32 +397,6 @@ function checkRepository() {
             }
           }
         });
-      // repo
-      //   .checkFilesExist(
-      //     requiredRepositoryFiles(
-      //       workflowMode.modeEnabled ? [workflowMode.mode] : [],
-      //     ),
-      //     true,
-      //   )
-      //   .then(() => {
-      //     formState.allowUpload = true;
-      //   })
-      //   .catch((e: Error) => {
-      //     try {
-      //       const headers = JSON.parse(e.message);
-      //
-      //     } catch {
-      //       formState.missingFiles = e.message.split(",");
-      //       // Allow execution of the workflow if main.nf and parameter schema are not missing
-      //       if (
-      //         formState.missingFiles.findIndex(
-      //           (file) => file === "main.nf" || file === "nextflow_schema.json",
-      //         ) < 0
-      //       ) {
-      //         formState.allowUpload = true;
-      //       }
-      //     }
-      //   });
     } catch (e) {
       formState.unsupportedRepository = true;
       workflowRepositoryElement.value?.setCustomValidity(

src/main.ts

@@ -60,6 +60,13 @@ if (environment.MATOMO_HOST && environment.MATOMO_SITE_ID) {
 app.use(createPinia());
 app.use(router);
 
+const theme = localStorage.getItem("theme");
+if (theme != undefined) {
+  document.querySelector("html")?.setAttribute("data-bs-theme", theme);
+} //else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+//  document.querySelector("html")?.setAttribute("data-bs-theme", "dark");
+//}
+
 app.mount("#app");
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/stores/users.ts

@@ -106,7 +106,11 @@ export const useUserStore = defineStore({
     logout() {
       window._paq.push(["resetUserId"]);
       this.$reset();
+      const activeTheme = localStorage.getItem("theme");
       localStorage.clear();
+      if (activeTheme != undefined) {
+        localStorage.setItem("theme", activeTheme);
+      }
       dbclear();
       useWorkflowExecutionStore().$reset();
       useBucketStore().$reset();

src/views/LoginView.vue

@@ -103,7 +103,7 @@ onMounted(() => {
     <div
       class="d-flex flex-row justify-content-evenly align-items-center flex-wrap w-100"
     >
-      <div class="border rounded p-4 icon text-center m-2" hidden>
+      <div class="border rounded p-4 icon text-center m-2 text-bg-light" hidden>
         <h4 class="mb-4">A Service By</h4>
         <a href="https://nfdi4microbiota.de/">
           <img
@@ -113,7 +113,7 @@ onMounted(() => {
           />
         </a>
       </div>
-      <div class="border rounded p-4 icon text-center m-2">
+      <div class="border rounded p-4 icon text-center m-2 text-bg-light">
         <h4 class="mb-4">Powered By</h4>
         <a href="https://www.denbi.de/">
           <img
@@ -123,17 +123,17 @@ onMounted(() => {
           />
         </a>
       </div>
-      <div class="border rounded p-4 icon text-center m-2">
+      <div class="border rounded p-4 icon text-center m-2 text-bg-light">
         <h4 class="mb-4">Hosted By</h4>
         <a href="https://bibi.uni-bielefeld.de/">
           <img src="/src/assets/images/bibi.png" alt="BiBi Logo" height="50" />
         </a>
       </div>
-      <div class="border rounded p-4 icon text-center m-2">
+      <div class="border rounded p-4 icon text-center m-2 text-bg-light">
         <h4 class="mb-4">Funded By</h4>
         <img src="/src/assets/images/dfg.png" alt="DFG Logo" height="50" />
       </div>
-      <div class="border rounded p-4 icon text-center m-2">
+      <div class="border rounded p-4 icon text-center m-2 text-bg-light">
         <img
           src="/src/assets/images/unibi.svg"
           alt="Bielefeld University Logo"