Add 'Switch to Dark/Light Mode' to header & footer (Fixes #174) (#177)

* Add 'Switch to Dark/Light Mode' to footer (Fixes #174)

* Cursed mess

* Adds mobile header dark/light mode toggle

I do not like CSS.
Mobile works fine, desktop does not

* Remove unused div & other things I don't remember

* Fixes dark/light mode toggles on desktop

Also simplifies css for footer slightly.
Sometimes a good night's sleep really does do ya good.
https://cdn.discordapp.com/attachments/745980892735864953/835256687803367464/modrinth-2021-04-23_16.50.59.webm

* that was a mistake for the login button but it actually works well

components/layout/MFooter.vue

@@ -4,6 +4,14 @@
       Modrinth is open source software. You may view the source code at
       <a target="_blank" href="https://github.com/modrinth">our GitHub page</a>.
     </span>
+    <ul>
+      <li>
+        <a @click="changeTheme">
+          <span v-if="$colorMode.value === 'light'">Switch to Dark Mode</span>
+          <span v-else>Switch to Light Mode</span>
+        </a>
+      </li>
+    </ul>
     <ul>
       <li>
         <nuxt-link to="/legal/terms">Terms</nuxt-link>
@@ -56,6 +64,12 @@ export default {
       default: false,
     },
   },
+  methods: {
+    changeTheme() {
+      this.$colorMode.preference =
+        this.$colorMode.value === 'dark' ? 'light' : 'dark'
+    },
+  },
 }
 </script>
 
@@ -93,6 +107,7 @@ footer {
 
 a {
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .hideSmall {