198 make dark mode work

app.config.ts

@@ -1,22 +1,22 @@
 export default defineAppConfig({
-    ui: {
-        primary: 'coral',
-        gray: 'cool'
+  ui: {
+    primary: 'coral',
+    gray: 'cool',
+  },
+  buildModules: ['@nuxtjs/pwa'],
+  pwa: {
+    manifest: {
+      name: 'DARC SIDE ChocoChip Scouting',
+      short_name: 'ChocoChip Scouting',
+      lang: 'en',
+      display: 'standalone',
     },
-    buildModules: ['@nuxtjs/pwa'],
-    pwa: {
-        manifest: {
-            name: 'Fire hydrant surveyor',
-            short_name: 'Hydrant Surveyor',
-            lang: 'en',
-            display: 'standalone',
-        },
-        workbox: {
-            enabled: true
-        }
+    workbox: {
+      enabled: true,
     },
-    notifications: {
-        // Show toasts at the top right of the screen
-        position: 'top-0 right-0'
-    }
-})
+  },
+  notifications: {
+    // Show toasts at the top right of the screen
+    position: 'top-0 right-0',
+  },
+});

components/24-crescendo/AmpVisualization.vue

@@ -116,7 +116,7 @@ let rows = [
       ></LineChart>
       <div class="flex-auto whitespace-normal">
         <div
-          class="font-semibold underline underline-offset-2 mb-1 w-full text-center"
+          class="font-semibold underline underline-offset-2 mb-1 w-full text-center dark:!text-primary"
         >
           <h1>Amp</h1>
         </div>

components/24-crescendo/MatchVisualization.vue

@@ -121,14 +121,14 @@ console.log(props.rowData.rawData);
         <div
           v-if="rowData.rawData[selectedMatch - 1].auto.position != undefined"
         >
-          <p class="font-extrabold text-sm inline-block">
+          <p class="font-extrabold text-sm inline-block dark:text-gray-400">
             Auto Position: &nbsp;
           </p>
           <p class="text-sm inline-block">
             {{ rowData.rawData[selectedMatch - 1].auto.position }}
           </p>
         </div>
-        <p class="font-extrabold text-sm">Auto & Endgame:</p>
+        <p class="font-extrabold text-sm dark:text-gray-400">Auto & Endgame:</p>
         <div class="pb-1">
           <UBadge
             color="sky"
@@ -178,7 +178,7 @@ console.log(props.rowData.rawData);
               </div>
             </div>
           </div>
-          <span class="font-extrabold text-sm">Other notes: </span>
+          <span class="font-extrabold text-sm dark:text-gray-400">Other notes: </span>
           <UBadge
             :color="
               sentimentScore > 1
@@ -192,7 +192,7 @@ console.log(props.rowData.rawData);
             "
             >{{ sentimentScore }}</UBadge
           >
-          <p class="pb-2 text-xs">
+          <p class="pb-2 text-xs dark:text-gray-400">
             {{
               rowData.rawData[selectedMatch - 1].notes.notes == ''
                 ? 'None'

components/24-crescendo/SpeakerVisualization.vue

@@ -120,7 +120,7 @@ let rows = [
       ></LineChart>
       <div class="flex-auto whitespace-normal">
         <div
-          class="font-semibold underline underline-offset-2 mb-1 w-full text-center"
+          class="font-semibold underline underline-offset-2 mb-1 w-full text-center dark:!text-primary"
         >
           <h1>Speaker</h1>
         </div>

components/charts/BarChart.vue

@@ -60,7 +60,15 @@ let options = {
     scales: {
         y: {
             suggestedMax: props.suggestedMax || 10,
+          grid: {
+            color: 'rgba(193,193,193,0.5)',
+          }
         },
+      x: {
+          grid: {
+            color: 'rgba(193,193,193,0.5)',
+          }
+      }
     },
     responsive: true,
 }

components/charts/LineChart.vue

@@ -62,7 +62,15 @@ let options = {
     y: {
       suggestedMax: props.suggestedMax || 10,
       suggestedMin: 0,
+      grid: {
+        color: 'rgba(193,193,193,0.5)',
+      }
     },
+    x: {
+      grid: {
+        color: 'rgba(193,193,193,0.5)',
+      }
+    }
   },
   responsive: true,
 };

components/website-utils/AddButton.vue

@@ -23,7 +23,7 @@ let addButtonLinks = [
         <UPopover>
             <UButton
                 :ui="{ rounded: 'rounded-full' }"
-                class="m-0 shadow-md"
+                class="ml-20 shadow-md"
                 color="primary"
                 icon="i-heroicons-plus-20-solid"
                 size="xl"

components/website-utils/OuterComponents.vue

@@ -55,7 +55,9 @@ if (
 </script>
 
 <template>
-  <div class="flex min-h-screen w-screen flex-col">
+  <div
+    class="min-h-screen w-screen flex-col dark:bg-gray-800 m overflow-auto max-h-dvh"
+  >
     <Navbar
       class="flex-grow basis-auto"
       :disable-sidebar="width > 800"
@@ -116,7 +118,7 @@ if (
                     <template #header>
                       <div class="text-center">
                         <span
-                          class="overflow-hidden flex-auto text-zinc-900 max-w-32"
+                          class="overflow-hidden dark:text-white flex-auto max-w-32"
                         >
                           {{ usernameState }}
                         </span>

nuxt.config.ts

@@ -1,12 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-
 var sw = true;
+
 export default defineNuxtConfig({
   modules: [
     '@nuxt/image',
     '@vite-pwa/nuxt',
     '@nuxt/ui',
+    '@nuxtjs/color-mode',
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
         // @ts-expect-error
@@ -202,7 +203,7 @@ export default defineNuxtConfig({
   },
 
   colorMode: {
-    preference: 'light' //eventually we will add color mode preference
+    preference: 'light', // default value of $colorMode.preference
   },
 
   tailwindcss:{