Dark Theme

assets/styles/global.scss

@@ -32,6 +32,25 @@
   font-size: 18px;
 }
 
+:root[data-theme='dark'] {
+  --color-text: #ccccc2;
+  --color-bg: #191917;
+
+  --color-text-inverted: var(--color-bg);
+  --color-bg-inverted: var(--color-text);
+
+  --color-brand: #4d9227;
+
+  --color-grey-7: #f7faf0;
+  --color-grey-6: #f7f2eb;
+  --color-grey-5: #ede9e4;
+  --color-grey-4: #dadcd5;
+  --color-grey-3: #b8bbb4;
+  --color-grey-2: #3b3937;
+  --color-grey-1: #3a3b38;
+  --color-grey-0: #1d1e1b;
+}
+
 body {
   background-color: var(--color-bg);
   color: var(--color-text);

layouts/default.vue

@@ -137,6 +137,40 @@
               <path d="M13.73 21a2 2 0 0 1-3.46 0" />
             </svg>
           </div>
+          <div class="theme">
+            <svg
+              v-if="theme === 'light'"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              @click="switchTheme"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+            <svg
+              v-else
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              @click="switchTheme"
+            >
+              <circle cx="12" cy="12" r="5"></circle>
+              <line x1="12" y1="1" x2="12" y2="3"></line>
+              <line x1="12" y1="21" x2="12" y2="23"></line>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+              <line x1="1" y1="12" x2="3" y2="12"></line>
+              <line x1="21" y1="12" x2="23" y2="12"></line>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+          </div>
         </section>
       </nav>
     </aside>
@@ -162,6 +196,37 @@
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      theme: 'light',
+    }
+  },
+  mounted() {
+    const theme = localStorage.getItem('data-theme')
+      ? localStorage.getItem('data-theme')
+      : 'light'
+
+    this.theme = theme
+    document.documentElement.setAttribute('data-theme', theme)
+  },
+  methods: {
+    switchTheme() {
+      let theme = localStorage.getItem('data-theme')
+      if (theme === 'dark') {
+        theme = 'light'
+      } else {
+        theme = 'dark'
+      }
+      this.theme = theme
+      localStorage.setItem('data-theme', theme)
+      document.documentElement.setAttribute('data-theme', theme)
+    },
+  },
+}
+</script>
+
 <style lang="scss">
 .layout {
   display: flex;
@@ -176,6 +241,7 @@
     border-right: 1px solid var(--color-grey-2);
     display: flex; // Flex here to safely expand navigation height
     flex-direction: column;
+    max-width: 15%;
     min-width: 15%;
 
     .logo-wrapper {

pages/mods.vue

@@ -391,7 +391,7 @@ export default {
         document.documentElement.clientHeight || 0,
         window.innerHeight || 0
       )
-      this.maxResults = Math.floor(vh / 120 - 1)
+      this.maxResults = Math.floor((vh - 200) / 120)
 
       await this.onSearchChange(this.currentPage)
 
@@ -514,6 +514,7 @@ export default {
 }
 
 .filters {
+  overflow-y: auto;
   background-color: var(--color-bg);
   border-left: 1px solid var(--color-grey-2);
   top: 0;
@@ -542,7 +543,7 @@ export default {
   button {
     width: 100%;
     padding: 5px 0;
-    color: var(--color-grey-5);
+    color: #718096;
     border: none;
     border-radius: 5px;