Update colors from google material palette

src/App.css

@@ -1,3 +0,0 @@
-#root {
-    @apply m-0 p-0;
-}

src/App.scss

@@ -0,0 +1,3 @@
+#root {
+    @apply m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import './App.css'
+import './App.scss'
 import TopComponent from "./components/TopComponent";
 import MonParcours from './components/MonParcours';
 

src/components/Tag.scss

@@ -1,3 +1,4 @@
 .tag {
-    @apply text-white bg-gray-500 rounded-lg px-3 py-1 font-thin text-sm;
+    @apply rounded-lg px-3 py-1 font-thin text-sm;
+    @apply bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary;
 }

src/components/timeline/Timeline.scss

@@ -1,13 +1,14 @@
 .timeline {
-    @apply w-full p-5;
+    @apply w-full px-5;
 
     & > ul {
         @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
 
         // Draw center line
         &:before {
-            @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
+            @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
-            box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
+            @apply bg-primary/5 dark:bg-dark_primary/5;
+            // @apply shadow-2xl shadow-on_surface/50 dark:shadow-dark_on_surface/50;
         }
     }
 }

src/components/timeline/TimelineElement.scss

@@ -3,8 +3,9 @@
 
     // Place point in center line
     &:before {
-        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
+        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
-        box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+        @apply bg-primary/5 dark:bg-dark_primary/5;
+        // box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
     }
 
     &:nth-child(even) {
@@ -21,12 +22,14 @@
 
     .timeline-element__category {
         @apply top-5 flex md:justify-end mb-12;
+        @apply text-on_surface dark:text-dark_on_surface;
     }
 
     .timeline-element__info {
         & > details {
-            @apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
+            @apply mb-12 rounded-xl overflow-hidden relative;
-            box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+            @apply bg-primary/5 dark:bg-dark_primary/5;
+            // box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
 
             & > summary, & > div {
                 @apply p-5;
@@ -34,6 +37,7 @@
     
             & > summary {
                 @apply block select-none cursor-pointer outline-none p-5 font-semibold;
+                @apply text-on_surface dark:text-dark_on_surface;
                 
                 // BEGIN TRANSITION
                 @apply mb-0;
@@ -41,14 +45,13 @@
                 // END TRANSITION
     
                 &:hover {
-                    @apply bg-[#f8f8f8];
+                    @apply bg-opacity-5;
                 }
             }
     
             &[open] {
                 & > summary {
                     @apply mb-5; // TRANSITION
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                 }
             }
         }

tailwind.config.js

@@ -5,8 +5,21 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#005db5',
+        dark_primary: '#a8c8ff',
+        on_primary: '#ffffff',
+        dark_on_primary: '#003062',
+        surface: '#fdfbff',
+        dark_surface: '#1a1b1e',
+        on_surface: '#1a1b1e',
+        dark_on_surface: '#e3e2e6'
+      }
+    },
   },
   plugins: [],
 }
 
+// #005eb6
+// https://m3.material.io/theme-builder#/custom