From 49c418c3f1acbe9f8ca2847ce5c4b3d04af6801b Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 20 Oct 2019 23:19:19 +0200
Subject: [PATCH] Toggle for manually setting dark or light mode

---
 src/App.vue                          |  7 +++-
 src/components/ui/darkmodeToggle.vue | 51 ++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/darkmodeToggle.vue

diff --git a/src/App.vue b/src/App.vue
index 5b47224..acff291 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,9 @@
     <!-- Movie popup that will show above existing rendered content -->
     <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
 
+
+    <darkmode-toggle />
+
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content"></router-view>
 
@@ -23,13 +26,15 @@ import Vue from 'vue'
 import Navigation from '@/components/Navigation.vue'
 import MoviePopup from '@/components/MoviePopup.vue'
 import SearchInput from '@/components/SearchInput.vue'
+import DarkmodeToggle from '@/components/ui/darkmodeToggle.vue'
 
 export default {
   name: 'app',
   components: {
     Navigation,
     MoviePopup,
-    SearchInput
+    SearchInput,
+    DarkmodeToggle
   },
   data() {
     return {
diff --git a/src/components/ui/darkmodeToggle.vue b/src/components/ui/darkmodeToggle.vue
new file mode 100644
index 0000000..8d15fd4
--- /dev/null
+++ b/src/components/ui/darkmodeToggle.vue
@@ -0,0 +1,51 @@
+<template>
+
+  <div class="darkToggle">
+    <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
+  </div>
+
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      darkmode: window.getComputedStyle(document.body).colorScheme.includes('dark')
+    }
+  },
+  methods: {
+    toggleDarkmode() {
+      this.darkmode = !this.darkmode;
+      document.body.className = this.darkmode ? 'dark' : 'light'
+    }
+  },
+  computed: {
+    darkmodeToggleIcon() {
+      return this.darkmode ? '🌝' : '🌚'
+    }
+  }
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.darkToggle {
+  height: 25px;
+  width: 25px;
+  cursor: pointer;
+  // background-color: red;
+  position: fixed;
+  margin-bottom: 10px;
+  margin-right: 2px;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
\ No newline at end of file