Make light theme less bright

src/App.vue

@@ -6,6 +6,7 @@ import {useI18n} from 'vue-i18n';
 import {useTheme} from 'vuetify';
 import useScreen from '@/hooks/screen';
 import {useScheduleStore} from '@/stores/schedule';
+import {COLORS} from '@/constants';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
 
 const {weeks} = storeToRefs(useScheduleStore());
@@ -15,17 +16,17 @@ const {t} = useI18n();
 const theme = useTheme();
 
 watch(isDark, (value) => {
-  theme.global.name.value = value ? 'dark' : 'light';
+  theme.global.name.value = value ? 'dark' : 'customLight';
 }, {immediate: true});
 </script>
 
 <template>
   <v-app :full-height="true">
     <div class="app__overlay">
-      <v-app-bar class="d-print-none text-white app-bar">
+      <v-app-bar class="d-print-none app-bar" :style="{color: COLORS.offWhite}">
         <template #prepend>
           <RouterLink to="/" :aria-label="$t('routes.home')" data-test-id="app-bar-home-link">
-            <v-icon icon="mdi-home" color="white" />
+            <v-icon icon="mdi-home" :color="COLORS.offWhite" />
           </RouterLink>
         </template>
         <template #append>

src/components/BaseView.vue

@@ -12,9 +12,8 @@ const {isDark} = useScreen();
 </script>
 <template>
   <v-card
-    :color="isDark ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.8)'"
+    :color="isDark ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.75)'"
     :rounded="!isLargeScreen ? 0 : 'rounded'"
-    class="mb-4"
   >
     <v-card-title class="d-print-none">
       <h1 class="text-h4">{{ title }}</h1>

src/components/TrainingCard.vue

@@ -4,6 +4,7 @@ import type {Training} from '@/types';
 import {getIcon, getIntensityColor} from '@/utils';
 import {useScheduleStore} from '@/stores/schedule';
 import useScreen from '@/hooks/screen';
+import {COLORS} from '@/constants';
 import TrainingCardActions from '@/components/TrainingCardActions.vue';
 
 defineProps<{
@@ -17,21 +18,21 @@ const {settings} = storeToRefs(useScheduleStore());
 <template>
   <v-card class="training-card mx-2 mt-4 mb-2">
     <v-card-item
-      class="training-card__title-wrapper text-white"
+      class="training-card__title-wrapper"
       :style="{'background-color': getIntensityColor(training.intensity)}"
     >
       <v-icon
         :icon="getIcon(training.activity)"
         :title="$t(`activities.${training.activity}`)"
         :aria-label="$t(`activities.${training.activity}`)"
         :color="getIntensityColor(training.intensity)"
-        :style="{background: isDark ? '#212121' : 'white'}"
+        :style="{background: isDark ? COLORS.darkGrey : COLORS.offWhite}"
         class="training-card__activity-icon"
         size="x-large"
       />
       <v-card-title
         class="d-flex ml-15 flex-column justify-top"
-        :style="{color: isDark ? '#212121' : 'white'}"
+        :style="{color: isDark ? COLORS.darkGrey : 'white'}"
       >
         <div class="training-card__title">
           {{ training.title || $t(`activities.${training.activity}`) }}

src/components/WeekCalendar.vue

@@ -3,14 +3,15 @@ import {computed, ref} from 'vue';
 import {storeToRefs} from 'pinia';
 import {groupBy, prop} from 'remeda';
 import DraggableList from 'vuedraggable';
+import {useI18n} from 'vue-i18n';
 import {useScheduleStore} from '@/stores/schedule';
 import {type Week, Intensity, type Training} from '@/types';
 import {getIntensityColor} from '@/utils';
 import useScreen from '@/hooks/screen';
 import useWeekDays from '@/hooks/weekdays';
+import {COLORS} from '@/constants';
 import TrainingCard from '@/components/TrainingCard.vue';
 import WeekCalendarActions from '@/components/WeekCalendarActions.vue';
-import {useI18n} from 'vue-i18n';
 
 const props = defineProps<{
   week: Week;
@@ -69,6 +70,7 @@ const getDayChipTitle = (intensity: Intensity, count: number) =>
         :color="getIntensityColor(+intensity)"
         :title="getWeekChipTitle(+intensity, group.length)"
         :aria-label="getWeekChipTitle(+intensity, group.length)"
+        :style="{color: COLORS.darkGrey}"
         variant="flat"
         label
         class="ml-4"
@@ -89,6 +91,7 @@ const getDayChipTitle = (intensity: Intensity, count: number) =>
             :color="getIntensityColor(maxIntensity)"
             :title="getDayChipTitle(maxIntensity, trainings.length)"
             :aria-label="getDayChipTitle(maxIntensity, trainings.length)"
+            :style="{color: COLORS.darkGrey}"
             variant="flat"
             label
             class="ml-4"
@@ -136,10 +139,6 @@ ul {
   list-style-type: none;
 }
 
-.v-chip {
-  color: #212121 !important;
-}
-
 .week-calendar__actions {
   gap: 0.5rem;
   &.flex-column {

src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ScheduleView > mounts 1`] = `
-"<div data-v-ff4a98e6="" data-v-eb553fec="" class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated mb-4" style="background-color: rgba(255, 255, 255, 0.8);">
+"<div data-v-ff4a98e6="" data-v-eb553fec="" class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated" style="background-color: rgba(255, 255, 255, 0.75);">
   <!---->
   <div class="v-card__loader">
     <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">

src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SettingsView > mounts 1`] = `
-"<div data-v-ff4a98e6="" data-v-5e0b544f="" class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated mb-4" style="background-color: rgba(255, 255, 255, 0.8);">
+"<div data-v-ff4a98e6="" data-v-5e0b544f="" class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated" style="background-color: rgba(255, 255, 255, 0.75);">
   <!---->
   <div class="v-card__loader">
     <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -166,9 +166,6 @@ exports[`SettingsView > mounts 1`] = `
         </div>
       </div>
       <!--teleport start-->
-      <transition-stub name="dp-menu-appear-bottom" appear="false" persisted="false" css="true">
-        <!---->
-      </transition-stub>
       <!--teleport end-->
     </div>
     <transition-stub data-v-5e0b544f="" name="expand-transition" appear="false" persisted="false" css="true">
@@ -212,7 +209,7 @@ exports[`SettingsView > mounts 1`] = `
     <transition-stub data-v-5e0b544f="" name="expand-transition" appear="false" persisted="false" css="true">
       <!--v-if-->
     </transition-stub>
-    <div data-v-5e0b544f="" class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-locale--is-ltr v-input--dirty v-text-field v-text-field--suffixed v-input--plain-underlined settings-input">
+    <div data-v-5e0b544f="" class="v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-input--dirty v-text-field v-text-field--suffixed v-input--plain-underlined settings-input">
       <!---->
       <div class="v-input__control">
         <div class="v-field v-field--active v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr">
@@ -236,7 +233,7 @@ exports[`SettingsView > mounts 1`] = `
               <!---->
               <!---->
             </label>
-            <!----><input size="1" type="number" id="settings-default-duration" aria-describedby="settings-default-duration-messages" aria-label="Default Duration" class="v-field__input"><span class="v-text-field__suffix"><span class="v-text-field__suffix__text">h</span></span>
+            <!----><input size="1" type="text" id="settings-default-duration" aria-describedby="settings-default-duration-messages" aria-label="Default Duration" pattern="d+(.d{1,2})?" inputmode="decimal" class="v-field__input"><span class="v-text-field__suffix"><span class="v-text-field__suffix__text">h</span></span>
           </div>
           <!---->
           <!---->
@@ -509,12 +506,7 @@ exports[`SettingsView > mounts 1`] = `
         </div>
       </div>
       <!---->
-      <div class="v-input__details">
-        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="settings-dark-mode-messages">
-          <!---->
-        </transition-group-stub>
-        <!---->
-      </div>
+      <!---->
     </div>
   </div>
   <!--v-if-->

src/components/__tests__/__snapshots__/TrainingCard.spec.ts.snap

@@ -18,11 +18,11 @@ exports[`TrainingCard > mounts 1`] = `
   </div>
   <!---->
   <!---->
-  <div data-v-24c3dbf4="" class="v-card-item training-card__title-wrapper text-white" style="background-color: rgb(255, 140, 0);">
+  <div data-v-24c3dbf4="" class="v-card-item training-card__title-wrapper" style="background-color: rgb(255, 140, 0);">
     <!---->
     <div class="v-card-item__content">
       <!---->
-      <!----><i data-v-24c3dbf4="" class="mdi-boxing-glove mdi v-icon notranslate v-theme--light v-icon--size-x-large training-card__activity-icon" style="color: rgb(255, 140, 0); caret-color: #FF8C00; background: white;" aria-hidden="true" title="Boxing" aria-label="Boxing"></i>
+      <!----><i data-v-24c3dbf4="" class="mdi-boxing-glove mdi v-icon notranslate v-theme--light v-icon--size-x-large training-card__activity-icon" style="color: rgb(255, 140, 0); caret-color: #FF8C00; background: rgb(250, 250, 250);" aria-hidden="true" title="Boxing" aria-label="Boxing"></i>
       <div data-v-24c3dbf4="" class="v-card-title d-flex ml-15 flex-column justify-top" style="color: white;">
         <div data-v-24c3dbf4="" class="training-card__title">Boxing</div>
         <div data-v-24c3dbf4="" class="training-card__duration text-subtitle-2"><i data-v-24c3dbf4="" class="mdi-timer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Duration"></i> 1 h</div>

src/constants.ts

@@ -93,3 +93,12 @@ export const WEEKDAYS = {
   sundayFirst: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
   mondayFirst: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
 };
+
+export const COLORS = {
+  offWhite: '#FAFAFA',
+  darkGrey: '#212121',
+  intensityLight: '#6DBF79',
+  intensityNormal: '#FFC300',
+  intensityMedium: '#FF8C00',
+  intensityHeavy: '#FF6347',
+};

src/main.ts

@@ -11,6 +11,7 @@ import 'vuetify/styles';
 import '@mdi/font/css/materialdesignicons.css';
 import {aliases, mdi} from 'vuetify/iconsets/mdi';
 import {createVuetify} from 'vuetify';
+import {COLORS} from '@/constants';
 
 const app = createApp(App);
 
@@ -26,6 +27,17 @@ app.use(
         mdi,
       },
     },
+    theme: {
+      defaultTheme: 'customLight',
+      themes: {
+        customLight: {
+          dark: false,
+          colors: {
+            surface: COLORS.offWhite,
+          },
+        },
+      },
+    },
   }),
 );
 

src/utils/index.ts

@@ -2,7 +2,7 @@ import {unref} from 'vue';
 import {helpers} from '@vuelidate/validators';
 import type {ErrorObject} from '@vuelidate/core';
 import {Intensity, type ScheduleSettings} from '@/types';
-import {ACTIVITIES} from '@/constants';
+import {ACTIVITIES, COLORS} from '@/constants';
 
 export const roundNearestQuarter = function (number: number, precision: number) {
   return +(Math.round(number * 4) / 4).toFixed(precision);
@@ -14,13 +14,13 @@ export const getIcon = (activityName: string) =>
 export const getIntensityColor = (intensity: Intensity) => {
   switch (intensity) {
     case Intensity.NORMAL:
-      return '#FFC300';
+      return COLORS.intensityNormal;
     case Intensity.MEDIUM:
-      return '#FF8C00';
+      return COLORS.intensityMedium;
     case Intensity.HEAVY:
-      return '#FF6347';
+      return COLORS.intensityHeavy;
     default:
-      return '#6DBF79';
+      return COLORS.intensityLight;
   }
 };
 

src/views/HomeView.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="home__overlay">
-    <h1 class="text-h3 text-center text-white">{{ $t('home.title') }}</h1>
-    <p class="text-body-1 text-white">
+  <div class="home__overlay text-grey-lighten-5">
+    <h1 class="text-h3 text-center">{{ $t('home.title') }}</h1>
+    <p class="text-body-1">
       {{ $t('home.p1') }}
     </p>
-    <p class="text-body-1 text-white">
+    <p class="text-body-1">
       {{ $t('home.p2') }}
     </p>
-    <p class="text-body-1 text-white">
+    <p class="text-body-1">
       {{ $t('home.p3') }}
     </p>
-    <p class="text-white">
+    <p>
       <v-icon icon="mdi-github" />
-      <a class="text-white ml-2" href="https://www.github.com/ajuvonen/getfit">GitHub</a>
+      <a class="text-grey-lighten-5 ml-2" href="https://www.github.com/ajuvonen/getfit">GitHub</a>
     </p>
-    <i18n-t keypath="home.credit" tag="p" class="text-caption text-white home__photo-credit">
+    <i18n-t keypath="home.credit" tag="p" class="text-caption home__photo-credit">
       <template #image>
         <a
-          class="text-white"
+          class="text-grey-lighten-5"
           href="https://www.pexels.com/photo/blank-paper-on-a-clipboard-8155155/"
           >Alesia Kozik</a
         >