Merge pull request #32 from SafeExamBrowser/darkmodelogintoggle

SEBSP-99 persistent theme toggle state, some theme color fixes
SafeExamBrowser · Mar 12, 2024 · a80b25d · a80b25d
2 parents 05d416e + 4fbc699
commit a80b25d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 21 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -24,13 +24,7 @@
 </script>
 
 <style>
-
-    .subtitle-color{
-        color: black;
-    }
-
-    .text-decoration-underline a:visited {
-        color: #2196F3 !important;
-    }
-
+  .text-decoration-underline a:visited {
+      color: #2196F3 !important;
+  }
 </style>
diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
@@ -1,12 +1,11 @@
 <template>
-
     <v-navigation-drawer v-model="drawer" class="d-none d-sm-flex">
 
         <!--page title with logo-->
         <v-sheet class="pa-4">
             <a href="/start" class="text-decoration-none text-black">
                 <v-img max-height="100" src="/img/seb-logo-no-border.png" alt="Logo ETH Zürich"></v-img>
-                <div class="app-title text-h6">{{ $t("navigation.title") }}</div>
+                <div class="app-title text-h6 text-title">{{ $t("navigation.title") }}</div>
             </a>
         </v-sheet>
 
@@ -110,6 +109,13 @@
                             </v-btn-toggle>
                         </v-list-item>
 
+                        <v-list-item>
+                            <v-btn-toggle v-model="themeToggle" variant="text" mandatory>
+                                <v-btn icon="mdi-white-balance-sunny"></v-btn>
+                                <v-btn icon="mdi-weather-night"></v-btn>
+                            </v-btn-toggle>
+                        </v-list-item>
+
                         <v-divider></v-divider>
 
                         <v-list-item class="text-decoration-underline text-blue mx-auto" @click="authStore.logout()">
@@ -138,6 +144,7 @@
     import { useAppBarStore, useAuthStore, useUserAccountStore } from "@/store/app";
     import * as userAccountViewService from "@/services/component-services/userAccountViewService";
     import { useRoute } from "vue-router";
+    import { useTheme } from "vuetify";
     import { useI18n } from "vue-i18n";
 
     //navigation
@@ -152,6 +159,11 @@
     const authStore = useAuthStore();
     const userAccountStore = useUserAccountStore();
 
+    //theme
+    const theme = useTheme();
+    const localstorageTheme: string | null = localStorage.getItem("theme");
+    theme.global.name.value = localstorageTheme ?? theme.global.name.value ?? "light";
+    const themeToggle = ref<number>(theme.global.name.value === "dark" ? 1 : 0);
 
     //gallery view
     const gridSizes: GridSize[] = [
@@ -165,16 +177,20 @@
     //i18n
     const { locale } = useI18n();
     const localStorageLocale: string | null = localStorage.getItem("locale");
-
     locale.value = localStorageLocale ?? "en";
-
     const languageToggle = ref<number>(locale.value === "en" ? 0 : 1);
 
+    //watchers
     watch(languageToggle, () => {
         locale.value = languageToggle.value === 0 ? "en" : "de";
         localStorage.setItem("locale", locale.value);
     });
 
+    watch(themeToggle, () => {
+        theme.global.name.value = themeToggle.value === 0 ? "light" : "dark";
+        localStorage.setItem("theme", theme.global.name.value);
+    });
+
 
     //methods
     function changeGridSize(gridSize: GridSize){
@@ -184,7 +200,6 @@
     async function userMenuOpened(){
         await userAccountViewService.setPersonalUserAccount();
     }
-
 </script>  
 
 <style scoped>

diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
@@ -4,7 +4,7 @@
 
             <v-card class="pa-10">
                 <div class="d-flex ml-15 mr-15">
-                    <img src="/img/logo.svg" alt="Logo ETH Zürich" />
+                    <img src="/img/logo.svg" :class="isDark ? 'invert' : ''" alt="Logo ETH Zürich" />
                 </div>
 
                 <div class="mt-10">
@@ -22,7 +22,7 @@
                     Sign in
                 </v-card-title>
                 <v-card-subtitle>
-                    <span class="subtitle-color">
+                    <span class="text-subtitle">
                         Please fill the form to sign in to your SEB screen proctoring account.
                     </span>
                 </v-card-subtitle>
@@ -88,10 +88,11 @@
 </template>
 
 <script setup lang="ts">
-    import { ref } from "vue";
+    import { ref, computed } from "vue";
     import * as authenticationService from "@/services/api-services/authenticationService";
     import {navigateTo} from "@/router/navigation";
     import { useLoadingStore, useAuthStore, useSettingsStore } from "@/store/app";
+    import { useTheme } from "vuetify";
 
     const username = ref("");
     const password = ref("");
@@ -104,6 +105,13 @@
     const loadingStore = useLoadingStore();
     const settingsStore = useSettingsStore();
 
+    //theme
+    const theme = useTheme();
+    const localStorageTheme: string | null = localStorage.getItem("theme");
+    theme.global.name.value = localStorageTheme ?? theme.global.name.value ?? "light";
+    const isDark = computed<boolean>(() => theme.global.current.value.dark);
+
+    
     async function signIn(){
 
         loadingStore.isLoading = true;
@@ -133,7 +141,8 @@
 
 </script>
 
-
 <style scoped>
-
+.invert{
+    filter: invert(1);
+}
 </style>
diff --git a/client/src/plugins/vuetify.ts b/client/src/plugins/vuetify.ts
@@ -9,14 +9,18 @@ export default createVuetify({
         colors: {
           primary: "#215CAF",
           secondary: "#5CBBF6",
-          blue: "#2196F3"
+          blue: "#2196F3",
+          title: "#000000",
+          subtitle: "#000000",
           // background: "#eef5f9",
           // surface: "#4D7DBF"
         },
       },
       dark: {
         colors: { 
-          primary: "#ffff00",
+          primary: "#2196F3",
+          title: "#ffffff",
+          subtitle: "#ffffff",
         }
       },
       tableTheme: {