Update theme colors

src/components/Banner.vue

@@ -53,10 +53,6 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.link {
-  @apply font-medium cursor-pointer border-b-2 border-gray-200 text-indigo-600 hover:border-indigo-600 duration-200 dark:(font-white border-gray-700) hover:dark:border-indigo-600
-}
-
 .color {
   @apply duration-500 text-white dark:text-black font-black font-color;
 

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="link" class="duration-150 transform hover:scale-105">
-    <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
+    <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) dark:hover:text-black text-red-500 dark:text-amber-400 duration-300">
       {{ $t(content) }}
     </div>
   </nuxt-link>

src/components/ContactForm.vue

@@ -63,7 +63,7 @@
         :disabled="!isSendable"
         :class="{'disabled': !isSendable}"
         @click.prevent="handleForm"
-        class="font-bold px-8 py-4 border-2 rounded-xl border-indigo-600 text-indigo-600 hover:(bg-indigo-600 text-white) hover:dark:text-black duration-300 cursor-pointer"
+        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 cursor-pointer"
       >
         {{ $t('contact.form.submit') }}
       </button>
@@ -160,7 +160,7 @@ textarea:focus-within ~ label, textarea:not(:placeholder-shown) ~ label {
 }
 
 .email {
-  @apply duration-300 border-b-3 border-gray-200 dark:border-gray-800 hover:border-indigo-600
+  @apply duration-300 border-b-3 border-gray-200 dark:border-gray-800 hover:border-red-500 hover:dark:border-amber-400
 }
 
 .disabled {

src/components/EnvListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li>
     {{ $t(title) }}:
-    <a class="duration-300 text-indigo-600 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-indigo-600 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
+    <a class="duration-300 text-red-500 dark:text-amber-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 dark:border-opacity-0 dark:hover:border-opacity-100 border-red-500 dark:border-amber-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
     <span v-else>{{ content }}</span>
   </li>
 </template>

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-indigo-600' : 'bg-gray-400'"
+        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-amber-400' : 'bg-gray-400'"
       />
       <span
         class="inline absolute rounded-full h-3 w-3"
-        :class="end === 'Today' ? 'bg-indigo-800' : 'bg-gray-500'"
+        :class="end === 'Today' ? 'bg-red-500 dark:bg-amber-400' : 'bg-gray-500'"
       />
     </div>
     <div class="leading-7">

src/components/Footer.vue

@@ -141,22 +141,22 @@ export default defineComponent({
       @apply border-b-2 border-gray-200 dark:border-gray-700 duration-300;
     }
     &:hover span {
-      @apply border-indigo-600
+      @apply border-red-500 dark:border-amber-400
     }
   }
   .link-active a {
-    @apply text-indigo-600;
+    @apply text-red-500 dark:text-amber-400;
   }
 
   .link a {
     @apply duration-500 border-b-2 border-transparent;
 
     &.link-active {
-      @apply text-indigo-600;
+      @apply text-red-500 dark:text-amber-400;
     }
 
     &:hover {
-      @apply border-indigo-600
+      @apply border-red-500 dark:border-amber-400
     }
   }
 }

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-indigo-600' : 'bg-gray-400'"
+        :class="end === 'Today' ? 'animate-ping bg-red-500 dark:bg-amber-400' : 'bg-gray-400'"
       />
       <span
         class="inline absolute rounded-full h-3 w-3"
-        :class="end === 'Today' ? 'bg-indigo-800' : 'bg-gray-500'"
+        :class="end === 'Today' ? 'bg-red-500 dark:bg-amber-400' : 'bg-gray-500'"
       />
     </div>
     <div class="leading-7">

src/components/Header.vue

@@ -107,7 +107,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .nav-link {
-  @apply font-medium cursor-pointer duration-500 mx-4 border-b-2 border-transparent hover:(border-indigo-600);
+  @apply font-medium cursor-pointer duration-500 mx-4 border-b-2 border-transparent hover:(border-red-500 dark:border-amber-400);
 }
 
 .navbar-bottom-items li {
@@ -115,6 +115,6 @@ export default defineComponent({
 }
 
 .link-active {
-  @apply text-indigo-600
+  @apply text-red-500 dark:text-amber-400
 }
 </style>

src/components/PageTitle.vue

@@ -1,17 +0,0 @@
-<template>
-  <h1 class="mt-16 font-bold text-3xl md:text-5xl mr-2 inline mb-4 border-b-3 border-solid border-indigo-600">
-    {{ this.$t(title) }}
-  </h1>
-</template>
-
-<script lang="ts">
-export default {
-  name: "PageTitle",
-  props: {
-    title: {
-      default: 'Title',
-      type: String
-    }
-  }
-}
-</script>

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-indigo-600 font-bold">Arthur DANJOU</span> 👋.</div> <br/>
+      <div>{{ $t('about.banner.hello') }} <span class="text-red-500 dark:text-amber-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/ServicePart.vue

@@ -4,7 +4,7 @@
       <slot name="icon" />
     </div>
     <div class="sm:mt-8">
-      <h1 class="font-bold text-3xl mb-4">
+      <h1 class="font-bold tracking-wider text-3xl mb-4">
         {{ $t(title) }}
       </h1>
       <slot name="content"/>

src/components/SideMenu.vue

@@ -142,11 +142,11 @@ export default defineComponent({
   @apply duration-300 border-b-2 border-transparent;
 
   &:hover {
-    @apply border-indigo-600;
+    @apply border-red-500 dark:border-amber-400
   }
 }
 
 .link-active a {
-  @apply text-indigo-600;
+  @apply text-red-500 dark:text-amber-400
 }
 </style>

src/layouts/error.vue

@@ -27,7 +27,7 @@
         </div>
         <div class="mt-12 mb-4 w-full text-center">
           <div class="home-btn" @click="back">
-            <div class="cursor-pointer w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-indigo-600 text-white) duration-500 rounded">
+            <div class="cursor-pointer 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">
               <BackSpaceIcon class="arrow-img text-xl"/>
               {{ $t('error.back') }}
             </div>

src/pages/about.vue

@@ -7,7 +7,7 @@
     <FormationsAbout />
     <ExperiencesAbout />
     <a href="/resume.pdf" target="_blank" class="duration-150 transform hover:scale-105">
-      <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
+      <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) dark:hover:text-black text-red-500 dark:text-amber-400 duration-300">
         {{ $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-indigo-600 dark:border-indigo-700 rounded-lg text-justify">
+    <section class="p-6 border border-red-500 dark:border-amber-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-indigo-500 rounded-lg text-white dark:(text-black bg-indigo-600) transform md:rotate-10">
+        <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">
           {{ $t('services.workflow.title') }}
         </h1>
       </div>
@@ -139,14 +139,14 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .service-item {
-  @apply text-xl text-gray-500;
+  @apply text-xl text-gray-600 dark:text-gray-400;
 }
 
 .workflow-item {
-  @apply text-3xl
+  @apply text-3xl font-bold tracking-wider
 }
 
 .number {
-  @apply block text-indigo-500 mb-2
+  @apply block text-red-500 dark:text-amber-400 mb-2 font-thin
 }
 </style>

windi.config.ts

@@ -1,4 +1,5 @@
 import {defineConfig} from "windicss/helpers";
+
 const colors = require('windicss/colors')
 
 module.exports = defineConfig({
@@ -11,7 +12,7 @@ module.exports = defineConfig({
           css: [
             {
               a: {
-                color: theme('colors.indigo.600'),
+                color: theme('colors.red.500'),
                 transitionDuration: '300ms',
                 cursor: 'pointer',
                 borderBottomColor: theme('colors.gray.200'),
@@ -20,7 +21,7 @@ module.exports = defineConfig({
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.indigo.600'),
+                  borderBottomColor: theme('colors.red.500'),
                 }
               }
             }
@@ -34,7 +35,7 @@ module.exports = defineConfig({
                 color: theme('colors.gray.400'),
               },
               a: {
-                color: theme('colors.indigo.600'),
+                color: theme('colors.amber.400'),
                 transitionDuration: '300ms',
                 cursor: 'pointer',
                 borderBottomColor: theme('colors.gray.700'),
@@ -42,7 +43,7 @@ module.exports = defineConfig({
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.indigo.600'),
+                  borderBottomColor: theme('colors.amber.400'),
                 }
               },
               strong: {