198 make dark mode work

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,7 @@ 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"

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
@@ -188,7 +189,7 @@ export default defineNuxtConfig({
     client: true
   },
   colorMode: {
-    preference: 'light' //eventually we will add color mode preference
+    preference: 'light', // default value of $colorMode.preference
   },
   tailwindcss:{
     config:{

pages/attachment/add.vue

@@ -182,9 +182,10 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop); // variable that ch
 
 <template>
   <navbar></navbar>
+  <UCard class="h-screen w-screen dark:bg-gray-800 rounded-none">
   <UContainer>
     <UCard
-      class="w-lg h-96 flex flex-wrap justify-center content-center m-3 transition-colors"
+      class="w-lg h-96 flex flex-wrap justify-center content-center m-3 transition-colors text-coral-400"
       :class="{ 'bg-emerald-100': isOverDropZone }"
       ref="dropZoneRef"
     >
@@ -301,6 +302,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop); // variable that ch
       </UTable>
     </UCard>
   </UContainer>
+  </UCard>
 </template>
 
 <style scoped />

pages/dashboard.vue

@@ -353,10 +353,10 @@ async function updateTeamData() {
             <div class="h-40 overflow-y-auto px-4 rounded-md">
               <div
                 v-for="(event, index) in pastEvents"
-                class="bg-gray-100 rounded-md"
+                class="bg-gray-100 rounded-md dark:bg-gray-800"
               >
                 <div class="my-2 p-2">
-                  <p class="font-medium">{{ event.name }}</p>
+                  <p class="font-medium dark:text-white">{{ event.name }}</p>
                   <UButton
                     class="rounded-full my-0.5"
                     icon="i-heroicons-map-pin-solid"
@@ -373,19 +373,19 @@ async function updateTeamData() {
                   />
                   <div class="flex my-0.5">
                     <UButton
-                      class="rounded-full mx-0.5"
+                      class="rounded-full mx-0.5 dark:hover:bg-primary-950"
                       icon="i-heroicons-calendar-days-solid"
                       variant="outline"
-                      color="gray"
+                      color="primary"
                     />
                     <UButton
                       v-if="typeof event.week === 'number'"
-                      class="rounded-full mx-0.5 mr-1"
+                      class="rounded-full mx-0.5 mr-1 dark:hover:bg-primary-950"
                       :label="'Week ' + (parseInt(event.week) + 1)"
-                      color="gray"
+                      color="primary"
                       variant="outline"
                     />
-                    <p class="my-auto mx-0.5">
+                    <p class="my-auto mx-0.5 dark:text-white">
                       {{
                         months.at(event.start_date.split('-')[1] - 1) +
                         ' ' +
@@ -416,7 +416,7 @@ async function updateTeamData() {
                         class="rounded-full mx-0.5 mr-1"
                         color="primary"
                       />
-                      <p class="my-auto mx-0.5 font-sans">
+                      <p class="my-auto mx-0.5 font-sans dark:text-white">
                         {{ placeify(teamEventData[index].rank) }} Place with a
                         Record of
                         {{
@@ -551,7 +551,7 @@ async function updateTeamData() {
               </div>
             </div>
             <div v-else>
-              <p class="font-medium text-xl text-center">No Events Scheduled</p>
+              <p class="font-medium text-xl text-center !text-primary">No Events Scheduled</p>
               <NuxtImg
                 src="/sadcookie.png"
                 class="mx-auto"

pages/login.vue

@@ -56,6 +56,7 @@ async function login(username: string, password: string) {
 </script>
 
 <template>
+  <UCard class="h-screen w-screen dark:bg-gray-800 rounded-none">
   <html>
     <head>
       <meta
@@ -74,7 +75,7 @@ async function login(username: string, password: string) {
     <LazyUCard>
       <template #header>
         <h2
-          class="font-semibold text-xl text-gray-900 dark:text-white leading-tight"
+          class="font-semibold text-xl text-gray-900 dark:text-primary leading-tight"
         >
           {{ 'Login' }}
         </h2>
@@ -140,6 +141,7 @@ async function login(username: string, password: string) {
       </LazyUForm>
     </LazyUCard>
   </LazyUContainer>
+  </UCard>
 </template>
 
 <style scoped>

pages/matches.vue

@@ -102,13 +102,14 @@ async function setup() {
   <OuterComponents>
     <VDataTable
       :loading="pending"
-      class="max-h-dvh overflow-auto"
+      class="max-h-dvh overflow-auto dark:bg-gray-800 dark:text-white border-4 dark:border-gray-700"
       :headers="headers"
       :items="items"
       item-key="name"
       density="compact"
       :items-per-page="-1"
       v-model:sort-by="sortBy"
+
     >
       <template v-slot:item.notes="row">
         <UPopover :popper="{ offsetDistance: 15 }">
@@ -120,7 +121,7 @@ async function setup() {
           />
           <template #panel>
             <UContainer
-              class="m-auto max-w-lg min-w-[15rem] overflow-y-auto"
+              class="m-auto max-w-lg min-w-[15rem] overflow-y-auto border-2"
               style="max-height: 20rem; min-height: 10rem"
             >
               <br />

pages/notes.vue

@@ -60,8 +60,9 @@ async function submit() {
 
 <template>
   <Navbar notes-mode></Navbar>
-  <div class="flex justify-center">
-    <UCard class="max-w-xl flex-grow m-5">
+  <UCard class="h-screen w-screen rounded-none">
+    <div class="flex justify-center">
+    <UCard class="max-w-xl flex-grow m-5 border-4 dark:border-gray-800">
       <template #default>
         <div class="pb-1.5">
           <UInput
@@ -97,6 +98,7 @@ async function submit() {
       </template>
     </UCard>
   </div>
+  </UCard>
 </template>
 
 <style scoped></style>

pages/predict.vue

@@ -355,15 +355,15 @@ watch(pending, () => {
             </p>
             <p
               v-else
-              class="font-semibold"
+              class="font-semibold !text-primary"
             >
               vs
             </p>
           </div>
         </UContainer>
         <UContainer
           :class="
-            'flex bg-red-100 p-5 mt-4 rounded-sm outline outline-3 ' +
+            'flex bg-red-100 dark:bg-red-400 dark:outline-red-400 p-5 mt-4 rounded-sm outline outline-3 ' +
             winningTeamColor[0]
           "
         >
@@ -411,7 +411,7 @@ watch(pending, () => {
           </UInput>
         </UContainer>
         <template #footer>
-          <div class="text-center text-xs">
+          <div class="text-center text-xs !text-primary">
             <p v-if="!pending">
               {{
                 'Accuracy: ' +

pages/scout.vue

@@ -175,8 +175,9 @@ async function submit() {
 
 <template>
   <Navbar scout-mode></Navbar>
+  <UCard class="h-screen w-screen overflow-y-auto rounded-none">
   <div class="flex justify-center">
-    <UCard class="max-w-xl flex-grow m-5">
+    <UCard class="max-w-xl flex-grow m-5 dark:bg-gray-800">
       <template #header>
         <div style="display: flex">
           <div class="flex-0 pr-2">
@@ -482,7 +483,7 @@ async function submit() {
         <!-- A general notes area using the NUXT UI UTextarea-->
         <UTextarea
           v-model="scoutData.notes.notes"
-          color="yellow"
+          color="red"
           placeholder="Other notes..."
         />
         <br />
@@ -511,6 +512,7 @@ async function submit() {
       </template>
     </UCard>
   </div>
+  </UCard>
 </template>
 
 <style scoped></style>

pages/settings.vue

@@ -15,7 +15,7 @@ const isDark = computed({
     return colorMode.value === 'dark';
   },
   set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+     colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
   },
 });
 </script>
@@ -56,4 +56,4 @@ const isDark = computed({
   </OuterComponents>
 </template>
 
-<style scoped></style>
+<style scoped></style>