feat(lite/dark mode): persistence + icon (#6383)

@xen-orchestra/lite/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!xenApiStore.isConnected" style="display: flex">
+  <div v-if="!xenApiStore.isConnected">
     <AppLogin />
   </div>
   <div v-else>
@@ -17,9 +17,9 @@
 
 <script lang="ts" setup>
 import { watchEffect } from "vue";
+import favicon from "@/assets/favicon.svg";
 import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
-import favicon from "@/assets/favicon.svg";
 import InfraPoolList from "@/components/infra/InfraPoolList.vue";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
@@ -31,6 +31,12 @@ if (link == null) {
 }
 link.href = favicon;
 
+document.title = "XO Lite";
+
+if (window.localStorage?.getItem("colorMode") !== "light") {
+  document.documentElement.classList.add("dark");
+}
+
 const xenApiStore = useXenApiStore();
 
 watchEffect(() => {

@xen-orchestra/lite/src/components/AppHeader.vue

@@ -1,26 +1,36 @@
 <template>
   <header class="app-header">
     <RouterLink :to="{ name: 'home' }">
-      <img alt="XO Lite" src="../assets/logo.svg" style="width: 6rem" />
+      <img alt="XO Lite" src="../assets/logo.svg" />
     </RouterLink>
     <slot />
-    <span style="cursor: pointer" @click="toggleTheme">Switch theme</span>
-    <span style="cursor: pointer; margin-left: 1rem" @click="logout">
-      Logout
-    </span>
+    <div>
+      <span @click="toggleTheme"
+        ><FontAwesomeIcon style="font-size: 1.5em" :icon="colorModeIcon"
+      /></span>
+      <span style="margin-left: 1rem" @click="logout">Logout</span>
+    </div>
   </header>
 </template>
 
 <script lang="ts" setup>
-import { nextTick } from "vue";
+import { computed, nextTick, ref } from "vue";
 import { useRouter } from "vue-router";
+import { faMoon, faSun } from "@fortawesome/pro-solid-svg-icons";
+import { useLocalStorage } from "@vueuse/core";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
 const router = useRouter();
 
+const colorMode = useLocalStorage<string>("colorMode", "dark");
 const toggleTheme = () => {
-  document.documentElement.classList.toggle("dark");
+  colorMode.value = document.documentElement.classList.toggle("dark")
+    ? "dark"
+    : "light";
 };
+const colorModeIcon = computed(() =>
+  colorMode.value === "light" ? faMoon : faSun
+);
 
 const logout = () => {
   const xenApiStore = useXenApiStore();
@@ -33,9 +43,16 @@ const logout = () => {
 .app-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   min-height: 8rem;
-  padding: 0 0.8rem;
+  padding: 1rem;
   border-bottom: 0.1rem solid var(--color-blue-scale-400);
   background-color: var(--background-color-secondary);
+  img {
+    width: 4rem;
+  }
+  span {
+    cursor: pointer;
+  }
 }
 </style>