Toggle for manually setting dark or light mode

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 {

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>