diff --git a/frontend/public/index.html b/frontend/public/index.html
index e2ce12fe..42895747 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -37,6 +37,17 @@
       loadTrackingScripts()
     </script>
 
+    <script>
+      // Prevent flash of light theme when dark mode is preferred
+      (function() {
+        try {
+          var dark = localStorage.getItem('darkMode');
+          if (dark === 'true' || (dark === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.style.backgroundColor = '#1E1E1E';
+          }
+        } catch(e) {}
+      })();
+    </script>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f6189b38..d27b14cf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -20,7 +20,7 @@
     <CookieConsent />
     <div
       v-if="showHeader"
-      class="tw-fixed tw-z-40 tw-h-14 tw-w-screen tw-bg-white sm:tw-h-16"
+      class="tw-fixed tw-z-40 tw-h-14 tw-w-screen tw-bg-surface sm:tw-h-16"
       dark
     >
       <div
@@ -133,17 +133,18 @@ html {
 }
 
 .v-btn.v-btn--is-elevated {
-  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15) !important;
-  -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15) !important;
-  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15) !important;
-  border: 1px solid theme("colors.light-gray-stroke");
+  -webkit-box-shadow: 0px 2px 6px 0px var(--color-shadow) !important;
+  -moz-box-shadow: 0px 2px 6px 0px var(--color-shadow) !important;
+  box-shadow: 0px 2px 6px 0px var(--color-shadow) !important;
+  border: 1px solid var(--color-border);
 }
 
-.v-btn.v-btn--is-elevated.tw-bg-white {
-  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) !important;
-  -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) !important;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) !important;
-  border: 1px solid theme("colors.off-white");
+.v-btn.v-btn--is-elevated.tw-bg-white,
+.v-btn.v-btn--is-elevated.tw-bg-surface {
+  -webkit-box-shadow: 0px 1px 4px 0px var(--color-shadow) !important;
+  -moz-box-shadow: 0px 1px 4px 0px var(--color-shadow) !important;
+  box-shadow: 0px 1px 4px 0px var(--color-shadow) !important;
+  border: 1px solid var(--color-surface-variant);
 }
 
 .v-btn.v-btn--is-elevated.primary,
@@ -174,10 +175,10 @@ html {
 .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
   > .v-input__control
   > .v-input__slot {
-  filter: drop-shadow(0 0.5px 2px rgba(0, 0, 0, 0.1)) !important;
-  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1) !important;
+  filter: drop-shadow(0 0.5px 2px var(--color-shadow-light)) !important;
+  box-shadow: inset 0 -1px 0 0 var(--color-shadow-light) !important;
   border-radius: theme("borderRadius.md") !important;
-  border: 1px solid #4f4f4f1f !important;
+  border: 1px solid var(--color-input-border) !important;
 }
 .v-menu__content {
   box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.1),
@@ -236,6 +237,7 @@ import {
   signInOutlook,
   isPremiumUser,
 } from "@/utils"
+import { getDarkModePreference, applyDarkMode } from "@/utils/dark_mode"
 import {
   authTypes,
   calendarTypes,
@@ -410,6 +412,8 @@ export default {
   },
 
   async created() {
+    applyDarkMode(this.$vuetify, getDarkModePreference())
+
     await get("/user/profile")
       .then((authUser) => {
         this.setAuthUser(authUser)
diff --git a/frontend/src/components/AlertText.vue b/frontend/src/components/AlertText.vue
index 079def90..eb42fb03 100644
--- a/frontend/src/components/AlertText.vue
+++ b/frontend/src/components/AlertText.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-flex tw-items-start tw-gap-1 tw-rounded tw-bg-light-gray tw-p-2 tw-text-dark-gray"
+    class="tw-flex tw-items-start tw-gap-1 tw-rounded tw-bg-surface-muted tw-p-2 tw-text-text-muted"
   >
     <v-icon class="-tw-mt-px tw-text-base">mdi-alert-circle</v-icon>
     <span>
diff --git a/frontend/src/components/AuthUserMenu.vue b/frontend/src/components/AuthUserMenu.vue
index d19e0613..aa627ff2 100644
--- a/frontend/src/components/AuthUserMenu.vue
+++ b/frontend/src/components/AuthUserMenu.vue
@@ -30,13 +30,13 @@
           target="_blank"
         >
           <v-list-item-title class="tw-flex tw-items-center tw-gap-1">
-            <v-icon class="tw-mr-1" small color="black">mdi-message</v-icon>
+            <v-icon class="tw-mr-1 tw-text-text-primary" small>mdi-message</v-icon>
             Give feedback
           </v-list-item-title>
         </v-list-item>
         <v-list-item id="settings-btn" @click="goToSettings">
           <v-list-item-title class="tw-flex tw-items-center tw-gap-1">
-            <v-icon class="tw-mr-1" small color="black">mdi-cog</v-icon>
+            <v-icon class="tw-mr-1 tw-text-text-primary" small>mdi-cog</v-icon>
             Settings
           </v-list-item-title>
         </v-list-item>
diff --git a/frontend/src/components/CookieConsent.vue b/frontend/src/components/CookieConsent.vue
index e29cb7e3..4c22aee7 100644
--- a/frontend/src/components/CookieConsent.vue
+++ b/frontend/src/components/CookieConsent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showBanner"
-    class="tw-fixed tw-bottom-5 tw-right-5 tw-z-50 tw-w-80 tw-max-w-[calc(100vw-40px)] tw-rounded-xl tw-bg-white tw-shadow-2xl max-[480px]:tw-bottom-2.5 max-[480px]:tw-left-2.5 max-[480px]:tw-w-[calc(100vw-20px)] max-[480px]:tw-max-w-none"
+    class="tw-fixed tw-bottom-5 tw-right-5 tw-z-50 tw-w-80 tw-max-w-[calc(100vw-40px)] tw-rounded-xl tw-bg-surface tw-shadow-2xl max-[480px]:tw-bottom-2.5 max-[480px]:tw-left-2.5 max-[480px]:tw-w-[calc(100vw-20px)] max-[480px]:tw-max-w-none"
   >
     <div
       class="tw-flex tw-items-center tw-justify-between tw-px-4 tw-pt-4 tw-font-medium"
@@ -58,7 +58,7 @@
       >
         <button
           @click="showCustomizeSection = !showCustomizeSection"
-          class="tw-w-full tw-flex-1 tw-cursor-pointer tw-rounded-md tw-border tw-border-solid tw-border-gray tw-bg-white tw-px-3 tw-py-2 tw-text-xs tw-font-medium tw-text-very-dark-gray sm:tw-w-auto"
+          class="tw-w-full tw-flex-1 tw-cursor-pointer tw-rounded-md tw-border tw-border-solid tw-border-gray tw-bg-surface tw-px-3 tw-py-2 tw-text-xs tw-font-medium tw-text-text-secondary sm:tw-w-auto"
         >
           Customize
         </button>
diff --git a/frontend/src/components/CookieSettings.vue b/frontend/src/components/CookieSettings.vue
index a9c26ea4..2771024e 100644
--- a/frontend/src/components/CookieSettings.vue
+++ b/frontend/src/components/CookieSettings.vue
@@ -2,7 +2,7 @@
   <div class="mx-auto tw-w-full md:tw-w-2/3 lg:tw-w-1/2 tw-px-5 tw-pt-10">
     <h2 class="tw-mb-2.5 tw-text-xl tw-font-semibold">Cookie Preferences</h2>
     <div class="tw-mb-5 tw-flex tw-flex-col tw-gap-6">
-      <div class="tw-rounded-lg tw-border tw-bg-white tw-p-5">
+      <div class="tw-rounded-lg tw-border tw-bg-surface tw-p-5">
         <v-checkbox v-model="preferences.necessary" disabled>
           <template v-slot:label>
             <div>
@@ -23,7 +23,7 @@
         </div>
       </div>
 
-      <div class="tw-rounded-lg tw-border tw-bg-white tw-p-5">
+      <div class="tw-rounded-lg tw-border tw-bg-surface tw-p-5">
         <v-checkbox v-model="preferences.analytics">
           <template v-slot:label>
             <div>
@@ -48,7 +48,7 @@
         </div>
       </div>
 
-      <div class="tw-rounded-lg tw-border tw-bg-white tw-p-5">
+      <div class="tw-rounded-lg tw-border tw-bg-surface tw-p-5">
         <div>
           <v-checkbox v-model="preferences.advertising">
             <template v-slot:label>
diff --git a/frontend/src/components/EventItem.vue b/frontend/src/components/EventItem.vue
index b22179ed..e5126fdb 100644
--- a/frontend/src/components/EventItem.vue
+++ b/frontend/src/components/EventItem.vue
@@ -7,7 +7,7 @@
   >
     <v-container
       v-ripple
-      class="tw-flex tw-min-h-16 tw-items-center tw-justify-between tw-rounded-lg tw-bg-white tw-px-4 tw-py-2.5 tw-text-black tw-drop-shadow tw-transition-all hover:tw-drop-shadow-md sm:tw-py-3"
+      class="tw-flex tw-min-h-16 tw-items-center tw-justify-between tw-rounded-lg tw-bg-surface tw-px-4 tw-py-2.5 tw-text-text-primary tw-drop-shadow tw-transition-all hover:tw-drop-shadow-md sm:tw-py-3"
       :data-ph-capture-attribute-event-id="event._id"
       :data-ph-capture-attribute-event-name="event.name"
     >
@@ -16,7 +16,7 @@
           class="tw-flex tw-size-10 tw-shrink-0 tw-items-center tw-justify-center tw-rounded"
           :class="{
             'tw-bg-pale-green': isOwner,
-            'tw-bg-off-white': !isOwner,
+            'tw-bg-surface-variant': !isOwner,
           }"
         >
           <v-icon :color="isOwner ? 'green' : 'grey'">{{
@@ -31,7 +31,7 @@
         </div>
         <div class="tw-ml-3">
           <div>{{ this.event.name }}</div>
-          <div class="tw-text-sm tw-font-light tw-text-very-dark-gray">
+          <div class="tw-text-sm tw-font-light tw-text-text-secondary">
             {{ dateString }}
           </div>
         </div>
@@ -46,7 +46,7 @@
         <v-chip
           v-else
           small
-          class="tw-m-0.5 tw-bg-off-white tw-text-very-dark-gray"
+          class="tw-m-0.5 tw-bg-surface-variant tw-text-text-secondary"
         >
           <v-icon left small> mdi-account-multiple </v-icon>
           {{ this.event.numResponses }}
@@ -134,7 +134,7 @@
                 <v-list-item
                   v-bind="attrsMenu"
                   v-on="onMenu"
-                  class="tw-cursor-pointer tw-pr-1 hover:tw-bg-light-gray"
+                  class="tw-cursor-pointer tw-pr-1 hover:tw-bg-surface-muted"
                 >
                   <v-list-item-title>Move to</v-list-item-title>
                   <v-list-item-icon>
diff --git a/frontend/src/components/EventType.vue b/frontend/src/components/EventType.vue
index a2f2283d..b98c5ea4 100644
--- a/frontend/src/components/EventType.vue
+++ b/frontend/src/components/EventType.vue
@@ -12,7 +12,7 @@
             enablePaywall &&
             !isPremiumUser
           "
-          class="tw-flex tw-items-baseline tw-gap-2 tw-text-sm tw-font-normal tw-text-very-dark-gray"
+          class="tw-flex tw-items-baseline tw-gap-2 tw-text-sm tw-font-normal tw-text-text-secondary"
         >
           <div>
             {{ authUser?.numEventsCreated }} / {{ numFreeEvents }} free events
@@ -30,7 +30,7 @@
         v-if="eventType.header === 'Events I created'"
         text
         @click="createFolder"
-        class="tw-hidden tw-text-very-dark-gray sm:tw-block"
+        class="tw-hidden tw-text-text-secondary sm:tw-block"
       >
         <v-icon class="tw-mr-2 tw-text-lg">mdi-folder-plus</v-icon>
         New folder
@@ -38,7 +38,7 @@
       <div
         v-if="eventType.events.length > defaultNumEventsToShow"
         @click="toggleShowAll"
-        class="tw-mt-2 tw-cursor-pointer tw-text-sm tw-font-normal tw-text-very-dark-gray sm:tw-hidden"
+        class="tw-mt-2 tw-cursor-pointer tw-text-sm tw-font-normal tw-text-text-secondary sm:tw-hidden"
       >
         Show {{ showAll ? "less" : "more"
         }}<v-icon :class="showAll && 'tw-rotate-180'">mdi-chevron-down</v-icon>
@@ -47,7 +47,7 @@
 
     <div
       v-if="eventType.events.length === 0"
-      class="tw-my-3 tw-text-very-dark-gray"
+      class="tw-my-3 tw-text-text-secondary"
     >
       {{ emptyText.length > 0 ? emptyText : "No events yet!" }}
     </div>
@@ -83,7 +83,7 @@
       </v-expand-transition>
       <div
         @click="toggleShowAll"
-        class="tw-mt-4 tw-hidden tw-cursor-pointer tw-text-sm tw-text-very-dark-gray sm:tw-block"
+        class="tw-mt-4 tw-hidden tw-cursor-pointer tw-text-sm tw-text-text-secondary sm:tw-block"
       >
         Show {{ showAll ? "less" : "more"
         }}<v-icon :class="showAll && 'tw-rotate-180'">mdi-chevron-down</v-icon>
diff --git a/frontend/src/components/FAQ.vue b/frontend/src/components/FAQ.vue
index 9e9d0708..e68cf06c 100644
--- a/frontend/src/components/FAQ.vue
+++ b/frontend/src/components/FAQ.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="tw-flex tw-w-full tw-cursor-pointer tw-flex-col tw-overflow-hidden tw-rounded-md tw-border-[1px] tw-bg-white tw-p-4 tw-text-left tw-shadow-sm tw-transition-all sm:tw-p-6"
+    class="tw-flex tw-w-full tw-cursor-pointer tw-flex-col tw-overflow-hidden tw-rounded-md tw-border-[1px] tw-bg-surface tw-p-4 tw-text-left tw-shadow-sm tw-transition-all sm:tw-p-6"
     :class="{
       'tw-border-green': toggled,
-      'tw-border-light-gray-stroke': !toggled,
+      'tw-border-border-default': !toggled,
     }"
     @click="() => (toggled = !toggled)"
   >
@@ -39,7 +39,7 @@
           </div>
           <div
             v-if="authRequired"
-            class="tw-mt-6 tw-text-sm tw-font-medium tw-text-dark-gray"
+            class="tw-mt-6 tw-text-sm tw-font-medium tw-text-text-muted"
           >
             *
             <a @click.stop="$emit('signIn')" class="tw-text-green tw-underline"
diff --git a/frontend/src/components/FeatureNotReadyDialog.vue b/frontend/src/components/FeatureNotReadyDialog.vue
index 8409eae3..93b6f6ab 100644
--- a/frontend/src/components/FeatureNotReadyDialog.vue
+++ b/frontend/src/components/FeatureNotReadyDialog.vue
@@ -13,7 +13,7 @@
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
-      <v-card-text class="tw-text-very-dark-gray">
+      <v-card-text class="tw-text-text-secondary">
         You've caught us a bit early! We're considering adding folders to
         Timeful, and will do so once we get enough demand from users.
         <v-textarea
diff --git a/frontend/src/components/FormerlyKnownAs.vue b/frontend/src/components/FormerlyKnownAs.vue
index 236ea43b..ffa7b638 100644
--- a/frontend/src/components/FormerlyKnownAs.vue
+++ b/frontend/src/components/FormerlyKnownAs.vue
@@ -3,12 +3,12 @@
     <div
       class="tw-absolute tw-left-8 tw-top-0 tw-flex tw-items-center sm:tw-left-12"
     >
-      <div class="-tw-mt-3.5 tw-text-dark-gray">
+      <div class="-tw-mt-3.5 tw-text-text-muted">
         <v-icon>mdi-arrow-up-left</v-icon>
       </div>
       <a
         href="/blog/schej-is-now-timeful/"
-        class="tw-cursor-pointer tw-select-none tw-text-sm tw-text-dark-gray hover:tw-underline"
+        class="tw-cursor-pointer tw-select-none tw-text-sm tw-text-text-muted hover:tw-underline"
       >
         Formerly known as "Schej"
       </a>
diff --git a/frontend/src/components/FriendItem.vue b/frontend/src/components/FriendItem.vue
index 8bf7da56..d7dd12ad 100644
--- a/frontend/src/components/FriendItem.vue
+++ b/frontend/src/components/FriendItem.vue
@@ -2,7 +2,7 @@
   <v-container
     @click="$emit('click')"
     v-ripple
-    class="tw-flex tw-justify-between tw-rounded-md tw-bg-light-gray tw-py-2 tw-align-middle tw-text-black"
+    class="tw-flex tw-justify-between tw-rounded-md tw-bg-surface-muted tw-py-2 tw-align-middle tw-text-text-primary"
   >
     <div class="tw-flex">
       <div class="tw-mr-3">
diff --git a/frontend/src/components/NewEvent.vue b/frontend/src/components/NewEvent.vue
index 56fe1630..80384282 100644
--- a/frontend/src/components/NewEvent.vue
+++ b/frontend/src/components/NewEvent.vue
@@ -11,7 +11,7 @@
         </div>
         <div
           v-if="dialog && showHelp"
-          class="tw-text-xs tw-font-normal tw-italic tw-text-dark-gray"
+          class="tw-text-xs tw-font-normal tw-italic tw-text-text-muted"
         >
           Ideal for one-time / recurring meetings
         </div>
@@ -69,7 +69,7 @@
         <div>
           <v-expand-transition>
             <div v-if="!daysOnly">
-              <div class="tw-mb-2 tw-text-lg tw-text-black">
+              <div class="tw-mb-2 tw-text-lg tw-text-text-primary">
                 What times might work?
               </div>
               <v-expand-transition>
@@ -109,8 +109,8 @@
                       class="tw-text-sm"
                       :class="
                         specificTimesEnabled
-                          ? 'tw-text-black'
-                          : 'tw-text-very-dark-gray'
+                          ? 'tw-text-text-primary'
+                          : 'tw-text-text-secondary'
                       "
                     >
                       Set specific times per day
@@ -120,7 +120,7 @@
                     <v-expand-transition>
                       <div
                         v-if="specificTimesEnabled"
-                        class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                        class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                       >
                         {{ message }}
                       </div>
@@ -131,7 +131,7 @@
             </div>
           </v-expand-transition>
 
-          <div class="tw-mb-2 tw-text-lg tw-text-black">
+          <div class="tw-mb-2 tw-text-lg tw-text-text-primary">
             What
             {{ selectedDateOption === dateOptions.SPECIFIC ? "dates" : "days" }}
             might work?
@@ -147,7 +147,7 @@
 
           <v-expand-transition>
             <div v-if="selectedDateOption === dateOptions.SPECIFIC || daysOnly">
-              <div class="tw-mb-2 tw-text-xs tw-text-dark-gray">
+              <div class="tw-mb-2 tw-text-xs tw-text-text-muted">
                 Drag to select multiple dates
               </div>
               <v-input
@@ -189,7 +189,7 @@
               </v-input>
               <v-checkbox class="tw-mt-2" v-model="startOnMonday" hide-details>
                 <template v-slot:label>
-                  <span class="tw-text-sm tw-text-very-dark-gray">
+                  <span class="tw-text-sm tw-text-text-secondary">
                     Start on Monday
                   </span>
                 </template>
@@ -205,7 +205,7 @@
           class="tw-mt-2"
         >
           <template v-slot:label>
-            <span class="tw-text-sm tw-text-very-dark-gray"
+            <span class="tw-text-sm tw-text-text-secondary"
               >Email me each time someone joins my event</span
             >
           </template>
@@ -224,9 +224,9 @@
           </template>
           <template v-slot:message="{ key, message }">
             <div
-              class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+              class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
             >
-              <span class="tw-font-medium tw-text-very-dark-gray"
+              <span class="tw-font-medium tw-text-text-secondary"
                 ><a @click="$emit('signIn')">Sign in</a>
                 to use this feature
               </span>
@@ -246,13 +246,13 @@
                 v-show="authUser"
                 ref="emailInput"
                 @requestContactsAccess="requestContactsAccess"
-                labelColor="tw-text-very-dark-gray"
+                labelColor="tw-text-text-secondary"
                 :addedEmails="addedEmails"
                 @update:emails="(newEmails) => (emails = newEmails)"
               >
                 <template v-slot:header>
                   <div class="tw-flex tw-gap-1">
-                    <div class="tw-text-very-dark-gray">
+                    <div class="tw-text-text-secondary">
                       Remind people to fill out the event
                     </div>
 
@@ -285,7 +285,7 @@
           >
             <div class="tw-flex tw-flex-col tw-gap-5 tw-pt-2">
               <div v-if="!edit" class="tw-flex tw-items-center tw-gap-x-2">
-                <div class="tw-text-sm tw-text-black">Time increment:</div>
+                <div class="tw-text-sm tw-text-text-primary">Time increment:</div>
                 <v-select
                   v-model="timeIncrement"
                   dense
@@ -301,13 +301,13 @@
                 hide-details
               >
                 <template v-slot:label>
-                  <span class="tw-text-sm tw-text-black">
+                  <span class="tw-text-sm tw-text-text-primary">
                     Collect respondents' email addresses
                   </span>
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
                     {{ message }}
                   </div>
@@ -326,9 +326,9 @@
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
-                    <span class="tw-font-medium tw-text-very-dark-gray"
+                    <span class="tw-font-medium tw-text-text-secondary"
                       ><a @click="$emit('signIn')">Sign in</a>
                       to use this feature
                     </span>
@@ -341,13 +341,13 @@
                 messages="Only show responses to event creator"
               >
                 <template v-slot:label>
-                  <span class="tw-text-sm tw-text-black">
+                  <span class="tw-text-sm tw-text-text-primary">
                     Hide responses from respondents
                   </span>
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
                     {{ message }}
                   </div>
@@ -366,10 +366,10 @@
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
                     {{ message }}
-                    <span class="tw-font-medium tw-text-very-dark-gray"
+                    <span class="tw-font-medium tw-text-text-secondary"
                       ><a @click="$emit('signIn')">Sign in</a>
                       to use this feature
                     </span>
@@ -384,7 +384,7 @@
                 <template v-slot:label>
                   <div
                     :class="!sendEmailAfterXResponsesEnabled && 'tw-opacity-50'"
-                    class="tw-flex tw-items-center tw-gap-x-2 tw-text-sm tw-text-very-dark-gray"
+                    class="tw-flex tw-items-center tw-gap-x-2 tw-text-sm tw-text-text-secondary"
                   >
                     <div>Email me after</div>
                     <v-text-field
diff --git a/frontend/src/components/NewGroup.vue b/frontend/src/components/NewGroup.vue
index e80e7b75..d412a1c6 100644
--- a/frontend/src/components/NewGroup.vue
+++ b/frontend/src/components/NewGroup.vue
@@ -11,7 +11,7 @@
         </div>
         <div
           v-if="dialog && showHelp"
-          class="tw-text-xs tw-font-normal tw-italic tw-text-dark-gray"
+          class="tw-text-xs tw-font-normal tw-italic tw-text-text-muted"
         >
           Ideal for viewing weekly calendar availability
         </div>
@@ -54,7 +54,7 @@
         />
 
         <div>
-          <div class="tw-mb-2 tw-text-lg tw-text-black">Time range</div>
+          <div class="tw-mb-2 tw-text-lg tw-text-text-primary">Time range</div>
           <div class="tw-flex tw-items-baseline tw-justify-center tw-space-x-2">
             <v-select
               v-model="startTime"
@@ -75,7 +75,7 @@
         </div>
 
         <div>
-          <div class="tw-mb-2 tw-text-lg tw-text-black">Day range</div>
+          <div class="tw-mb-2 tw-text-lg tw-text-text-primary">Day range</div>
           <v-input
             v-model="selectedDaysOfWeek"
             hide-details="auto"
@@ -99,7 +99,7 @@
           </v-input>
           <v-checkbox class="tw-mt-2" v-model="startOnMonday" hide-details>
             <template v-slot:label>
-              <span class="tw-text-sm tw-text-very-dark-gray">
+              <span class="tw-text-sm tw-text-text-secondary">
                 Start on Monday
               </span>
             </template>
@@ -114,7 +114,7 @@
           @requestContactsAccess="requestContactsAccess"
         >
           <template v-slot:header>
-            <div class="tw-mb-2 tw-text-lg tw-text-black">Members</div>
+            <div class="tw-mb-2 tw-text-lg tw-text-text-primary">Members</div>
           </template>
         </EmailInput>
         <!-- </div> -->
diff --git a/frontend/src/components/NewSignUp.vue b/frontend/src/components/NewSignUp.vue
index 31beb209..aa0e3e9c 100644
--- a/frontend/src/components/NewSignUp.vue
+++ b/frontend/src/components/NewSignUp.vue
@@ -11,7 +11,7 @@
         </div>
         <div
           v-if="dialog && showHelp"
-          class="tw-text-xs tw-font-normal tw-italic tw-text-dark-gray"
+          class="tw-text-xs tw-font-normal tw-italic tw-text-text-muted"
         >
           Ideal for events with sign up slots
         </div>
@@ -65,7 +65,7 @@
         <div>
           <v-expand-transition>
             <div v-if="!daysOnly">
-              <div class="tw-mb-2 tw-text-lg tw-text-black">
+              <div class="tw-mb-2 tw-text-lg tw-text-text-primary">
                 What times might work?
               </div>
               <div
@@ -94,7 +94,7 @@
             </div>
           </v-expand-transition>
 
-          <div class="tw-mb-2 tw-text-lg tw-text-black">
+          <div class="tw-mb-2 tw-text-lg tw-text-text-primary">
             What
             {{ selectedDateOption === dateOptions.SPECIFIC ? "dates" : "days" }}
             might work?
@@ -110,7 +110,7 @@
 
           <v-expand-transition>
             <div v-if="selectedDateOption === dateOptions.SPECIFIC || daysOnly">
-              <div class="tw-mb-2 tw-text-xs tw-text-dark-gray">
+              <div class="tw-mb-2 tw-text-xs tw-text-text-muted">
                 Drag to select multiple dates
               </div>
               <v-input
@@ -151,7 +151,7 @@
               </v-input>
               <v-checkbox class="tw-mt-2" v-model="startOnMonday" hide-details>
                 <template v-slot:label>
-                  <span class="tw-text-sm tw-text-very-dark-gray">
+                  <span class="tw-text-sm tw-text-text-secondary">
                     Start on Monday
                   </span>
                 </template>
@@ -162,7 +162,7 @@
 
         <v-checkbox v-model="notificationsEnabled" hide-details class="tw-mt-2">
           <template v-slot:label>
-            <span class="tw-text-sm tw-text-very-dark-gray"
+            <span class="tw-text-sm tw-text-text-secondary"
               >Email me each time someone signs up</span
             >
           </template>
@@ -170,7 +170,7 @@
 
         <v-checkbox v-model="collectEmails">
           <template v-slot:label>
-            <span class="tw-text-sm tw-text-very-dark-gray">
+            <span class="tw-text-sm tw-text-text-secondary">
               Collect email address on sign up
             </span>
           </template>
@@ -188,13 +188,13 @@
                 v-show="authUser"
                 ref="emailInput"
                 @requestContactsAccess="requestContactsAccess"
-                labelColor="tw-text-very-dark-gray"
+                labelColor="tw-text-text-secondary"
                 :addedEmails="addedEmails"
                 @update:emails="(newEmails) => (emails = newEmails)"
               >
                 <template v-slot:header>
                   <div class="tw-flex tw-gap-1">
-                    <div class="tw-text-very-dark-gray">
+                    <div class="tw-text-text-secondary">
                       Remind people to fill out the event
                     </div>
 
@@ -232,13 +232,13 @@
                 messages="Only show attendees to sign up creator"
               >
                 <template v-slot:label>
-                  <span class="tw-text-sm tw-text-black">
+                  <span class="tw-text-sm tw-text-text-primary">
                     Hide attendees from each other
                   </span>
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="-tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
                     {{ message }}
                   </div>
@@ -257,10 +257,10 @@
                 </template>
                 <template v-slot:message="{ key, message }">
                   <div
-                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-dark-gray"
+                    class="tw-pointer-events-auto -tw-mt-1 tw-ml-[32px] tw-text-xs tw-text-text-muted"
                   >
                     {{ message }}
-                    <span class="tw-font-medium tw-text-very-dark-gray"
+                    <span class="tw-font-medium tw-text-text-secondary"
                       ><a @click="$emit('signIn')">Sign in</a>
                       to use this feature
                     </span>
@@ -275,7 +275,7 @@
                 <template v-slot:label>
                   <div
                     :class="!sendEmailAfterXResponsesEnabled && 'tw-opacity-50'"
-                    class="tw-flex tw-items-center tw-gap-x-2 tw-text-sm tw-text-very-dark-gray"
+                    class="tw-flex tw-items-center tw-gap-x-2 tw-text-sm tw-text-text-secondary"
                   >
                     <div>Email me after</div>
                     <v-text-field
diff --git a/frontend/src/components/OverflowGradient.vue b/frontend/src/components/OverflowGradient.vue
index 756cf639..1f67e26b 100644
--- a/frontend/src/components/OverflowGradient.vue
+++ b/frontend/src/components/OverflowGradient.vue
@@ -3,8 +3,7 @@
     v-if="showGradient"
     class="tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-z-20 tw-flex tw-h-16 tw-items-end tw-justify-center"
     :style="{
-      background:
-        'linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
+      background: 'var(--gradient-overflow)',
     }"
   >
     <v-btn
diff --git a/frontend/src/components/SignInDialog.vue b/frontend/src/components/SignInDialog.vue
index 10f91624..9f98d559 100644
--- a/frontend/src/components/SignInDialog.vue
+++ b/frontend/src/components/SignInDialog.vue
@@ -12,7 +12,7 @@
           <v-btn
             block
             @click="signIn(calendarTypes.GOOGLE)"
-            class="tw-bg-white"
+            class="tw-bg-surface"
           >
             <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
               <v-img
@@ -29,7 +29,7 @@
           <v-btn
             block
             @click="signIn(calendarTypes.OUTLOOK)"
-            class="tw-bg-white"
+            class="tw-bg-surface"
           >
             <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
               <v-img
diff --git a/frontend/src/components/SlideToggle.vue b/frontend/src/components/SlideToggle.vue
index ad753752..dfa53a0d 100644
--- a/frontend/src/components/SlideToggle.vue
+++ b/frontend/src/components/SlideToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-w-fit tw-items-center tw-rounded-md tw-border tw-border-light-gray-stroke"
+    class="tw-relative tw-flex tw-w-fit tw-items-center tw-rounded-md tw-border tw-border-border-default"
   >
     <div
       class="tw-absolute tw-h-full tw-rounded-md tw-border tw-transition-all"
@@ -50,7 +50,7 @@ export default {
       defaultActiveClass: "tw-text-green tw-bg-green/5",
       defaultBorderClass: "tw-border-green",
       defaultBorderStyle: { boxShadow: "0px 2px 8px 0px #00994C40" },
-      inactiveClass: "tw-text-dark-gray tw-bg-off-white",
+      inactiveClass: "tw-text-text-muted tw-bg-surface-variant",
     }
   },
 
diff --git a/frontend/src/components/TeamsNotReadyDialog.vue b/frontend/src/components/TeamsNotReadyDialog.vue
index c86c1915..b1af1b61 100644
--- a/frontend/src/components/TeamsNotReadyDialog.vue
+++ b/frontend/src/components/TeamsNotReadyDialog.vue
@@ -13,7 +13,7 @@
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
-      <v-card-text class="tw-text-very-dark-gray">
+      <v-card-text class="tw-text-text-secondary">
         Teams are only available on the Timeful organization plan. Book a call
         with the founder to learn about how to upgrade.
       </v-card-text>
diff --git a/frontend/src/components/UserItem.vue b/frontend/src/components/UserItem.vue
index 33a9bd8e..40f2ea50 100644
--- a/frontend/src/components/UserItem.vue
+++ b/frontend/src/components/UserItem.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container
     @click="$emit('click')"
-    class="tw-flex tw-justify-between tw-rounded-md tw-bg-light-gray tw-py-2 tw-align-middle tw-text-black"
+    class="tw-flex tw-justify-between tw-rounded-md tw-bg-surface-muted tw-py-2 tw-align-middle tw-text-text-primary"
   >
     <div class="tw-mt-2 tw-flex">
       <div class="tw-mr-3">
diff --git a/frontend/src/components/When2meetImportDialog.vue b/frontend/src/components/When2meetImportDialog.vue
index 5d4b8474..8a7bbbe6 100644
--- a/frontend/src/components/When2meetImportDialog.vue
+++ b/frontend/src/components/When2meetImportDialog.vue
@@ -15,7 +15,7 @@
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
-      <v-card-text class="tw-text-very-dark-gray">
+      <v-card-text class="tw-text-text-secondary">
         <p class="tw-mb-4">
           If someone accidentally sends you a When2meet link instead of a
           Timeful, you can convert it by following these steps:
diff --git a/frontend/src/components/calendar_permission_dialogs/AppleCredentials.vue b/frontend/src/components/calendar_permission_dialogs/AppleCredentials.vue
index f098a23c..9e302d1e 100644
--- a/frontend/src/components/calendar_permission_dialogs/AppleCredentials.vue
+++ b/frontend/src/components/calendar_permission_dialogs/AppleCredentials.vue
@@ -16,9 +16,9 @@
         </div>
       </div>
       <div class="tw-flex tw-flex-col tw-gap-2">
-        <div class="tw-text-sm tw-text-very-dark-gray">
+        <div class="tw-text-sm tw-text-text-secondary">
           Generate an
-          <span class="tw-font-medium tw-text-black"
+          <span class="tw-font-medium tw-text-text-primary"
             >app-specific password</span
           >
           to use with Timeful at
@@ -29,7 +29,7 @@
             >https://appleid.apple.com/account/manage</a
           >. Copy and paste the generated app password below.
         </div>
-        <div class="tw-text-sm tw-text-very-dark-gray">
+        <div class="tw-text-sm tw-text-text-secondary">
           Your credentials will be stored and encrypted.
         </div>
       </div>
diff --git a/frontend/src/components/calendar_permission_dialogs/CalendarPermissionsCard.vue b/frontend/src/components/calendar_permission_dialogs/CalendarPermissionsCard.vue
index 20a4a54f..8e9c0e37 100644
--- a/frontend/src/components/calendar_permission_dialogs/CalendarPermissionsCard.vue
+++ b/frontend/src/components/calendar_permission_dialogs/CalendarPermissionsCard.vue
@@ -27,7 +27,7 @@
 
     <div class="tw-text-md tw-mb-4 tw-font-medium">These permissions will</div>
     <div
-      class="tw-mb-8 tw-flex tw-flex-col tw-gap-4 tw-text-sm tw-text-very-dark-gray"
+      class="tw-mb-8 tw-flex tw-flex-col tw-gap-4 tw-text-sm tw-text-text-secondary"
     >
       <div>Allow us to display the names/times of your calendar events</div>
       <div>
diff --git a/frontend/src/components/calendar_permission_dialogs/CreateAccount.vue b/frontend/src/components/calendar_permission_dialogs/CreateAccount.vue
index 4ca22382..f476994b 100644
--- a/frontend/src/components/calendar_permission_dialogs/CreateAccount.vue
+++ b/frontend/src/components/calendar_permission_dialogs/CreateAccount.vue
@@ -19,7 +19,7 @@
         @click="$emit('signInLinkApple')"
         class="tw-mb-3 tw-w-full"
       />
-      <div class="tw-text-center tw-text-xs tw-text-dark-gray">
+      <div class="tw-text-center tw-text-xs tw-text-text-muted">
         By continuing, you agree to our
         <router-link
           class="tw-text-blue"
@@ -31,7 +31,7 @@
     </div>
     <div v-else>
       <div
-        class="tw-flex tw-items-center tw-justify-center tw-text-sm tw-text-dark-gray"
+        class="tw-flex tw-items-center tw-justify-center tw-text-sm tw-text-text-muted"
       >
         <v-icon class="tw-mx-2 tw-text-green" size="16"
           >mdi-check-circle</v-icon
diff --git a/frontend/src/components/calendar_permission_dialogs/MarkAvailabilityDialog.vue b/frontend/src/components/calendar_permission_dialogs/MarkAvailabilityDialog.vue
index 9c114b02..67c73838 100644
--- a/frontend/src/components/calendar_permission_dialogs/MarkAvailabilityDialog.vue
+++ b/frontend/src/components/calendar_permission_dialogs/MarkAvailabilityDialog.vue
@@ -12,11 +12,11 @@
             How would you like to add <br class="tw-block sm:tw-hidden" />
             your availability?
           </div>
-          <div class="tw-pb-4 tw-text-center tw-text-xs tw-text-dark-gray">
+          <div class="tw-pb-4 tw-text-center tw-text-xs tw-text-text-muted">
             You can always manually edit after autofilling
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2">
-            <v-btn block @click="autofillWithGcal" class="tw-bg-white">
+            <v-btn block @click="autofillWithGcal" class="tw-bg-surface">
               <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
                 <v-img
                   class="tw-flex-initial"
@@ -29,7 +29,7 @@
                 <v-spacer />
               </div>
             </v-btn>
-            <v-btn block @click="autofillWithApple" class="tw-bg-white">
+            <v-btn block @click="autofillWithApple" class="tw-bg-surface">
               <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
                 <v-img
                   class="tw-flex-initial"
@@ -42,7 +42,7 @@
                 <v-spacer />
               </div>
             </v-btn>
-            <v-btn block @click="autofillWithOutlook" class="tw-bg-white">
+            <v-btn block @click="autofillWithOutlook" class="tw-bg-surface">
               <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
                 <v-img
                   class="tw-flex-initial"
@@ -58,7 +58,7 @@
             <div class="tw-flex tw-items-center tw-gap-3">
               <v-divider />
               <div
-                class="tw-text-center tw-text-xs tw-font-medium tw-text-dark-gray"
+                class="tw-text-center tw-text-xs tw-font-medium tw-text-text-muted"
               >
                 or
               </div>
diff --git a/frontend/src/components/event/EmailInput.vue b/frontend/src/components/event/EmailInput.vue
index dc337148..27c3df96 100644
--- a/frontend/src/components/event/EmailInput.vue
+++ b/frontend/src/components/event/EmailInput.vue
@@ -44,7 +44,7 @@
 
     <div class="tw-transition-all tw-relative" :class="emailsAreValid ? '-tw-mt-5' : ''" @click="requestContactsAccess">
       <v-expand-transition>
-        <div class="tw-text-xs tw-text-dark-gray" v-if="!hasContactsAccess">
+        <div class="tw-text-xs tw-text-text-muted" v-if="!hasContactsAccess">
           <a class="tw-underline" @click="requestContactsAccess"
             >Enable contacts access</a
           >
diff --git a/frontend/src/components/event/EventDescription.vue b/frontend/src/components/event/EventDescription.vue
index 20dc4303..8f83dc88 100644
--- a/frontend/src/components/event/EventDescription.vue
+++ b/frontend/src/components/event/EventDescription.vue
@@ -2,7 +2,7 @@
   <div class="tw-mt-1 tw-max-w-full sm:tw-mt-2 sm:tw-max-w-[calc(100%-236px)]">
     <div
       v-if="showDescription"
-      class="tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-gap-2 tw-rounded-md tw-border tw-border-light-gray-stroke tw-bg-light-gray tw-p-2 tw-text-xs tw-font-normal tw-text-very-dark-gray hover:tw-bg-[#eeeeee] sm:tw-text-sm"
+      class="tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-gap-2 tw-rounded-md tw-border tw-border-border-default tw-bg-surface-muted tw-p-2 tw-text-xs tw-font-normal tw-text-text-secondary hover:tw-bg-surface-variant sm:tw-text-sm"
     >
       <div class="tw-grow tw-space-y-1">
         <div
@@ -28,7 +28,7 @@
     <v-btn
       v-else-if="canEdit && !isEditing"
       text
-      class="-tw-ml-2 tw-mt-0 tw-w-min tw-px-2 tw-text-dark-gray"
+      class="-tw-ml-2 tw-mt-0 tw-w-min tw-px-2 tw-text-text-muted"
       @click="isEditing = true"
     >
       + Add description
diff --git a/frontend/src/components/general/UserChip.vue b/frontend/src/components/general/UserChip.vue
index 70521785..8d9bb2b0 100644
--- a/frontend/src/components/general/UserChip.vue
+++ b/frontend/src/components/general/UserChip.vue
@@ -2,7 +2,7 @@
   <v-chip
     :key="user.email"
     size="x-small"
-    class="tw-flex tw-w-fit tw-items-center tw-bg-light-gray tw-text-very-dark-gray"
+    class="tw-flex tw-w-fit tw-items-center tw-bg-surface-muted tw-text-text-secondary"
   >
     <v-avatar class="bg-accent text-uppercase tw-mr-2" start
       ><img
diff --git a/frontend/src/components/groups/AccessDenied.vue b/frontend/src/components/groups/AccessDenied.vue
index 6510b339..66822ee2 100644
--- a/frontend/src/components/groups/AccessDenied.vue
+++ b/frontend/src/components/groups/AccessDenied.vue
@@ -13,7 +13,7 @@
       <h1 class="tw-mb-2 tw-text-center tw-text-2xl tw-font-medium">
         You need access
       </h1>
-      <div class="tw-text-center tw-text-dark-gray">
+      <div class="tw-text-center tw-text-text-muted">
         Ask the group owner to share this group with your email: <br />
         <span class="tw-font-medium tw-text-green">{{ authUser.email }}</span>
       </div>
diff --git a/frontend/src/components/groups/InvitationDialog.vue b/frontend/src/components/groups/InvitationDialog.vue
index fc1cd7ef..1c9a2b5d 100644
--- a/frontend/src/components/groups/InvitationDialog.vue
+++ b/frontend/src/components/groups/InvitationDialog.vue
@@ -12,7 +12,7 @@
       >
         <v-card-text>
           <div
-            class="tw-mb-5 tw-text-wrap tw-text-xl tw-font-medium tw-text-black"
+            class="tw-mb-5 tw-text-wrap tw-text-xl tw-font-medium tw-text-text-primary"
           >
             <template v-if="isOwner"> Share calendar availability </template>
             <template v-else>
@@ -33,7 +33,7 @@
               ></CalendarAccounts>
 
               <div class="tw-mt-5 tw-space-y-4">
-                <div class="tw-font-medium tw-text-black">
+                <div class="tw-font-medium tw-text-text-primary">
                   Your calendar availability from these calendars will be shared
                   with:
                 </div>
@@ -50,7 +50,7 @@
                 <div v-else class="tw-flex tw-items-center tw-italic">
                   <div>No members added yet</div>
                 </div>
-                <div class="tw-text-xs tw-text-dark-gray">
+                <div class="tw-text-xs tw-text-text-muted">
                   Your calendar events will NOT be visible to others
                 </div>
               </div>
@@ -58,7 +58,7 @@
           </v-expand-transition>
 
           <v-expand-transition>
-            <div class="tw-p-5 tw-text-black" v-if="!calendarPermissionGranted">
+            <div class="tw-p-5 tw-text-text-primary" v-if="!calendarPermissionGranted">
               <CalendarPermissionsCard
                 v-show="true"
                 cancelLabel=""
@@ -86,7 +86,7 @@
         <v-card-actions v-else>
           <v-dialog v-model="rejectDialog" width="400" persistent>
             <template v-slot:activator="{ on, attrs }">
-              <v-btn text class="tw-text-dark-gray" v-bind="attrs" v-on="on"
+              <v-btn text class="tw-text-text-muted" v-bind="attrs" v-on="on"
                 >Reject invitation</v-btn
               >
             </template>
@@ -99,7 +99,7 @@
                 <v-spacer />
                 <v-btn
                   text
-                  class="tw-text-dark-gray"
+                  class="tw-text-text-muted"
                   @click="rejectDialog = false"
                   >Cancel</v-btn
                 >
diff --git a/frontend/src/components/groups/NotSignedIn.vue b/frontend/src/components/groups/NotSignedIn.vue
index 1af8a0f0..e885c59b 100644
--- a/frontend/src/components/groups/NotSignedIn.vue
+++ b/frontend/src/components/groups/NotSignedIn.vue
@@ -15,7 +15,7 @@
             event.name
           }}"
         </h1>
-        <div class="tw-text-center tw-text-dark-gray">
+        <div class="tw-text-center tw-text-text-muted">
           Join the group now to share your real-time <br v-if="!isPhone" />
           calendar availability with each other!
         </div>
@@ -23,7 +23,7 @@
       <v-btn @click="join" color="primary" class="tw-mb-8"
         >Join with Google Calendar</v-btn
       >
-      <div class="tw-text-center tw-text-dark-gray">
+      <div class="tw-text-center tw-text-text-muted">
         Already have a Timeful account?
         <a @click="signIn" class="tw-underline">Sign in</a>
       </div>
diff --git a/frontend/src/components/home/Dashboard.vue b/frontend/src/components/home/Dashboard.vue
index c56eebff..9ba717bc 100644
--- a/frontend/src/components/home/Dashboard.vue
+++ b/frontend/src/components/home/Dashboard.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="tw-rounded-md tw-px-6 tw-py-4 sm:tw-mx-4 sm:tw-bg-[#f3f3f366]">
+  <div class="tw-rounded-md tw-px-6 tw-py-4 sm:tw-mx-4 sm:tw-bg-[var(--color-surface-highlight)]">
     <div class="tw-mb-3 tw-flex tw-items-center tw-justify-between">
       <div class="tw-flex tw-flex-col">
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Dashboard
         </div>
         <div
           v-if="!isPremiumUser"
-          class="tw-flex tw-items-baseline tw-gap-2 tw-text-sm tw-font-normal tw-text-very-dark-gray"
+          class="tw-flex tw-items-baseline tw-gap-2 tw-text-sm tw-font-normal tw-text-text-secondary"
         >
           <div>
             {{ authUser?.numEventsCreated }} / {{ numFreeEvents }} free events
@@ -26,7 +26,7 @@
       <v-btn
         text
         @click="openCreateFolderDialog"
-        class="tw-text-very-dark-gray"
+        class="tw-text-text-secondary"
       >
         <v-icon class="tw-text-lg">mdi-folder-plus</v-icon>
         <span class="tw-ml-2">New folder</span>
@@ -49,7 +49,7 @@
             v-if="folder.type === 'regular'"
             :color="folder.color || '#D3D3D3'"
             small
-            class="tw-mr-2 tw-cursor-pointer tw-rounded tw-border tw-border-light-gray-stroke tw-px-2 tw-text-sm tw-font-medium"
+            class="tw-mr-2 tw-cursor-pointer tw-rounded tw-border tw-border-border-default tw-px-2 tw-text-sm tw-font-medium"
             @click="openEditFolderDialog(folder)"
           >
             {{ folder.name }}
@@ -116,7 +116,7 @@
                   eventsByFolder[folder.id].groups.length === 0 &&
                   eventsByFolder[folder.id].events.length === 0
                 "
-                class="tw-absolute tw-left-0 tw-py-4 tw-text-sm tw-text-very-dark-gray"
+                class="tw-absolute tw-left-0 tw-py-4 tw-text-sm tw-text-text-secondary"
                 :class="folder.type === 'regular' ? 'tw-ml-8' : 'tw-ml-7'"
               >
                 {{ folder.emptyMessage }}
@@ -146,7 +146,7 @@
       </div>
 
       <div v-if="allEvents.length === 0">
-        <div class="tw-py-4 tw-text-sm tw-text-very-dark-gray">
+        <div class="tw-py-4 tw-text-sm tw-text-text-secondary">
           No events yet! Create one to get started.
         </div>
       </div>
@@ -183,7 +183,7 @@
               <div
                 v-for="color in folderColors"
                 :key="color"
-                class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-full tw-border tw-border-light-gray-stroke"
+                class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-full tw-border tw-border-border-default"
                 :style="{ backgroundColor: color }"
                 :class="{
                   'tw-ring-2 tw-ring-gray tw-ring-offset-2':
diff --git a/frontend/src/components/pricing/UpgradeDialog.vue b/frontend/src/components/pricing/UpgradeDialog.vue
index 7c43776c..73c62761 100644
--- a/frontend/src/components/pricing/UpgradeDialog.vue
+++ b/frontend/src/components/pricing/UpgradeDialog.vue
@@ -24,7 +24,7 @@
             >Timeful Premium</span
           >
         </h2>
-        <div class="tw-text-sm tw-font-medium tw-text-dark-gray">
+        <div class="tw-text-sm tw-font-medium tw-text-text-muted">
           <template
             v-if="upgradeDialogType === upgradeDialogTypes.CREATE_EVENT"
           >
@@ -48,7 +48,7 @@
           </template>
         </div>
         <!-- <ul
-          class="tw-inline-block tw-space-y-0.5 tw-p-0 tw-text-sm tw-font-medium tw-text-very-dark-gray"
+          class="tw-inline-block tw-space-y-0.5 tw-p-0 tw-text-sm tw-font-medium tw-text-text-secondary"
         >
           <li class="tw-flex tw-items-center">
             <v-icon class="tw-mr-2 tw-text-light-green">mdi-check</v-icon>
@@ -66,14 +66,14 @@
       </div>
       <!-- <div
         v-if="isStudent"
-        class="tw-mb-8 tw-rounded-lg tw-border tw-border-light-gray-stroke tw-p-4"
+        class="tw-mb-8 tw-rounded-lg tw-border tw-border-border-default tw-p-4"
       >
-        <div class="tw-mb-4 tw-text-sm tw-font-medium tw-text-dark-gray">
+        <div class="tw-mb-4 tw-text-sm tw-font-medium tw-text-text-muted">
           Timeful is free for students! But you have to prove it. And make sure
           to spread Timeful to as many of your friends as possible. Pinky
           promise.
         </div>
-        <div class="tw-text-sm tw-font-medium tw-text-dark-gray">
+        <div class="tw-text-sm tw-font-medium tw-text-text-muted">
           Email
           <span class="tw-font-medium tw-text-green tw-underline"
             >contact@timeful.app</span
@@ -106,16 +106,16 @@
                   ? formattedPrice(monthlyStudentPrice)
                   : formattedPrice(monthlyPrice)
               }}</span>
-              <span class="tw-text-dark-gray">USD</span>
+              <span class="tw-text-text-muted">USD</span>
             </div>
             <v-fade-transition>
               <div
                 v-if="monthlyPrice === null"
-                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-white"
+                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-surface"
               ></div>
             </v-fade-transition>
           </div>
-          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-very-dark-gray">
+          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-text-secondary">
             Per month.<br />Billed monthly.
           </div>
           <v-btn
@@ -149,7 +149,7 @@
         </div>
         <div
           v-if="showYearly"
-          class="tw-relative tw-flex tw-flex-1 tw-flex-col tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-light-green tw-bg-white tw-p-4 tw-shadow-lg"
+          class="tw-relative tw-flex tw-flex-1 tw-flex-col tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-light-green tw-bg-surface tw-p-4 tw-shadow-lg"
         >
           <div
             class="tw-absolute -tw-top-3 tw-rounded-full tw-bg-light-green tw-px-2 tw-py-0.5 tw-text-xs tw-font-medium tw-text-white"
@@ -168,16 +168,16 @@
                   ? formattedPrice(yearlyStudentPrice)
                   : formattedPrice(yearlyPrice)
               }}</span>
-              <span class="tw-text-dark-gray">USD</span>
+              <span class="tw-text-text-muted">USD</span>
             </div>
             <v-fade-transition>
               <div
                 v-if="yearlyPrice === null"
-                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-white"
+                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-surface"
               ></div>
             </v-fade-transition>
           </div>
-          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-very-dark-gray">
+          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-text-secondary">
             Per month.<br />Billed annually.
           </div>
           <v-btn
@@ -210,7 +210,7 @@
         </div>
         <div
           v-if="showLifetime"
-          class="tw-relative tw-flex tw-flex-1 tw-flex-col tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-light-green tw-bg-white tw-p-4 tw-shadow-lg"
+          class="tw-relative tw-flex tw-flex-1 tw-flex-col tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-light-green tw-bg-surface tw-p-4 tw-shadow-lg"
         >
           <div
             class="tw-absolute -tw-top-3 tw-rounded-full tw-bg-light-green tw-px-2 tw-py-0.5 tw-text-xs tw-font-medium tw-text-white"
@@ -224,7 +224,7 @@
           </div>
           <div class="tw-relative">
             <div class="tw-font-medium">
-              <span class="tw-mr-1 tw-text-dark-gray tw-line-through"
+              <span class="tw-mr-1 tw-text-text-muted tw-line-through"
                 >$100</span
               >
               <span class="tw-mr-1 tw-text-4xl">{{
@@ -232,16 +232,16 @@
                   ? formattedPrice(lifetimeStudentPrice)
                   : formattedPrice(lifetimePrice)
               }}</span>
-              <span class="tw-text-dark-gray">USD</span>
+              <span class="tw-text-text-muted">USD</span>
             </div>
             <v-fade-transition>
               <div
                 v-if="lifetimePrice === null"
-                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-white"
+                class="tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-surface"
               ></div>
             </v-fade-transition>
           </div>
-          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-very-dark-gray">
+          <div class="tw-mb-4 tw-text-center tw-text-sm tw-text-text-secondary">
             One-time payment.<br />No subscription.
           </div>
           <v-btn
@@ -285,10 +285,10 @@
         </v-checkbox>
         <label
           for="student-checkbox"
-          class="tw-flex tw-cursor-pointer tw-select-none tw-flex-col tw-text-sm tw-text-very-dark-gray"
+          class="tw-flex tw-cursor-pointer tw-select-none tw-flex-col tw-text-sm tw-text-text-secondary"
         >
           <span class="tw-text-sm">I'm a student</span>
-          <span v-if="isStudent" class="tw-text-xs tw-text-dark-gray">
+          <span v-if="isStudent" class="tw-text-xs tw-text-text-muted">
             Pinky promise that you're actually a student?
           </span>
         </label>
@@ -297,7 +297,7 @@
         class="tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-4 tw-text-center"
       >
         <div
-          class="tw-cursor-pointer tw-py-2 tw-text-xs tw-font-medium tw-text-dark-gray tw-underline"
+          class="tw-cursor-pointer tw-py-2 tw-text-xs tw-font-medium tw-text-text-muted tw-underline"
           @click="showDonatedDialog = true"
         >
           I already donated :)
diff --git a/frontend/src/components/schedule_overlap/BufferTimeSwitch.vue b/frontend/src/components/schedule_overlap/BufferTimeSwitch.vue
index cc84a382..400b82ca 100644
--- a/frontend/src/components/schedule_overlap/BufferTimeSwitch.vue
+++ b/frontend/src/components/schedule_overlap/BufferTimeSwitch.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="tw-mb-1 tw-text-sm tw-text-black">Buffer time</div>
-    <div class="tw-mb-2 tw-text-xs tw-text-dark-gray">
+    <div class="tw-mb-1 tw-text-sm tw-text-text-primary">Buffer time</div>
+    <div class="tw-mb-2 tw-text-xs tw-text-text-muted">
       Add time around calendar events
     </div>
     <v-switch
@@ -14,7 +14,7 @@
     >
       <template v-slot:label>
         <div
-          class="tw-flex tw-items-center tw-justify-center tw-gap-2 tw-text-sm tw-text-black"
+          class="tw-flex tw-items-center tw-justify-center tw-gap-2 tw-text-sm tw-text-text-primary"
         >
           <v-select
             menu-props="auto"
diff --git a/frontend/src/components/schedule_overlap/ColorLegend.vue b/frontend/src/components/schedule_overlap/ColorLegend.vue
index 5b55a08c..ac85fe1f 100644
--- a/frontend/src/components/schedule_overlap/ColorLegend.vue
+++ b/frontend/src/components/schedule_overlap/ColorLegend.vue
@@ -3,7 +3,8 @@
     <div class="tw-text-sm tw-font-medium">Legend:</div>
     <div class="tw-flex tw-items-center tw-gap-2">
       <div
-        class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray tw-bg-[#00994C77]"
+        class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray"
+        :style="{ backgroundColor: 'var(--color-avail-green)' }"
       ></div>
       <span class="tw-text-sm">Available</span>
     </div>
@@ -15,7 +16,8 @@
     </div>
     <div class="tw-flex tw-items-center tw-gap-2">
       <div
-        class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray tw-bg-[#E523232D]"
+        class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray"
+        :style="{ backgroundColor: 'var(--color-unavail-red-legend)' }"
       ></div>
       <span class="tw-text-sm">Unavailable</span>
     </div>
diff --git a/frontend/src/components/schedule_overlap/ConfirmDetailsDialog.vue b/frontend/src/components/schedule_overlap/ConfirmDetailsDialog.vue
index f9c0d4f4..e0b802c8 100644
--- a/frontend/src/components/schedule_overlap/ConfirmDetailsDialog.vue
+++ b/frontend/src/components/schedule_overlap/ConfirmDetailsDialog.vue
@@ -19,7 +19,7 @@
               Attendees
             </v-expansion-panel-header>
             <v-expansion-panel-content>
-              <div class="tw-mb-4 tw-text-dark-gray">
+              <div class="tw-mb-4 tw-text-text-muted">
                 Google Calendar invites will be sent to people at the following
                 email addresses.
                 <span v-if="!hasContactsAccess">
@@ -30,16 +30,16 @@
                 </span>
               </div>
               <div class="tw-max-h-96 tw-table-auto tw-overflow-y-auto">
-                <table class="tw-w-full tw-text-left tw-text-black">
+                <table class="tw-w-full tw-text-left tw-text-text-primary">
                   <thead>
-                    <tr class="tw-bg-white tw-font-medium">
+                    <tr class="tw-bg-surface tw-font-medium">
                       <th
-                        class="tw-sticky tw-top-0 tw-z-10 tw-bg-white tw-pb-4"
+                        class="tw-sticky tw-top-0 tw-z-10 tw-bg-surface tw-pb-4"
                       >
                         Name
                       </th>
                       <th
-                        class="tw-sticky tw-top-0 tw-z-10 tw-bg-white tw-pb-4"
+                        class="tw-sticky tw-top-0 tw-z-10 tw-bg-surface tw-pb-4"
                       >
                         Email
                       </th>
diff --git a/frontend/src/components/schedule_overlap/EventOptions.vue b/frontend/src/components/schedule_overlap/EventOptions.vue
index 1a55a376..0a16efcd 100644
--- a/frontend/src/components/schedule_overlap/EventOptions.vue
+++ b/frontend/src/components/schedule_overlap/EventOptions.vue
@@ -15,7 +15,7 @@
         hide-details
       >
         <template v-slot:label>
-          <div class="tw-text-sm tw-text-black">
+          <div class="tw-text-sm tw-text-text-primary">
             Show best {{ event.daysOnly ? "days" : "times" }}
           </div>
         </template>
@@ -29,7 +29,7 @@
         hide-details
       >
         <template v-slot:label>
-          <div class="tw-text-sm tw-text-black">
+          <div class="tw-text-sm tw-text-text-primary">
             Hide if needed {{ event.daysOnly ? "days" : "times" }}
           </div>
         </template>
@@ -42,7 +42,7 @@
         hide-details
       >
         <template v-slot:label>
-          <div class="tw-text-sm tw-text-black">Overlay calendar events</div>
+          <div class="tw-text-sm tw-text-text-primary">Overlay calendar events</div>
         </template>
       </v-switch>
 
@@ -56,7 +56,7 @@
         hide-details
       >
         <template v-slot:label>
-          <div class="tw-text-sm tw-text-black">Start on Monday</div>
+          <div class="tw-text-sm tw-text-text-primary">Start on Monday</div>
         </template>
       </v-switch>
     </div>
diff --git a/frontend/src/components/schedule_overlap/GCalWeekSelector.vue b/frontend/src/components/schedule_overlap/GCalWeekSelector.vue
index 2a759b11..d9c700c3 100644
--- a/frontend/src/components/schedule_overlap/GCalWeekSelector.vue
+++ b/frontend/src/components/schedule_overlap/GCalWeekSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-flex tw-h-16 tw-items-center tw-justify-between tw-gap-2 tw-bg-white tw-px-2 tw-drop-shadow sm:tw-h-[unset] sm:tw-flex-1 sm:tw-px-0 sm:tw-drop-shadow-none"
+    class="tw-flex tw-h-16 tw-items-center tw-justify-between tw-gap-2 tw-bg-surface tw-px-2 tw-drop-shadow sm:tw-h-[unset] sm:tw-flex-1 sm:tw-px-0 sm:tw-drop-shadow-none"
   >
     <v-btn @click="prevWeek" icon><v-icon>mdi-chevron-left</v-icon></v-btn>
     <div class="tw-text-center">
diff --git a/frontend/src/components/schedule_overlap/RespondentsList.vue b/frontend/src/components/schedule_overlap/RespondentsList.vue
index 3e7f4833..549d7488 100644
--- a/frontend/src/components/schedule_overlap/RespondentsList.vue
+++ b/frontend/src/components/schedule_overlap/RespondentsList.vue
@@ -82,7 +82,7 @@
       <template v-if="isPhone">
         <v-spacer />
         <div
-          class="tw-mt-2 tw-text-sm tw-font-normal tw-text-dark-gray"
+          class="tw-mt-2 tw-text-sm tw-font-normal tw-text-text-muted"
           :class="showIfNeededStar ? 'tw-visible' : 'tw-invisible'"
         >
           * if needed
@@ -91,7 +91,7 @@
     </div>
     <div
       v-if="isOwner && !isPhone && event.blindAvailabilityEnabled"
-      class="tw-mb-2 tw-mt-1 tw-text-xs tw-italic tw-text-very-dark-gray"
+      class="tw-mb-2 tw-mt-1 tw-text-xs tw-italic tw-text-text-secondary"
     >
       Responses are only visible to {{ isOwner ? "you" : "event creator" }}
     </div>
@@ -117,12 +117,12 @@
       >
         <div v-if="respondents.length === 0" class="tw-mb-6">
           <span
-            class="tw-text-very-dark-gray"
+            class="tw-text-text-secondary"
             v-if="!isOwner && event.blindAvailabilityEnabled"
           >
             No response yet!
           </span>
-          <span class="tw-text-very-dark-gray" v-else>No responses yet!</span>
+          <span class="tw-text-text-secondary" v-else>No responses yet!</span>
         </div>
         <template v-else>
           <transition-group
@@ -153,7 +153,7 @@
                   @click="(e) => $emit('clickRespondent', e, user._id)"
                   color="primary"
                   :value="respondentSelected(user._id)"
-                  class="tw-absolute -tw-top-[2px] tw-left-0 tw-bg-white tw-opacity-0 group-hover:tw-opacity-100 group-[&:has(.email-hover-target:hover)]:!tw-opacity-0"
+                  class="tw-absolute -tw-top-[2px] tw-left-0 tw-bg-surface tw-opacity-0 group-hover:tw-opacity-100 group-[&:has(.email-hover-target:hover)]:!tw-opacity-0"
                   :class="
                     respondentSelected(user._id)
                       ? 'tw-opacity-100'
@@ -175,7 +175,7 @@
                 </div>
                 <div
                   v-if="isOwner && event.collectEmails"
-                  class="email-hover-target tw-flex tw-items-center tw-rounded-sm tw-p-px tw-text-xs tw-text-dark-gray tw-transition-all hover:tw-bg-light-gray"
+                  class="email-hover-target tw-flex tw-items-center tw-rounded-sm tw-p-px tw-text-xs tw-text-text-muted tw-transition-all hover:tw-bg-surface-muted"
                   :class="respondentClass(user._id)"
                   @mouseover.stop
                   @click.stop="copyEmailToClipboard(user.email)"
@@ -194,7 +194,7 @@
                   <v-menu right offset-x>
                     <template v-slot:activator="{ on, attrs }">
                       <v-btn icon v-on="on" v-bind="attrs">
-                        <v-icon small color="#4F4F4F">mdi-dots-vertical</v-icon>
+                        <v-icon small class="tw-text-text-secondary">mdi-dots-vertical</v-icon>
                       </v-btn>
                     </template>
                     <v-list class="tw-py-1" dense>
@@ -203,7 +203,7 @@
                         @click="$emit('editGuestAvailability', user._id)"
                       >
                         <v-list-item-title class="tw-flex tw-items-center">
-                          <v-icon small class="tw-mr-2" color="#4F4F4F"
+                          <v-icon small class="tw-mr-2 tw-text-text-secondary"
                             >mdi-pencil</v-icon
                           >
                           Edit
@@ -214,7 +214,7 @@
                         @click="() => showDeleteAvailabilityDialog(user)"
                       >
                         <v-list-item-title class="tw-flex tw-items-center">
-                          <v-icon small class="tw-mr-2" color="#4F4F4F"
+                          <v-icon small class="tw-mr-2 tw-text-text-secondary"
                             >mdi-delete</v-icon
                           >
                           Delete
@@ -228,17 +228,17 @@
                     v-if="isGuest(user)"
                     small
                     icon
-                    class="tw-bg-white"
+                    class="tw-bg-surface"
                     @click="$emit('editGuestAvailability', user._id)"
-                    ><v-icon small color="#4F4F4F">mdi-pencil</v-icon></v-btn
+                    ><v-icon small class="tw-text-text-secondary">mdi-pencil</v-icon></v-btn
                   >
                   <v-btn
                     v-if="isOwner && !isGroup"
                     small
                     icon
-                    class="tw-bg-white"
+                    class="tw-bg-surface"
                     @click="() => showDeleteAvailabilityDialog(user)"
-                    ><v-icon small class="hover:tw-text-red" color="#4F4F4F"
+                    ><v-icon small class="hover:tw-text-red tw-text-text-secondary"
                       >mdi-delete</v-icon
                     ></v-btn
                   >
@@ -260,7 +260,7 @@
 
       <div
         v-if="!isPhone && respondents.length > 0"
-        class="tw-col-span-full tw-mb-2 tw-mt-1 tw-text-sm tw-text-dark-gray"
+        class="tw-col-span-full tw-mb-2 tw-mt-1 tw-text-sm tw-text-text-muted"
         :class="showIfNeededStar ? 'tw-visible' : 'tw-invisible'"
       >
         * if needed
@@ -318,7 +318,7 @@
           hide-details
         >
           <template v-slot:label>
-            <div class="tw-text-sm tw-text-black">
+            <div class="tw-text-sm tw-text-text-primary">
               Show best {{ event.daysOnly ? "days" : "times" }}
             </div>
           </template>
@@ -346,7 +346,7 @@
 
     <div
       v-if="(!isOwner || isPhone) && event.blindAvailabilityEnabled"
-      class="tw-mt-2 tw-text-xs tw-italic tw-text-very-dark-gray"
+      class="tw-mt-2 tw-text-xs tw-italic tw-text-text-secondary"
     >
       Responses are only visible to {{ isOwner ? "you" : "event creator" }}
     </div>
@@ -354,7 +354,7 @@
     <v-dialog v-model="deleteAvailabilityDialog" width="500" persistent>
       <v-card>
         <v-card-title>Are you sure?</v-card-title>
-        <v-card-text class="tw-text-sm tw-text-dark-gray"
+        <v-card-text class="tw-text-sm tw-text-text-muted"
           >Are you sure you want to delete
           <strong>{{ userToDelete?.firstName }}</strong
           >'s availability from this
@@ -388,7 +388,7 @@
       hide-details
     >
       <template v-slot:label>
-        <div class="tw-text-sm tw-text-black">Overlay calendar events</div>
+        <div class="tw-text-sm tw-text-text-primary">Overlay calendar events</div>
       </template>
     </v-switch>
 
diff --git a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
index b804872b..58637947 100644
--- a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
+++ b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
@@ -36,7 +36,7 @@
                 <div class="tw-flex tw-w-full">
                   <div
                     v-for="day in daysOfWeek"
-                    class="tw-flex-1 tw-p-2 tw-text-center tw-text-base tw-capitalize tw-text-dark-gray"
+                    class="tw-flex-1 tw-p-2 tw-text-center tw-text-base tw-capitalize tw-text-text-muted"
                   >
                     {{ day }}
                   </div>
@@ -66,7 +66,7 @@
                     class="tw-sticky tw-bottom-4 tw-z-10 tw-flex"
                   >
                     <div
-                      class="tw-mt-2 tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-md tw-bg-off-white tw-p-2 tw-px-[7px] tw-text-sm tw-text-very-dark-gray"
+                      class="tw-mt-2 tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-md tw-bg-surface-variant tw-p-2 tw-px-[7px] tw-text-sm tw-text-text-secondary"
                     >
                       <div class="tw-flex tw-items-center tw-gap-1">
                         <v-icon small>mdi-information-outline</v-icon>
@@ -109,7 +109,7 @@
               >
                 <div
                   :class="calendarOnly ? 'tw-invisible' : 'tw-visible'"
-                  class="tw-sticky tw-top-14 tw-z-10 -tw-ml-3 tw-mb-3 tw-h-11 tw-bg-white sm:tw-top-16 sm:tw-ml-0"
+                  class="tw-sticky tw-top-14 tw-z-10 -tw-ml-3 tw-mb-3 tw-h-11 tw-bg-surface sm:tw-top-16 sm:tw-ml-0"
                 >
                   <div
                     :class="hasPrevPage ? 'tw-visible' : 'tw-invisible'"
@@ -178,7 +178,7 @@
                         ? undefined
                         : 'tw-sticky tw-top-14'
                     "
-                    class="tw-z-10 tw-flex tw-h-14 tw-items-center tw-bg-white sm:tw-top-16"
+                    class="tw-z-10 tw-flex tw-h-14 tw-items-center tw-bg-surface sm:tw-top-16"
                   >
                     <template v-for="(day, i) in days">
                       <div
@@ -186,11 +186,11 @@
                         :style="{ width: `${SPLIT_GAP_WIDTH}px` }"
                         :key="`${i}-gap`"
                       ></div>
-                      <div :key="i" class="tw-flex-1 tw-bg-white">
+                      <div :key="i" class="tw-flex-1 tw-bg-surface">
                         <div class="tw-text-center">
                           <div
                             v-if="isSpecificDates || isGroup"
-                            class="tw-text-[12px] tw-font-light tw-capitalize tw-text-very-dark-gray sm:tw-text-xs"
+                            class="tw-text-[12px] tw-font-light tw-capitalize tw-text-text-secondary sm:tw-text-xs"
                           >
                             {{ day.dateString }}
                           </div>
@@ -419,8 +419,13 @@
                                   class="tw-h-full tw-w-full tw-border-2"
                                   :class="
                                     timeBlock.type === 'available'
-                                      ? 'overlay-avail-shadow-green tw-border-[#00994CB3] tw-bg-[#00994C66]'
-                                      : 'overlay-avail-shadow-yellow tw-border-[#997700CC] tw-bg-[#FFE8B8B3]'
+                                      ? 'overlay-avail-shadow-green'
+                                      : 'overlay-avail-shadow-yellow'
+                                  "
+                                  :style="
+                                    timeBlock.type === 'available'
+                                      ? { borderColor: 'var(--color-avail-green-overlay-border)', backgroundColor: 'var(--color-avail-green-overlay-bg)' }
+                                      : { borderColor: 'var(--color-ifneeded-border)', backgroundColor: 'var(--color-ifneeded-bg)' }
                                   "
                                 ></div>
                               </div>
@@ -451,7 +456,7 @@
                     class="tw-sticky tw-bottom-4 tw-z-10 tw-flex"
                   >
                     <div
-                      class="tw-mt-2 tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-md tw-bg-off-white tw-p-2 tw-px-[7px] tw-text-sm tw-text-very-dark-gray"
+                      class="tw-mt-2 tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-md tw-bg-surface-variant tw-p-2 tw-px-[7px] tw-text-sm tw-text-text-secondary"
                     >
                       <div class="tw-flex tw-items-center tw-gap-1">
                         <v-icon small>mdi-information-outline</v-icon>
@@ -471,7 +476,7 @@
                       !loadingResponses.loading
                     "
                   >
-                    <div class="tw-mt-2 tw-text-sm tw-text-dark-gray">
+                    <div class="tw-mt-2 tw-text-sm tw-text-text-muted">
                       Note: There's no time when all
                       {{ respondents.length }} respondents are available.
                     </div>
@@ -505,7 +510,7 @@
               <div
                 v-if="!calendarOnly"
                 :class="calendarOnly ? 'tw-invisible' : 'tw-visible'"
-                class="tw-sticky tw-top-14 tw-z-10 tw-mb-4 tw-h-11 tw-bg-white sm:tw-top-16"
+                class="tw-sticky tw-top-14 tw-z-10 tw-mb-4 tw-h-11 tw-bg-surface sm:tw-top-16"
               >
                 <div
                   :class="hasNextPage ? 'tw-visible' : 'tw-invisible'"
@@ -528,10 +533,10 @@
           >
             <!-- Show section on the right depending on some if conditions -->
             <template v-if="isSignUp">
-              <div class="tw-mb-2 tw-text-lg tw-text-black">Slots</div>
+              <div class="tw-mb-2 tw-text-lg tw-text-text-primary">Slots</div>
               <div v-if="!isOwner" class="tw-mb-3 tw-flex tw-flex-col">
                 <div
-                  class="tw-flex tw-flex-col tw-gap-1 tw-rounded-md tw-bg-light-gray tw-p-3 tw-text-xs tw-italic tw-text-dark-gray"
+                  class="tw-flex tw-flex-col tw-gap-1 tw-rounded-md tw-bg-surface-muted tw-p-3 tw-text-xs tw-italic tw-text-text-muted"
                 >
                   <div v-if="!authUser || alreadyRespondedToSignUpForm">
                     <a class="tw-underline" :href="`mailto:${event.ownerId}`"
@@ -577,7 +582,7 @@
                       !addingAvailabilityAsGuest
                     )
                   "
-                  class="tw-flex tw-flex-wrap tw-items-baseline tw-gap-1 tw-text-sm tw-italic tw-text-dark-gray"
+                  class="tw-flex tw-flex-wrap tw-items-baseline tw-gap-1 tw-text-sm tw-italic tw-text-text-muted"
                 >
                   {{
                     (userHasResponded && !addingAvailabilityAsGuest) ||
@@ -669,13 +674,13 @@
                     hide-details
                   >
                     <template v-slot:label>
-                      <div class="tw-text-sm tw-text-black">
+                      <div class="tw-text-sm tw-text-text-primary">
                         Overlay availabilities
                       </div>
                     </template>
                   </v-switch>
 
-                  <div class="tw-mt-2 tw-text-xs tw-text-dark-gray">
+                  <div class="tw-mt-2 tw-text-xs tw-text-text-muted">
                     View everyone's availability while inputting your own
                   </div>
                 </div>
@@ -764,7 +769,7 @@
 
                     <v-card>
                       <v-card-title>Are you sure?</v-card-title>
-                      <v-card-text class="tw-text-sm tw-text-dark-gray"
+                      <v-card-text class="tw-text-sm tw-text-text-muted"
                         >Are you sure you want to
                         {{
                           !isGroup
@@ -866,7 +871,7 @@
             <template v-if="hintTextShown">
               <div :key="hintText">
                 <div
-                  :class="`tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-bg-light-gray tw-px-2 tw-py-2 tw-text-sm tw-text-very-dark-gray`"
+                  :class="`tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-bg-surface-muted tw-px-2 tw-py-2 tw-text-sm tw-text-text-secondary`"
                 >
                   <div
                     :class="`tw-flex tw-gap-${hintText.length > 60 ? 2 : 1}`"
@@ -885,7 +890,7 @@
           <!-- Fixed pos availability toggle (mobile) -->
           <v-expand-transition>
             <div v-if="!isGroup && editing && !isSignUp">
-              <div class="tw-bg-white tw-p-4">
+              <div class="tw-bg-surface tw-p-4">
                 <AvailabilityTypeToggle
                   class="tw-w-full"
                   v-model="availabilityType"
@@ -911,7 +916,7 @@
           <!-- Respondents list -->
           <v-expand-transition>
             <div v-if="delayedShowStickyRespondents">
-              <div class="tw-bg-white tw-p-4">
+              <div class="tw-bg-surface tw-p-4">
                 <RespondentsList
                   :max-height="100"
                   :event="event"
@@ -953,7 +958,7 @@
           <v-expand-transition>
             <div
               v-if="state === states.SET_SPECIFIC_TIMES"
-              class="-tw-mb-16 tw-bg-white tw-p-4"
+              class="-tw-mb-16 tw-bg-surface tw-p-4"
             >
               <SpecificTimesInstructions
                 :numTempTimes="tempTimes.size"
@@ -1214,6 +1219,18 @@ export default {
   },
   computed: {
     ...mapState(["authUser", "overlayAvailabilitiesEnabled"]),
+    themeColors() {
+      const isDark = this.$vuetify.theme.dark
+      return {
+        availGreen: isDark ? '#29BC6844' : '#00994C77',
+        availGreenHover: isDark ? '#29BC6866' : '#00994C88',
+        availGreenSolid: isDark ? '#29BC68' : '#00994C',
+        unavailRed: isDark ? '#FF525215' : '#E523230D',
+        unavailRedHover: isDark ? '#FF525240' : '#E5232333',
+        unavailRedActive: isDark ? '#FF525250' : '#E523233B',
+        bgHex: isDark ? '#1E1E1E' : '#FFFFFF',
+      }
+    },
     /** Returns the width of the right side of the calendar */
     rightSideWidth() {
       if (this.isPhone) return "100%"
@@ -3048,21 +3065,21 @@ export default {
           this.state === this.states.SINGLE_AVAILABILITY ||
           totalRespondents === 1
         ) {
-          classStyle.class += "tw-border-[#999999] "
+          classStyle.class += "tw-border-[var(--color-grid-border-strong)] "
         } else {
-          classStyle.class += "tw-border-[#DDDDDD99] "
+          classStyle.class += "tw-border-[var(--color-grid-border)] "
         }
       }
 
       // Edit fill color and border color if day is not interactable
       if (isDisabled) {
         classStyle.class +=
-          "tw-bg-light-gray-stroke tw-border-light-gray-stroke "
+          "tw-bg-border-default tw-border-border-default "
       }
 
       // Change default red:
-      if (classStyle.style.backgroundColor === "#E523230D") {
-        classStyle.style.backgroundColor = "#E5232333"
+      if (classStyle.style.backgroundColor === this.themeColors.unavailRed) {
+        classStyle.style.backgroundColor = this.themeColors.unavailRedHover
       }
 
       return classStyle
@@ -3079,7 +3096,7 @@ export default {
       // Fill style
 
       if (this.isSignUp) {
-        c += "tw-bg-light-gray "
+        c += "tw-bg-surface-muted "
         return { class: c, style: s }
       }
 
@@ -3089,7 +3106,7 @@ export default {
         this.state === this.states.SET_SPECIFIC_TIMES
       ) {
         // Set default background color to red (unavailable)
-        s.backgroundColor = "#E523230D"
+        s.backgroundColor = this.themeColors.unavailRed
 
         // Show only current user availability
         const inDragRange = this.inDragRange(row, col)
@@ -3097,10 +3114,10 @@ export default {
           // Set style if drag range goes over the current timeslot
           if (this.dragType === this.DRAG_TYPES.ADD) {
             if (this.state === this.states.SET_SPECIFIC_TIMES) {
-              c += "tw-bg-white "
+              c += "tw-bg-surface "
             } else {
               if (this.availabilityType === availabilityTypes.AVAILABLE) {
-                s.backgroundColor = "#00994C77"
+                s.backgroundColor = this.themeColors.availGreen
               } else if (
                 this.availabilityType === availabilityTypes.IF_NEEDED
               ) {
@@ -3117,13 +3134,13 @@ export default {
           // Show current availability from availability set
           if (this.state === this.states.SET_SPECIFIC_TIMES) {
             if (this.tempTimes.has(date.getTime())) {
-              c += "tw-bg-white "
+              c += "tw-bg-surface "
             } else {
               c += "tw-bg-gray "
             }
           } else {
             if (this.availability.has(date.getTime())) {
-              s.backgroundColor = "#00994C77"
+              s.backgroundColor = this.themeColors.availGreen
             } else if (this.ifNeeded.has(date.getTime())) {
               c += "tw-bg-yellow "
             }
@@ -3138,10 +3155,10 @@ export default {
           if (this.parsedResponses[respondent]?.ifNeeded?.has(date.getTime())) {
             c += "tw-bg-yellow "
           } else {
-            s.backgroundColor = "#00994C77"
+            s.backgroundColor = this.themeColors.availGreen
           }
         } else {
-          s.backgroundColor = "#E523230D"
+          s.backgroundColor = this.themeColors.unavailRed
         }
         return { class: c, style: s }
       }
@@ -3193,11 +3210,9 @@ export default {
             // Only set timeslot to green for the times that most people are available
             if (totalRespondents === 1 || this.overlayAvailability) {
               // Make single responses less saturated
-              const green = "#00994C88"
-              s.backgroundColor = green
+              s.backgroundColor = this.themeColors.availGreenHover
             } else {
-              const green = "#00994C"
-              s.backgroundColor = green
+              s.backgroundColor = this.themeColors.availGreenSolid
             }
           }
         } else if (this.defaultState === this.states.HEATMAP) {
@@ -3214,13 +3229,12 @@ export default {
               ) {
                 c += "tw-bg-yellow "
               } else {
-                const green = "#00994C88"
-                s.backgroundColor = green
+                s.backgroundColor = this.themeColors.availGreenHover
               }
             } else {
               // Determine color of timeslot based on number of people available
               const frac = numRespondents / max
-              const green = "#00994C"
+              const green = this.themeColors.availGreenSolid
               let alpha
               if (!this.overlayAvailability) {
                 alpha = Math.floor(frac * (255 - 30))
@@ -3248,8 +3262,7 @@ export default {
               s.backgroundColor = green + alpha
             }
           } else if (totalRespondents === 1) {
-            const red = "#E523230D"
-            s.backgroundColor = red
+            s.backgroundColor = this.themeColors.unavailRed
           }
         }
       }
@@ -3271,20 +3284,20 @@ export default {
         const backgroundColor = classStyle.style.backgroundColor
         if (
           backgroundColor &&
-          lightOrDark(removeTransparencyFromHex(backgroundColor)) === "dark"
+          lightOrDark(removeTransparencyFromHex(backgroundColor, this.themeColors.bgHex)) === "dark"
         ) {
           classStyle.class += "tw-text-white "
         }
       } else {
         classStyle = {
-          class: "tw-bg-off-white tw-text-gray ",
+          class: "tw-bg-surface-variant tw-text-gray ",
           style: {},
         }
       }
 
       // Change default red:
-      if (classStyle.style.backgroundColor === "#E523230D") {
-        classStyle.style.backgroundColor = "#E523233B"
+      if (classStyle.style.backgroundColor === this.themeColors.unavailRed) {
+        classStyle.style.backgroundColor = this.themeColors.unavailRedActive
       }
 
       // Change edit green
diff --git a/frontend/src/components/schedule_overlap/SpecificTimesInstructions.vue b/frontend/src/components/schedule_overlap/SpecificTimesInstructions.vue
index a35f3b5e..0d7b6079 100644
--- a/frontend/src/components/schedule_overlap/SpecificTimesInstructions.vue
+++ b/frontend/src/components/schedule_overlap/SpecificTimesInstructions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4 tw-pr-2 lg:tw-pr-0">
-    <div class="tw-text-sm tw-italic tw-text-dark-gray">
+    <div class="tw-text-sm tw-italic tw-text-text-muted">
       Click and drag on the grid to select the potential meeting times
     </div>
 
@@ -12,7 +12,7 @@
       </div>
       <div class="tw-flex tw-items-center tw-gap-2">
         <div
-          class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray tw-bg-white"
+          class="tw-h-4 tw-w-4 tw-rounded tw-border tw-border-gray tw-bg-surface"
         ></div>
         <span class="tw-text-sm">Potential meeting times</span>
       </div>
diff --git a/frontend/src/components/schedule_overlap/WorkingHoursToggle.vue b/frontend/src/components/schedule_overlap/WorkingHoursToggle.vue
index cb33d513..406910c4 100644
--- a/frontend/src/components/schedule_overlap/WorkingHoursToggle.vue
+++ b/frontend/src/components/schedule_overlap/WorkingHoursToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="tw-mb-1 tw-text-sm tw-text-black">Working hours</div>
-    <div class="tw-mb-2 tw-text-xs tw-text-dark-gray">
+    <div class="tw-mb-1 tw-text-sm tw-text-text-primary">Working hours</div>
+    <div class="tw-mb-2 tw-text-xs tw-text-text-muted">
       Only autofill availability between working hours
     </div>
     <v-switch
@@ -12,7 +12,7 @@
       hide-details
     >
       <template v-slot:label>
-        <div class="tw-text-sm tw-text-black">
+        <div class="tw-text-sm tw-text-text-primary">
           <div class="tw-flex tw-items-center tw-gap-2">
             <v-select
               menu-props="auto"
diff --git a/frontend/src/components/schedule_overlap/ZigZag.vue b/frontend/src/components/schedule_overlap/ZigZag.vue
index 70fbd939..49aa96ac 100644
--- a/frontend/src/components/schedule_overlap/ZigZag.vue
+++ b/frontend/src/components/schedule_overlap/ZigZag.vue
@@ -10,9 +10,9 @@
 .line1-left {
   background: linear-gradient(
     45deg,
-    white,
-    white 49%,
-    black 49%,
+    var(--color-zigzag-fill),
+    var(--color-zigzag-fill) 49%,
+    var(--color-zigzag-line) 49%,
     transparent 51%
   );
 }
@@ -21,8 +21,8 @@
     -45deg,
     transparent,
     transparent 49%,
-    black 49%,
-    white 51%
+    var(--color-zigzag-line) 49%,
+    var(--color-zigzag-fill) 51%
   );
 }
 
@@ -31,16 +31,16 @@
     45deg,
     transparent,
     transparent 49%,
-    black 51%,
-    white 51%
+    var(--color-zigzag-line) 51%,
+    var(--color-zigzag-fill) 51%
   );
 }
 .line2-right {
   background: linear-gradient(
     -45deg,
-    white,
-    white 49%,
-    black 51%,
+    var(--color-zigzag-fill),
+    var(--color-zigzag-fill) 49%,
+    var(--color-zigzag-line) 51%,
     transparent 51%
   );
 }
diff --git a/frontend/src/components/settings/CalendarAccount.vue b/frontend/src/components/settings/CalendarAccount.vue
index 7b602876..6d48be0c 100644
--- a/frontend/src/components/settings/CalendarAccount.vue
+++ b/frontend/src/components/settings/CalendarAccount.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="showAccount" class="tw-flex tw-flex-col">
     <div
-      class="tw-group tw-flex tw-h-10 tw-flex-row tw-items-center tw-justify-between tw-text-black"
+      class="tw-group tw-flex tw-h-10 tw-flex-row tw-items-center tw-justify-between tw-text-text-primary"
     >
       <div
         :class="`tw-gap-${toggleState ? '0' : '2'}`"
@@ -26,7 +26,7 @@
 
             <v-icon
               :class="`tw-rotate-${showSubCalendars ? 90 : 0}`"
-              class="tw-text-dark-gray tw-transition-all"
+              class="tw-text-text-muted tw-transition-all"
               >mdi-chevron-right</v-icon
             >
           </div>
@@ -63,14 +63,14 @@
         } ${!allowDelete ? 'tw-hidden' : ''}`"
         class="group-hover:tw-opacity-100"
         @click="openRemoveDialog"
-        ><v-icon color="#4F4F4F">mdi-close</v-icon></v-btn
+        ><v-icon class="tw-text-text-secondary">mdi-close</v-icon></v-btn
       >
     </div>
 
     <!-- Sub-calendar accounts -->
 
     <v-expand-transition>
-      <div v-if="showSubCalendars" class="tw-space-y-2 tw-bg-[#EBF7EF] tw-py-2">
+      <div v-if="showSubCalendars" class="tw-space-y-2 tw-bg-[var(--color-surface-green)] tw-py-2">
         <div
           v-for="(subCalendar, id) in account.subCalendars"
           :key="id"
diff --git a/frontend/src/components/settings/CalendarAccounts.vue b/frontend/src/components/settings/CalendarAccounts.vue
index 9a6207a3..5c3d381a 100644
--- a/frontend/src/components/settings/CalendarAccounts.vue
+++ b/frontend/src/components/settings/CalendarAccounts.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="toggleState ? '' : 'tw-w-fit tw-min-w-[288px] tw-drop-shadow'"
-    class="tw-flex tw-flex-col tw-rounded-lg tw-bg-white tw-text-black tw-transition-all"
+    class="tw-flex tw-flex-col tw-rounded-lg tw-bg-surface tw-text-text-primary tw-transition-all"
   >
     <v-btn
       v-if="toggleState"
@@ -73,7 +73,7 @@
     <v-dialog v-model="removeDialog" width="500" persistent>
       <v-card>
         <v-card-title>Are you sure?</v-card-title>
-        <v-card-text class="tw-text-sm tw-text-dark-gray"
+        <v-card-text class="tw-text-sm tw-text-text-muted"
           >Are you sure you want to remove
           {{ removePayload.email }}?</v-card-text
         >
diff --git a/frontend/src/components/sign_up_form/SignUpBlock.vue b/frontend/src/components/sign_up_form/SignUpBlock.vue
index 165c5806..9c08212c 100644
--- a/frontend/src/components/sign_up_form/SignUpBlock.vue
+++ b/frontend/src/components/sign_up_form/SignUpBlock.vue
@@ -2,7 +2,7 @@
   <div
     :data-id="signUpBlock._id"
     class="tw-flex tw-flex-col tw-rounded-md tw-border-[1px] tw-p-4"
-    :class="unsaved ? 'tw-border-light-green' : 'tw-border-light-gray-stroke'"
+    :class="unsaved ? 'tw-border-light-green' : 'tw-border-border-default'"
   >
     <div class="tw-flex tw-items-start tw-justify-between mb-1">
       <div
@@ -38,7 +38,7 @@
         </v-btn>
       </div>
     </div>
-    <div class="tw-text-xs tw-italic tw-text-dark-gray">
+    <div class="tw-text-xs tw-italic tw-text-text-muted">
       {{ timeRangeString }}
     </div>
     <div v-if="isOwner" class="tw-mt-4 tw-flex tw-items-center tw-gap-4">
diff --git a/frontend/src/components/sign_up_form/SignUpBlocksList.vue b/frontend/src/components/sign_up_form/SignUpBlocksList.vue
index b184db6d..3bbd662f 100644
--- a/frontend/src/components/sign_up_form/SignUpBlocksList.vue
+++ b/frontend/src/components/sign_up_form/SignUpBlocksList.vue
@@ -16,7 +16,7 @@
     >
       <div
         v-if="isOwner && signUpBlocks.length === 0 && signUpBlocksToAdd.length === 0"
-        class="tw-text-sm tw-italic tw-text-dark-gray"
+        class="tw-text-sm tw-italic tw-text-text-muted"
       >
         Click and drag on the grid to create a slot
       </div>
diff --git a/frontend/src/components/sign_up_form/SignUpCalendarBlock.vue b/frontend/src/components/sign_up_form/SignUpCalendarBlock.vue
index 03307171..a546b588 100644
--- a/frontend/src/components/sign_up_form/SignUpCalendarBlock.vue
+++ b/frontend/src/components/sign_up_form/SignUpCalendarBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-h-full tw-w-full tw-cursor-pointer tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-bg-white"
+    class="tw-h-full tw-w-full tw-cursor-pointer tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-bg-surface"
     :class="unsaved ? 'tw-border-light-green' : 'tw-border-gray'"
   >
     <div
@@ -60,7 +60,7 @@ export default {
     fontColor() {
       return this.numberResponses == this.signUpBlock?.capacity && !this.unsaved
         ? "tw-text-white"
-        : "tw-text-dark-gray"
+        : "tw-text-text-muted"
     },
   },
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b5c61c95..e8a00094 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,93 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Light theme (default) */
+:root {
+  /* Surface colors */
+  --color-surface: #FFFFFF;
+  --color-surface-variant: #F2F2F2;
+  --color-surface-muted: #f3f4f6;
+  --color-surface-highlight: #f3f3f366;
+  --color-surface-green: #EBF7EF;
+
+  /* Text colors */
+  --color-text-primary: #000000;
+  --color-text-secondary: #4F4F4F;
+  --color-text-muted: #6B6B6B;
+
+  /* Border colors */
+  --color-border: #dfdfdf;
+
+  /* Schedule overlap colors */
+  --color-avail-green: #00994C77;
+  --color-avail-green-hover: #00994C88;
+  --color-avail-green-solid: #00994C;
+  --color-avail-green-overlay-border: #00994CB3;
+  --color-avail-green-overlay-bg: #00994C66;
+  --color-unavail-red: #E523230D;
+  --color-unavail-red-hover: #E5232333;
+  --color-unavail-red-active: #E523233B;
+  --color-unavail-red-legend: #E523232D;
+  --color-ifneeded-border: #997700CC;
+  --color-ifneeded-bg: #FFE8B8B3;
+  --color-grid-border: #DDDDDD99;
+  --color-grid-border-strong: #999999;
+
+  /* Overflow gradient */
+  --gradient-overflow: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+
+  /* ZigZag fill */
+  --color-zigzag-fill: white;
+  --color-zigzag-line: black;
+
+  /* Shadows */
+  --color-shadow: rgba(0, 0, 0, 0.15);
+  --color-shadow-light: rgba(0, 0, 0, 0.1);
+  --color-input-border: #4f4f4f1f;
+}
+
+/* Dark theme */
+.theme--dark {
+  /* Surface colors */
+  --color-surface: #1E1E1E;
+  --color-surface-variant: #2A2A2A;
+  --color-surface-muted: #2A2A2A;
+  --color-surface-highlight: #3a3a3a66;
+  --color-surface-green: #1a3a28;
+
+  /* Text colors */
+  --color-text-primary: #E0E0E0;
+  --color-text-secondary: #BDBDBD;
+  --color-text-muted: #9E9E9E;
+
+  /* Border colors */
+  --color-border: #444444;
+
+  /* Schedule overlap colors */
+  --color-avail-green: #29BC6844;
+  --color-avail-green-hover: #29BC6866;
+  --color-avail-green-solid: #29BC68;
+  --color-avail-green-overlay-border: #29BC68B3;
+  --color-avail-green-overlay-bg: #29BC6866;
+  --color-unavail-red: #FF525215;
+  --color-unavail-red-hover: #FF525240;
+  --color-unavail-red-active: #FF525250;
+  --color-unavail-red-legend: #FF52522D;
+  --color-ifneeded-border: #E5A800CC;
+  --color-ifneeded-bg: #E5A80033;
+  --color-grid-border: #44444499;
+  --color-grid-border-strong: #666666;
+
+  /* Overflow gradient */
+  --gradient-overflow: linear-gradient(to bottom, rgba(30,30,30,0) 0%, rgba(30,30,30,1) 100%);
+
+  /* ZigZag fill */
+  --color-zigzag-fill: #1E1E1E;
+  --color-zigzag-line: #666666;
+
+  /* Shadows */
+  --color-shadow: rgba(0, 0, 0, 0.4);
+  --color-shadow-light: rgba(0, 0, 0, 0.3);
+  --color-input-border: #ffffff1f;
+}
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 14eccb9b..2d8538cf 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -6,11 +6,16 @@ Vue.use(Vuetify)
 
 export default new Vuetify({
   theme: {
+    options: { customProperties: true },
     themes: {
       light: {
         primary: tailwind.theme.colors.green,
         error: tailwind.theme.colors.red,
       },
+      dark: {
+        primary: "#29BC68",
+        error: "#FF5252",
+      },
     },
   },
   breakpoint: {
diff --git a/frontend/src/utils/dark_mode.js b/frontend/src/utils/dark_mode.js
new file mode 100644
index 00000000..3f4d3ed6
--- /dev/null
+++ b/frontend/src/utils/dark_mode.js
@@ -0,0 +1,22 @@
+/** Returns the user's dark mode preference from localStorage, falling back to OS preference */
+export const getDarkModePreference = () => {
+  const stored = localStorage.getItem("darkMode")
+  if (stored !== null) {
+    return stored === "true"
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+}
+
+/** Saves the dark mode preference to localStorage */
+export const setDarkModePreference = (isDark) => {
+  localStorage.setItem("darkMode", String(isDark))
+}
+
+/** Applies dark mode by toggling Vuetify's theme and updating the meta theme-color */
+export const applyDarkMode = (vuetify, isDark) => {
+  vuetify.theme.dark = isDark
+  const meta = document.querySelector('meta[name="theme-color"]')
+  if (meta) {
+    meta.setAttribute("content", isDark ? "#1E1E1E" : "#FFFFFF")
+  }
+}
diff --git a/frontend/src/utils/general_utils.js b/frontend/src/utils/general_utils.js
index 72b1d693..b9f4945d 100644
--- a/frontend/src/utils/general_utils.js
+++ b/frontend/src/utils/general_utils.js
@@ -162,14 +162,15 @@ export const isElementInViewport = (
   )
 }
 
-/** Converts hex with transparency to equivalent hex without transparency (on white background) */
-export const removeTransparencyFromHex = (hexColor) => {
+/** Converts hex with transparency to equivalent hex without transparency on a given background */
+export const removeTransparencyFromHex = (hexColor, bgHex = "#FFFFFF") => {
   const color = Color(hexColor)
+  const bg = Color(bgHex)
 
-  // Y=255 - P*(255-X) : https://graphicdesign.stackexchange.com/questions/113007/how-to-determine-the-equivalent-opaque-rgb-color-for-a-given-partially-transpare
-  const red = 255 - color.alpha() * (255 - color.red())
-  const green = 255 - color.alpha() * (255 - color.green())
-  const blue = 255 - color.alpha() * (255 - color.blue())
+  // Y=bgChannel - P*(bgChannel-X) : https://graphicdesign.stackexchange.com/questions/113007/how-to-determine-the-equivalent-opaque-rgb-color-for-a-given-partially-transpare
+  const red = bg.red() - color.alpha() * (bg.red() - color.red())
+  const green = bg.green() - color.alpha() * (bg.green() - color.green())
+  const blue = bg.blue() - color.alpha() * (bg.blue() - color.blue())
 
   const newColor = Color.rgb(red, green, blue)
   return newColor.hex()
diff --git a/frontend/src/views/Event.vue b/frontend/src/views/Event.vue
index 12454ba2..37bbbaac 100644
--- a/frontend/src/views/Event.vue
+++ b/frontend/src/views/Event.vue
@@ -96,7 +96,7 @@
       <div class="tw-mx-auto tw-mt-4 tw-max-w-5xl">
         <div v-if="!isSettingSpecificTimes" class="tw-mx-4">
           <!-- Title and copy link -->
-          <div class="tw-flex tw-items-center tw-text-black">
+          <div class="tw-flex tw-items-center tw-text-text-primary">
             <div>
               <div
                 class="sm:mb-2 tw-flex tw-flex-wrap tw-items-center tw-gap-x-4 tw-gap-y-2"
@@ -106,14 +106,14 @@
                   v-if="event.when2meetHref?.length > 0"
                   :href="`https://when2meet.com${event.when2meetHref}`"
                   :small="isPhone"
-                  class="tw-cursor-pointer tw-select-none tw-rounded tw-bg-light-gray tw-px-2 tw-font-medium sm:tw-px-3"
+                  class="tw-cursor-pointer tw-select-none tw-rounded tw-bg-surface-muted tw-px-2 tw-font-medium sm:tw-px-3"
                   >Imported from when2meet</v-chip
                 >
                 <template v-if="isGroup">
                   <div class="">
                     <v-chip
                       :small="isPhone"
-                      class="tw-cursor-pointer tw-select-none tw-rounded tw-bg-light-gray tw-px-2 tw-font-medium sm:tw-px-3"
+                      class="tw-cursor-pointer tw-select-none tw-rounded tw-bg-surface-muted tw-px-2 tw-font-medium sm:tw-px-3"
                       @click="helpDialog = true"
                       >Availability group</v-chip
                     >
@@ -130,7 +130,7 @@
               </div>
               <div class="tw-flex tw-items-baseline tw-gap-1">
                 <div
-                  class="tw-text-sm tw-font-normal tw-text-very-dark-gray sm:tw-text-base"
+                  class="tw-text-sm tw-font-normal tw-text-text-secondary sm:tw-text-base"
                 >
                   {{ dateString }}
                 </div>
@@ -153,7 +153,7 @@
                   v-if="event.startOnMonday ? weekOffset != 1 : weekOffset != 0"
                   :icon="isPhone"
                   text
-                  class="tw-mr-1 tw-text-very-dark-gray sm:tw-mr-2.5"
+                  class="tw-mr-1 tw-text-text-secondary sm:tw-mr-2.5"
                   @click="resetWeekOffset"
                 >
                   <v-icon class="sm:tw-mr-2">mdi-calendar-today</v-icon>
@@ -334,7 +334,7 @@
           <v-spacer />
           <v-btn
             v-if="!isGroup && !authUser && selectedGuestRespondent"
-            class="tw-bg-white tw-text-green tw-transition-opacity"
+            class="tw-bg-surface tw-text-green tw-transition-opacity"
             :style="{ opacity: availabilityBtnOpacity }"
             @click="editGuestAvailability"
           >
@@ -342,7 +342,7 @@
           </v-btn>
           <v-btn
             v-else
-            class="tw-bg-white tw-text-green tw-transition-opacity"
+            class="tw-bg-surface tw-text-green tw-transition-opacity"
             :disabled="loading && !userHasResponded"
             :style="{ opacity: availabilityBtnOpacity }"
             @click="() => addAvailability()"
@@ -355,7 +355,7 @@
             Cancel
           </v-btn>
           <v-spacer />
-          <v-btn class="tw-bg-white tw-text-green" @click="() => saveChanges()">
+          <v-btn class="tw-bg-surface tw-text-green" @click="() => saveChanges()">
             Save
           </v-btn>
         </template>
@@ -366,7 +366,7 @@
           <v-spacer />
           <v-btn
             :disabled="!allowScheduleEvent"
-            class="tw-bg-white tw-text-blue"
+            class="tw-bg-surface tw-text-blue"
             @click="confirmScheduleEvent"
           >
             Schedule
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index b02447da..7e5e7ea4 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -34,18 +34,18 @@
       </v-fade-transition>
 
       <div
-        class="tw-rounded-md tw-px-6 tw-py-4 sm:tw-mx-4 sm:tw-bg-[#f3f3f366]"
+        class="tw-rounded-md tw-px-6 tw-py-4 sm:tw-mx-4 sm:tw-bg-[var(--color-surface-highlight)]"
         v-if="!loading || eventsNotEmpty"
       >
         <div
-          class="tw-mb-3 tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-mb-3 tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Tools
         </div>
         <div class="tw-flex tw-flex-row tw-items-center tw-gap-2">
           <div
             @click="convertW2M"
-            class="tw-cursor-pointer tw-text-sm tw-font-normal tw-text-dark-gray tw-underline"
+            class="tw-cursor-pointer tw-text-sm tw-font-normal tw-text-text-muted tw-underline"
           >
             Convert When2meet to Timeful
           </div>
diff --git a/frontend/src/views/Landing.vue b/frontend/src/views/Landing.vue
index 98ef522a..330ceac9 100644
--- a/frontend/src/views/Landing.vue
+++ b/frontend/src/views/Landing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-bg-light-gray">
+  <div class="tw-bg-surface-muted">
     <div
       class="tw-relative tw-m-auto tw-mb-12 tw-flex tw-max-w-6xl tw-flex-col tw-px-4 sm:tw-mb-20"
     >
@@ -28,7 +28,7 @@
           class="tw-mb-6 tw-flex tw-max-w-[26rem] tw-flex-col tw-items-center sm:tw-w-[35rem] sm:tw-max-w-none"
         >
           <div
-            class="tw-mb-4 tw-flex tw-select-none tw-items-center tw-rounded-full tw-border tw-border-light-gray-stroke tw-bg-white/70 tw-px-2.5 tw-py-1.5 tw-text-sm tw-text-dark-gray"
+            class="tw-mb-4 tw-flex tw-select-none tw-items-center tw-rounded-full tw-border tw-border-border-default tw-bg-surface/70 tw-px-2.5 tw-py-1.5 tw-text-sm tw-text-text-muted"
           >
             We're open source!
             <github-button
@@ -48,7 +48,7 @@
           </div>
 
           <div
-            class="lg:tw-text-md tw-text-left tw-text-center tw-text-sm tw-text-very-dark-gray sm:tw-text-lg md:tw-text-lg xl:tw-text-lg"
+            class="lg:tw-text-md tw-text-left tw-text-center tw-text-sm tw-text-text-secondary sm:tw-text-lg md:tw-text-lg xl:tw-text-lg"
           >
             Coordinate group meetings without the back and forth.
             <br class="tw-hidden sm:tw-block" />
@@ -86,7 +86,7 @@
           </v-btn>
           <div
             v-if="!authUser"
-            class="tw-text-center tw-text-xs tw-text-dark-gray sm:tw-text-sm"
+            class="tw-text-center tw-text-xs tw-text-text-muted sm:tw-text-sm"
           >
             It's free! No login required.
           </div>
@@ -99,7 +99,7 @@
 
           <!-- Hero video -->
           <div
-            class="tw-relative tw-z-20 tw-w-full tw-rounded-lg tw-border tw-border-light-gray-stroke tw-bg-white tw-shadow-xl sm:tw-rounded-xl md:tw-mx-auto md:tw-w-fit"
+            class="tw-relative tw-z-20 tw-w-full tw-rounded-lg tw-border tw-border-border-default tw-bg-surface tw-shadow-xl sm:tw-rounded-xl md:tw-mx-auto md:tw-w-fit"
           >
             <div
               class="tw-relative tw-mx-4 tw-aspect-square md:tw-size-[700px] lg:tw-size-[800px]"
@@ -188,7 +188,7 @@
     </div>
 
     <!-- Reddit Testimonials -->
-    <div class="tw-flex tw-justify-center tw-bg-light-gray tw-py-12">
+    <div class="tw-flex tw-justify-center tw-bg-surface-muted tw-py-12">
       <div class="tw-mx-4 tw-max-w-3xl tw-flex-1 sm:tw-mx-16">
         <div class="tw-text-center">
           <Header> People love us on Reddit! </Header>
@@ -198,7 +198,7 @@
             <div
               v-for="(comment, index) in redditComments"
               :key="index"
-              class="tw-flex tw-flex-col tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-md"
+              class="tw-flex tw-flex-col tw-rounded-lg tw-bg-surface tw-p-4 tw-shadow-md"
               :class="{
                 'sm:tw-col-span-2 sm:tw-mx-auto sm:tw-max-w-md':
                   redditComments.length % 2 !== 0 &&
@@ -207,19 +207,19 @@
             >
               <div class="tw-flex tw-flex-1 tw-items-center">
                 <div
-                  class="reddit-comment tw-text-left tw-text-sm tw-text-very-dark-gray"
+                  class="reddit-comment tw-text-left tw-text-sm tw-text-text-secondary"
                   v-html="comment.text.replace(/\n/g, '<br />')"
                 ></div>
               </div>
               <div
-                class="tw-my-4 tw-h-px tw-w-full tw-bg-light-gray-stroke"
+                class="tw-my-4 tw-h-px tw-w-full tw-bg-surface-muted-stroke"
               ></div>
               <div class="tw-flex tw-items-center tw-justify-between">
                 <div class="tw-text-right">
                   <a
                     :href="comment.link"
                     target="_blank"
-                    class="tw-text-sm tw-font-medium tw-text-dark-gray hover:tw-underline"
+                    class="tw-text-sm tw-font-medium tw-text-text-muted hover:tw-underline"
                   >
                     {{ comment.author }}
                   </a>
@@ -281,7 +281,7 @@
 </style>
 <style>
 .rdt-h {
-  @apply tw-rounded tw-bg-light-green/20 tw-px-px tw-text-black;
+  @apply tw-rounded tw-bg-light-green/20 tw-px-px tw-text-text-primary;
 }
 </style>
 
diff --git a/frontend/src/views/PageNotFound.vue b/frontend/src/views/PageNotFound.vue
index 944d1e96..a79acfa6 100644
--- a/frontend/src/views/PageNotFound.vue
+++ b/frontend/src/views/PageNotFound.vue
@@ -13,7 +13,7 @@
       <h1 class="tw-mb-2 tw-text-center tw-text-2xl tw-font-medium">
         404 - Page not found
       </h1>
-      <div class="tw-text-center tw-text-dark-gray">
+      <div class="tw-text-center tw-text-text-muted">
         The page you’re looking for doesn’t exist or an error occurred.
       </div>
     </div>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 82059746..d4081c1d 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -4,7 +4,7 @@
       <!-- Name change section -->
       <div class="tw-flex tw-flex-col tw-gap-5">
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Profile
         </div>
@@ -43,18 +43,37 @@
         </div>
       </div>
 
+      <!-- Appearance section -->
+      <div class="tw-flex tw-flex-col tw-gap-5">
+        <div
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green tw-dark:tw-text-light-green sm:tw-text-2xl"
+        >
+          Appearance
+        </div>
+        <div class="tw-flex tw-items-center tw-gap-3">
+          <v-switch
+            v-model="darkMode"
+            inset
+            hide-details
+            color="primary"
+            @change="onDarkModeChange"
+          />
+          <span class="tw-text-text-primary">Dark mode</span>
+        </div>
+      </div>
+
       <!-- Billing Section -->
       <div
         v-if="authUser.stripeCustomerId"
         class="tw-flex tw-flex-col tw-gap-5"
       >
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Billing
         </div>
         <div class="tw-flex tw-flex-col tw-gap-5 sm:tw-flex-row sm:tw-gap-28">
-          <div class="tw-text-black">
+          <div class="tw-text-text-primary">
             <v-btn @click="openBillingPortal">Manage billing</v-btn>
           </div>
         </div>
@@ -63,12 +82,12 @@
       <!-- Calendar Access Section -->
       <div class="tw-flex tw-flex-col tw-gap-5">
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Calendar access
         </div>
         <div class="tw-flex tw-flex-col tw-gap-5 sm:tw-flex-row sm:tw-gap-28">
-          <div class="tw-text-black">
+          <div class="tw-text-text-primary">
             We do not store your calendar data anywhere on our servers, and we
             only fetch your calendar events for the time frame you specify in
             order to display your calendar events while you fill out your
@@ -88,20 +107,20 @@
       <!-- Permissions Section -->
       <div class="tw-flex tw-flex-col tw-gap-5">
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Permissions
         </div>
         <div
-          class="tw-flex tw-flex-col tw-rounded-md tw-border-[1px] tw-border-light-gray-stroke"
+          class="tw-flex tw-flex-col tw-rounded-md tw-border-[1px] tw-border-border-default"
         >
           <div
-            class="tw-flex tw-w-full tw-flex-row tw-border-b-[1px] tw-border-light-gray-stroke"
+            class="tw-flex tw-w-full tw-flex-row tw-border-b-[1px] tw-border-border-default"
           >
             <div
               v-for="(h, i) in heading"
               :class="`tw-border-r-[${i == heading.length - 1 ? '0' : '1'}px]`"
-              class="tw-w-1/3 tw-border-light-gray-stroke tw-p-4 tw-font-bold"
+              class="tw-w-1/3 tw-border-border-default tw-p-4 tw-font-bold"
             >
               {{ h }}
             </div>
@@ -110,12 +129,12 @@
           <div
             v-for="(c, j) in content"
             :class="`tw-border-b-[${j == content.length - 1 ? '0' : '1'}px]`"
-            class="tw-flex tw-w-full tw-flex-row tw-border-light-gray-stroke"
+            class="tw-flex tw-w-full tw-flex-row tw-border-border-default"
           >
             <div
               v-for="(text, k) in c"
               :class="`tw-border-r-[${k == c.length - 1 ? '0' : '1'}px]`"
-              class="tw-w-1/3 tw-border-light-gray-stroke tw-p-4"
+              class="tw-w-1/3 tw-border-border-default tw-p-4"
             >
               {{ text }}
             </div>
@@ -126,16 +145,16 @@
       <!-- Question Section -->
       <div class="tw-flex tw-flex-col tw-gap-5">
         <div
-          class="tw-text-xl tw-font-medium tw-text-dark-green sm:tw-text-2xl"
+          class="tw-text-xl tw-font-medium tw-text-dark-green tw-dark:tw-text-light-green sm:tw-text-2xl"
         >
           Have a question?
         </div>
         <div class="tw-flex tw-flex-col tw-gap-5 sm:tw-flex-row sm:tw-gap-28">
-          <div class="tw-text-black">
+          <div class="tw-text-text-primary">
             Email us at
             <a
               href="mailto:contact@timeful.app"
-              class="tw-text-black tw-underline"
+              class="tw-text-text-primary tw-underline"
               >contact@timeful.app</a
             >
             with any questions!
@@ -154,12 +173,12 @@
             </template>
             <v-card>
               <v-card-title>Are you sure?</v-card-title>
-              <v-card-text class="tw-text-sm tw-text-dark-gray"
+              <v-card-text class="tw-text-sm tw-text-text-muted"
                 >Are you sure you want to delete your account? All your account
                 data will be lost.</v-card-text
               >
               <div class="tw-mx-6">
-                <div class="tw-text-sm tw-text-dark-gray">
+                <div class="tw-text-sm tw-text-text-muted">
                   Type your email in the box below to confirm:
                 </div>
                 <v-text-field
@@ -192,6 +211,11 @@
 import { mapState, mapActions } from "vuex"
 import { _delete, patch, isPhone, get } from "@/utils"
 import CalendarAccounts from "@/components/settings/CalendarAccounts.vue"
+import {
+  getDarkModePreference,
+  setDarkModePreference,
+  applyDarkMode,
+} from "@/utils/dark_mode"
 
 export default {
   name: "Settings",
@@ -220,6 +244,9 @@ export default {
       ],
     ],
 
+    // Appearance
+    darkMode: false,
+
     // Profile settings
     firstName: "",
     lastName: "",
@@ -273,6 +300,10 @@ export default {
       this.firstName = this.authUser.firstName
       this.lastName = this.authUser.lastName
     },
+    onDarkModeChange(isDark) {
+      setDarkModePreference(isDark)
+      applyDarkMode(this.$vuetify, isDark)
+    },
     saveName() {
       patch(`/user/name`, {
         firstName: this.firstName,
@@ -290,6 +321,7 @@ export default {
   },
 
   created() {
+    this.darkMode = getDarkModePreference()
     this.firstName = this.authUser.firstName
     this.lastName = this.authUser.lastName
   },
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5f87421e..6fa37ce5 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   important: true,
+  darkMode: ["class", ".theme--dark"],
   theme: {
     extend: {
       fontSize: {
@@ -37,6 +38,15 @@ module.exports = {
       "light-gray-stroke": "#dfdfdf",
       "avail-green": colors.emerald, // The green used for marking availability
       red: "#DB1616",
+
+      // Semantic color tokens (auto-switch via CSS variables)
+      surface: "var(--color-surface)",
+      "surface-variant": "var(--color-surface-variant)",
+      "surface-muted": "var(--color-surface-muted)",
+      "text-primary": "var(--color-text-primary)",
+      "text-secondary": "var(--color-text-secondary)",
+      "text-muted": "var(--color-text-muted)",
+      "border-default": "var(--color-border)",
     },
     screens: {
       sm: "640px",