fix: dark mode and add toggle to footer

Author: zackha

app.vue

@@ -138,6 +138,7 @@
         </div>
         <div class="text-sm">Try improving your results by double checking your spelling or trying a more general keyword.</div>
       </div>
+      <Footer />
     </div>
   </div>
 </template>
@@ -259,7 +260,7 @@ watch([selectedOption, searchTerm, selectedCategory], ([newSelectedOption, newSe
 </script>
 
 <style lang="postcss">
-.dark-mode {
+.dark {
   @apply bg-black text-neutral-100;
   color-scheme: dark;
 }

components/footer/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <button @click="toggleDark" class="flex box-border items-center active:scale-95 dark:bg-white/10 hover:dark:bg-white/20 h-8 transition-all rounded-lg p-2">
+    <Icon :name="colorModeIcon" size="16"></Icon>
+  </button>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const toggleDark = () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+};
+
+const colorModeIcon = computed(() => (colorMode.preference === 'dark' ? 'solar:moon-bold' : 'solar:sun-bold'));
+</script>

nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
   modules: ['@nuxt/image-edge', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxtjs/apollo', 'nuxt-icon'],
+  colorMode: {
+    classSuffix: '',
+  },
   apollo: {
     clients: {
       default: {

tailwind.config.ts

@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {