Merge pull request #49 from EliasSchaut/23-darkmode-update

23 darkmode update

client/package.json

@@ -9,7 +9,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "i18next-vue": "^2.1.1",
     "js-cookie": "^3.0.1",
     "movie-monday-manager": "file:..",

client/src/assets/css/general_elements.css

@@ -1,11 +1,17 @@
 body {
-    background-color: #f5f5f5;
+    background-color: var(--background-white);
+    color: var(--color-black);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #333333;
     margin: 0;
     padding: 0;
 }
 
+[data-bs-theme=dark] body {
+    background-color: var(--background-black);
+    color: var(--color-white);
+}
+
+
 .content {
     margin: 0 20px 50px;
     display: flex;

client/src/assets/css/main.css

@@ -1,2 +1,3 @@
+@import "vars.css";
 @import "fonts.css";
 @import "general_elements.css";

client/src/assets/css/vars.css

@@ -0,0 +1,7 @@
+
+:root {
+    --background-white: #f5f5f5;
+    --color-white: #ffffff;
+    --background-black: var(--bs-dark);
+    --color-black: #000000;
+}

client/src/components/NavbarComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
+  <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
     <div class="container-fluid">
       <router-link class="navbar-brand" to="/">Movie Monday Manager</router-link>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -30,7 +30,24 @@
           <div class="me-lg-1 spinner-border text-secondary" role="status" v-if="store.loading">
             <span class="visually-hidden">Loading...</span>
           </div>
-          <select class="form-select" aria-label="Default select example" @change="change_lang" v-model="lang">
+
+          <div class="dropdown align-self-center">
+            <button class="btn dropdown-toggle border-0 d-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false">
+              <img v-if="store.theme === 'dark'" src="../assets/svg/moon-stars-fill-white.svg" alt="Theme Dark">
+              <img v-else-if="store.theme === 'auto' && store.theme_without_auto === 'dark'" src="../assets/svg/circle-half-white.svg" alt="Theme Auto">
+              <img v-else-if="store.theme === 'auto' && store.theme_without_auto !== 'dark'" src="../assets/svg/circle-half.svg" alt="Theme Auto">
+              <img v-else src="../assets/svg/brightness-high-fill.svg" alt="Theme Light">
+            </button>
+            <ul class="dropdown-menu">
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('light')"><img src="../assets/svg/brightness-high-fill-white.svg" alt="Theme Light">&nbsp;&nbsp;{{ $t("common.theme.light") }}</button></li>
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('dark')"><img src="../assets/svg/moon-stars-fill-white.svg" alt="Theme Dark">&nbsp;&nbsp;{{ $t("common.theme.dark") }}</button></li>
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('auto')"><img src="../assets/svg/circle-half-white.svg" alt="Theme Auto">&nbsp;&nbsp;{{ $t("common.theme.auto") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('light')"><img src="../assets/svg/brightness-high-fill.svg" alt="Theme Light">&nbsp;&nbsp;{{ $t("common.theme.light") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('dark')"><img src="../assets/svg/moon-stars-fill.svg" alt="Theme Dark">&nbsp;&nbsp;{{ $t("common.theme.dark") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('auto')"><img src="../assets/svg/circle-half.svg" alt="Theme Auto">&nbsp;&nbsp;{{ $t("common.theme.auto") }}</button></li>
+            </ul>
+          </div>
+          <select class="form-select" aria-label="Select Lang" @change="change_lang" v-model="lang">
             <option value="en">{{ $t("nav.lang.en") }}</option>
             <option value="de">{{ $t("nav.lang.de") }}</option>
           </select>

client/src/locales/de.json

@@ -34,6 +34,11 @@
       "success": "Erfolg!",
       "warning": "Warnung!",
       "danger": "Gefahr!"
+    },
+    "theme":{
+      "light": "Hell",
+      "dark": "Dunkel",
+      "auto": "Auto"
     }
   },
 

client/src/locales/en.json

@@ -34,6 +34,11 @@
       "success": "Success!",
       "warning": "Warning!",
       "danger": "Danger!"
+    },
+    "theme":{
+      "light": "Light",
+      "dark": "Dark",
+      "auto": "Auto"
     }
   },
 

client/src/util/store.ts

@@ -1,9 +1,11 @@
 import { reactive } from  'vue';
-import { get_cookie } from "@/util/cookie";
+import { get_cookie, set_cookie } from "@/util/cookie";
 
 export const store = reactive({
   logged_in: false,
   loading: false,
+  theme: 'light',
+  theme_without_auto: 'light',
   alert: {
     show: false,
     msg: "",
@@ -46,5 +48,27 @@ export const store = reactive({
 
   hide_alert() {
     this.alert.show = false;
-  }
+  },
+
+  update_theme(theme: string) {
+    set_cookie("theme", theme)
+    this.theme = theme
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      this.theme_without_auto = 'dark'
+    } else {
+      this.theme_without_auto = (theme === 'auto') ? 'light' : theme
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  },
 })
+
+function get_theme() {
+  const theme = get_cookie("theme")
+  if (theme) {
+    return theme
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+store.update_theme(get_theme())

client/src/views/HomeView.vue

@@ -38,7 +38,8 @@
               </button>
               <button v-else :id="'v_' + movie.imdb_id" class="btn btn-outline-primary"
                       @click="vote(movie.imdb_id, votes)" :disabled="!store.logged_in">
-                <img class="fas fa-edit" src="../assets/svg/heartbreak-fill.svg" alt="heartbreak">
+                <img v-if="store.theme_without_auto === 'dark'" class="fas fa-edit" src="../assets/svg/heartbreak-fill-white.svg" alt="heartbreak">
+                <img v-else class="fas fa-edit" src="../assets/svg/heartbreak-fill.svg" alt="heartbreak">
               </button>
             </div>
           </div>