Add dark mode support

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" />

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)

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>

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>

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>

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>

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>

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,15 +30,15 @@
         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
       </v-btn>
       <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>

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"

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

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>

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