From d3449609da17387f8caebd677162b5e619ae6ec0 Mon Sep 17 00:00:00 2001
From: Emma <emma@waffle.coffee>
Date: Sat, 24 Apr 2021 22:52:49 -0400
Subject: [PATCH] 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 | 15 +++++++++++++++
 layouts/default.vue           | 24 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/components/layout/MFooter.vue b/components/layout/MFooter.vue
index cd0f94ea..7f466f0e 100644
--- a/components/layout/MFooter.vue
+++ b/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 {
diff --git a/layouts/default.vue b/layouts/default.vue
index 1c708faf..ad9b852d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,6 +13,10 @@
           <span class="badge yellow">Beta</span>
         </section>
         <section class="menu-icon">
+          <button @click="changeTheme">
+            <MoonIcon v-if="$colorMode.value === 'light'" />
+            <SunIcon v-else />
+          </button>
           <button @click="toggleNavBar">
             <HamburgerIcon />
           </button>
@@ -89,6 +93,10 @@
             </template>
             <template v-else>
               <section class="auth-prompt">
+                <a class="desktop-header-mode-switch" @click="changeTheme">
+                  <MoonIcon v-if="$colorMode.value === 'light'" />
+                  <SunIcon v-else />
+                </a>
                 <a :href="authUrl" class="log-in-button"
                   ><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
                 >
@@ -224,6 +232,7 @@ export default {
         display: flex;
         justify-content: space-between;
         padding: 1rem 0;
+        margin-left: 1rem;
         color: var(--color-text-dark);
         svg {
           height: 1.75rem;
@@ -248,6 +257,12 @@ export default {
         display: flex;
         margin-left: auto;
         align-items: center;
+        margin-right: 1rem;
+      }
+
+      .desktop-header-mode-switch {
+        margin-right: 1rem;
+        cursor: pointer;
       }
 
       section.right-group {
@@ -450,6 +465,10 @@ export default {
           display: none;
         }
 
+        section.mobile-header-mode-switch {
+          display: none;
+        }
+
         section.right-group {
           flex-direction: unset;
           overflow-y: unset;
@@ -491,6 +510,11 @@ export default {
           }
         }
       }
+      @media only screen and (max-width: 1024px) {
+        .desktop-header-mode-switch {
+          display: none;
+        }
+      }
     }
   }