Update color

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <nuxt-link data-blobity-radius="16" :to="link" class="z-index-3">
-    <div class="text-lg px-8 py-4 rounded-xl bg-white dark:bg-black border-2 border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 duration-300">
+    <div class="text-lg px-8 py-4 rounded-xl bg-white dark:bg-black border-2 border-red-500 dark:border-purple-400 text-red-500 dark:text-purple-400 duration-300">
       {{ $t(content) }}
     </div>
   </nuxt-link>

src/components/ContactForm.vue

@@ -65,7 +65,10 @@
         :disabled="!isSendable"
         :class="{'disabled': !isSendable}"
         @click.prevent="handleForm"
-        class="font-bold px-8 py-4 border-2 rounded-xl border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) hover:dark:text-black duration-300"
+        data-blobity-magnetic="false"
+        data-blobity-offset-x="4"
+        data-blobity-offset-y="4"
+        class="z-index-3 font-bold px-8 py-4 border-2 bg-white rounded-xl border-red-500 dark:(border-purple-400 bg-black text-purple-400) text-red-500 duration-300"
       >
         {{ $t('contact.form.submit') }}
       </button>
@@ -150,18 +153,18 @@ textarea:focus-within ~ label, textarea:not(:placeholder-shown) ~ label {
 }
 
 .form-div {
-  @apply relative border-b border-gray-200 dark:border-gray-800 focus-within:border-black dark:focus-within:border-white
+  @apply relative border-b border-gray-200 dark:border-gray-800 focus-within:border-black dark:focus-within:border-white;
 }
 
 .second-input, .first-input, .form-input {
-  @apply block w-full appearance-none focus:outline-none bg-transparent
+  @apply block w-full appearance-none focus:outline-none bg-transparent;
 }
 
 .form-label {
-  @apply absolute top-0 duration-300 text-gray-700 dark:text-gray-400
+  @apply absolute top-0 duration-300 text-gray-700 dark:text-gray-400;
 }
 
 .disabled {
-  @apply bg-gray-300 cursor-not-allowed border-gray-300 hover:text-black text-black
+  @apply cursor-not-allowed border-gray-300 dark:border-gray-700 text-gray-300 dark:text-gray-700;
 }
 </style>

src/components/EnvListItem.vue

@@ -2,7 +2,7 @@
   <li>
     {{ $t(title) }}:
     <div class="z-index-3 inline">
-      <a data-blobity-magnetic="false" class="text-red-500 dark:text-amber-400 font-medium" v-if="link" :href="link" target="_blank">{{ content }}</a>
+      <a data-blobity-magnetic="false" class="text-red-500 dark:text-purple-400 font-medium" v-if="link" :href="link" target="_blank">{{ content }}</a>
       <span v-else>{{ content }}</span>
     </div>
   </li>

src/components/Experience.vue

@@ -3,11 +3,11 @@
     <div class="self-center flex h-3 w-3 mr-3 relative">
       <span
         class="relative inline h-3 w-3 rounded-full opacity-75"
-        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-amber-400' : 'bg-gray-400'"
+        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-purple-400' : 'bg-gray-400'"
       />
       <span
         class="inline absolute rounded-full h-3 w-3"
-        :class="end === 'Today' ? 'bg-red-500 dark:bg-amber-400' : 'bg-gray-500'"
+        :class="end === 'Today' ? 'bg-red-500 dark:bg-purple-400' : 'bg-gray-500'"
       />
     </div>
     <div class="leading-7">

src/components/Footer.vue

@@ -11,7 +11,7 @@
               {{ $t('footer.description') }}
             </p>
             <div class="mt-4 flex">
-              <nuxt-link data-blobity-magnetic="false" data-blobity-radius="16" to="/contact" class="z-index-3 text-red-500">
+              <nuxt-link data-blobity-magnetic="false" data-blobity-radius="16" to="/contact" class="z-index-3 text-red-500 dark:text-purple-400">
                 {{ $t(hiring_message) }}
               </nuxt-link>
             </div>
@@ -135,7 +135,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .footer {
   .link-active a {
-    @apply text-red-500 dark:text-amber-400;
+    @apply text-red-500 dark:text-purple-400;
   }
 
   .link {
@@ -143,7 +143,7 @@ export default defineComponent({
   }
 
   .link-active {
-    @apply text-red-500 dark:text-amber-400
+    @apply text-red-500 dark:text-purple-400;
   }
 }
 </style>

src/components/Formation.vue

@@ -3,11 +3,11 @@
     <div class="self-center flex h-3 w-3 mr-3 relative">
       <span
         class="relative inline h-3 w-3 rounded-full opacity-75"
-        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-amber-400' : 'bg-gray-400'"
+        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-purple-400' : 'bg-gray-400'"
       />
       <span
         class="inline absolute rounded-full h-3 w-3"
-        :class="end === 'Today' ? 'bg-red-500 dark:bg-amber-400' : 'bg-gray-500'"
+        :class="end === 'Today' ? 'bg-red-500 dark:bg-purple-400' : 'bg-gray-500'"
       />
     </div>
     <div class="leading-7">

src/components/Header.vue

@@ -106,6 +106,6 @@ export default defineComponent({
 }
 
 .link-active {
-  @apply text-red-500 dark:text-amber-400
+  @apply text-red-500 dark:text-purple-400;
 }
 </style>

src/components/PresentationAbout.vue

@@ -4,7 +4,7 @@
       <img class="rounded-full my-5" src="~/assets/images/memojies/Hey.png" alt="A picture of myself" />
     </div>
     <div class="text-lg leading-6 text-justify dark:text-gray-400 text-gray-700">
-      <div>{{ $t('about.banner.hello') }} <span class="text-red-500 dark:text-amber-400 font-bold">Arthur DANJOU</span> 👋.</div> <br/>
+      <div>{{ $t('about.banner.hello') }} <span class="text-red-500 dark:text-purple-400 font-bold">Arthur DANJOU</span> 👋.</div> <br/>
       <p>{{ $t('about.banner.1')}}</p> <br/>
       <p>{{ $t('about.banner.2') }}</p> <br/>
       <p>{{ $t('about.banner.3') }}</p> <br />

src/components/SideMenu.vue

@@ -139,6 +139,6 @@ export default defineComponent({
 }
 
 .link-active a {
-  @apply text-red-500 dark:text-amber-400
+  @apply text-red-500 dark:text-purple-400;
 }
 </style>

src/layouts/error.vue

@@ -27,7 +27,7 @@
         </div>
         <div class="flex justify-center mt-12 mb-4 w-full text-center">
           <div data-blobity class="z-index-3" @click="back">
-            <div class="w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-red-500 text-white dark:bg-amber-400 dark:text-black) duration-500 rounded">
+            <div class="w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-red-500 text-white dark:bg-purple-400 dark:text-black) duration-500 rounded">
               <BackSpaceIcon class="arrow-img text-xl"/>
               {{ $t('error.back') }}
             </div>

src/pages/about.vue

@@ -7,7 +7,7 @@
     <FormationsAbout />
     <ExperiencesAbout />
     <a href="/resume.pdf" data-blobity-radius="16" target="_blank" class="z-index-3 duration-150 transform hover:scale-105">
-      <div class="text-lg px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 bg-white dark:bg-black">
+      <div class="text-lg px-8 py-4 rounded-xl border-2 border-red-500 dark:border-purple-400 text-red-500 dark:text-purple-400 bg-white dark:bg-black">
         {{ $t('about.cv') }}
       </div>
     </a>

src/pages/newsletter.vue

@@ -5,7 +5,7 @@
         <p>{{ $t('newsletter.description') }}</p>
       </div>
     </section>
-    <section class="p-6 border border-red-500 dark:border-amber-400 rounded-lg text-justify">
+    <section class="p-6 border border-red-500 dark:border-purple-400 rounded-lg text-justify">
       <h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('newsletter.title') }}</h1>
       <h3 class="text-gray-500 dark:text-gray-400">{{ $t('newsletter.subtitle') }}</h3>
       <div class="my-3">

src/pages/services.vue

@@ -63,7 +63,7 @@
     </section>
     <section class="mb-24 w-full">
       <div class="flex justify-center md:justify-end mb-8">
-        <h1 class="text-3xl md:text-4xl py-4 px-8 bg-red-500 dark:bg-amber-400 rounded-lg text-white dark:text-black transform md:rotate-10">
+        <h1 class="text-3xl md:text-4xl py-4 px-8 bg-red-500 dark:bg-purple-400 rounded-lg text-white dark:text-black transform md:rotate-10">
           {{ $t('services.workflow.title') }}
         </h1>
       </div>
@@ -145,10 +145,10 @@ export default defineComponent({
 }
 
 .workflow-item {
-  @apply text-3xl font-bold tracking-wider
+  @apply text-3xl font-bold tracking-wider;
 }
 
 .number {
-  @apply block text-red-500 dark:text-amber-400 mb-2 font-thin
+  @apply block text-red-500 dark:text-purple-400 mb-2 font-thin;
 }
 </style>

tailwind.config.ts

@@ -26,7 +26,7 @@ module.exports = defineConfig({
                 color: theme('colors.gray.400'),
               },
               a: {
-                color: theme('colors.amber.400'),
+                color: theme('colors.purple.400'),
               },
               strong: {
                 color: theme('colors.white'),