From 519f3347ab6361c87ef3e0469256750ce1a852df Mon Sep 17 00:00:00 2001
From: beuleu <billyklotz789@gmail.com>
Date: Mon, 23 Oct 2023 17:46:55 +0200
Subject: [PATCH] feature, add darkmode and change original colorpalette

---
 src/components/Hero.astro               | 15 ++---
 src/components/projets/ProjetCard.astro |  5 +-
 src/components/shared/Footer.astro      | 80 ++++++++++++-------------
 src/components/shared/Header.astro      | 25 ++++----
 src/components/shared/ThemeIcon.astro   | 62 +++++++++++++++++++
 src/layouts/Layout.astro                | 57 ++++++++++++++----
 src/layouts/ProjectLayout.astro         | 24 ++++++--
 src/pages/contact.astro                 | 27 +++++----
 src/pages/cv.astro                      |  2 +-
 src/pages/projets/index.astro           |  2 +-
 10 files changed, 204 insertions(+), 95 deletions(-)
 create mode 100644 src/components/shared/ThemeIcon.astro

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 28d9369..2b6c917 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -37,12 +37,11 @@
   .titre {
     font-size   : 3em;
     font-weight : 600;
-    color       : #444;
   }
 
   .sous-titre {
     font-size : 2em;
-    color     : #444;
+    color     : var(--accentTextColor);
   }
 
   .desc {
@@ -61,10 +60,10 @@
 
   .cta a {
     width         : 100%;
-    color         : #FFF;
+    color         : var(--backgroundColor);
     font-weight   : 600;
     font-size     : 1.2em;
-    background    : #555;
+    background    : var(--backgroundUI);
     padding       : .8em 1.6em;
     border-radius : 3px;
     box-shadow    : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
@@ -72,15 +71,13 @@
   }
 
   .cta a:hover {
-    background : #F6F6F6;
+    background : var(--backgroundColor);
     box-shadow : rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px;
-    color      : #333;
+    color      : var(--textColor);
   }
 
   .cta a:active {
-    box-shadow : rgba(0, 0, 0, 0.35) 0 5px 15px;
-    background : #676767;
-    color      : #FFF
+    transform: translate(2px, -2px);
   }
 
   @media screen and (min-width : 450px) {
diff --git a/src/components/projets/ProjetCard.astro b/src/components/projets/ProjetCard.astro
index d99da19..cc698d9 100644
--- a/src/components/projets/ProjetCard.astro
+++ b/src/components/projets/ProjetCard.astro
@@ -47,7 +47,7 @@ const {
   .card {
     display        : flex;
     flex-direction : column;
-    border         : 1px solid black;
+    border         : 1px solid var(--accentTextColor);
     border-radius  : 3px;
     max-width      : 60ch;
     min-height     : 100%;
@@ -56,7 +56,8 @@ const {
   }
 
   .card:focus-within {
-    outline : 1px solid #000000EB;
+    outline : 1px solid var(--contrastTextColor2);
+      border: transparent;
   }
 
   .card:focus-within a:focus {
diff --git a/src/components/shared/Footer.astro b/src/components/shared/Footer.astro
index ba66421..ef92bb8 100644
--- a/src/components/shared/Footer.astro
+++ b/src/components/shared/Footer.astro
@@ -4,24 +4,24 @@ import Socials from "../Socials.astro";
 const menuItems = [
   {
     title: "Mon CV",
-    path: "/cv",
+    path: "/cv"
   }
 ];
 ---
 
-<hr />
+<hr/>
 <footer transition:name="footer">
 
-    { 0===1 &&
-        <ul class="list-inline">
+  { 0 === 1 &&
+          <ul class="list-inline">
             {
-                menuItems.map((item) => (
-                    <li class="list-inline-item">
-                        <a href={ item.path }>{ item.title }</a>
-                    </li>
-                ))
+              menuItems.map((item) => (
+                      <li class="list-inline-item">
+                          <a href={ item.path }>{ item.title }</a>
+                      </li>
+              ))
             }
-        </ul> }
+          </ul> }
 
     <section class="footer-cards">
 
@@ -38,67 +38,67 @@ const menuItems = [
     </section>
 
 
-
 </footer>
 
 <style>
   footer {
-      max-width: 1196px;
-      margin   : auto auto 1rem;
+    max-width : 1196px;
+    margin    : auto auto 1rem;
   }
 
   .footer-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
+    display        : flex;
+    flex-direction : column;
+    gap            : 0.5em;
   }
 
   .footer-card {
-    padding-block: 4em;
-    background: #F3F3F3;
+    padding-block   : 4em;
+    background      : var(--accentBackgroundColor);
 
-    flex-grow: 1;
-    flex-basis: 0;
+    flex-grow       : 1;
+    flex-basis      : 0;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
+    display         : flex;
+    flex-direction  : column;
+    justify-content : flex-start;
+    align-items     : center;
   }
 
   .footer-card__title {
-    font-size: 1.3em;
-    margin-block: 0.6em;
-      font-weight : 600;
+    font-size    : 1.3em;
+    margin-block : 0.6em;
+    font-weight  : 600;
   }
 
   .card-info {
-    margin-block: 0.1em;
+    margin-block : 0.1em;
   }
 
   footer ul {
-    padding: 0;
-    list-style: none;
-    text-align: center;
-    margin-block: 4em;
+    padding      : 0;
+    list-style   : none;
+    text-align   : center;
+    margin-block : 4em;
   }
 
   footer li {
-    padding: 0 0.7em;
-    margin-block: 0.4em;
+    padding      : 0 0.7em;
+    margin-block : 0.4em;
   }
 
   hr {
-    width: 95%;
-    margin: 5em auto 3em;
-    color: #333333;
+    width      : 95%;
+    margin     : 5em auto 3em;
+    border     : none;
+    border-top : 1px solid var(--accentBackgroundColor);
   }
 
 
-  @media screen and (min-width: 500px) {
+  @media screen and (min-width : 500px) {
     .footer-cards {
-      display: flex;
-      flex-direction: row;
+      display        : flex;
+      flex-direction : row;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/shared/Header.astro b/src/components/shared/Header.astro
index d421808..4fc3b8b 100644
--- a/src/components/shared/Header.astro
+++ b/src/components/shared/Header.astro
@@ -1,5 +1,6 @@
 ---
 import Socials from "../Socials.astro";
+import ThemeIcon from "./ThemeIcon.astro";
 const menuItems: {
     title: string;
     path: string;
@@ -65,6 +66,7 @@ const menuItems: {
                     </>
                 ))
             }
+            <ThemeIcon></ThemeIcon>
         </nav>
     </div>
 </header>
@@ -72,15 +74,15 @@ const menuItems: {
 <style lang="scss">
 
     .header {
-        --bgHover: #F3F3F3;
-        --colorHover: #111;
+        --bgHover: var(--accentBackgroundColor);
+        --colorHover: var(--accentTextColor);
 
 
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
         position: sticky;
         z-index: 5;
         top: 0;
-        background-color: white;
+        background: var(--backgroundColor);
 
     .container {
         display: flex;
@@ -107,7 +109,7 @@ const menuItems: {
 
     &:hover,
     &:focus {
-         background-color: #f5f5f5;
+         background-color: var(--accentBackgroundColor);
      }
     }
 
@@ -116,17 +118,16 @@ const menuItems: {
         flex-direction: column;
         align-items: center;
         padding: .5em 0;
-        border-top: solid 1px #e5e5e5;
+        border-top: solid 1px var(--accentBackgroundColor);
         width: 100%;
     }
 
 
     .header__link {
-        color: #333;
         text-decoration: none;
         padding: .5em 1em;
         white-space: nowrap;
-        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+        transition: background-color 0.3s ease-in-out;
 
     &:hover,
     &:focus {
@@ -143,10 +144,10 @@ const menuItems: {
         display: block;
         padding: .25em .5em;
         margin-left: 1em;
-        color: #55626a;
+        color: var(--accentTextColor);
         font-size: 0.875rem;
         text-decoration: none;
-        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+        transition: background-color 0.3s ease-in-out;
 
     &:hover,
     &:focus {
@@ -240,14 +241,14 @@ const menuItems: {
         top: 54px;
         height: 0;
         overflow: hidden;
-        background-color: #F3F3F3;
-        border-top: solid 1px #e5e5e5;
+        background-color: var(--accentBackgroundColor);
+        border-top: solid 1px var(--accentBackgroundColor);
         transition: all 0.3s ease-in-out;
 
+
     > a {
         padding: 10px;
         margin-left: 0;
-        color: #333;
         font-size: 1rem;
     &:hover {
          text-decoration: underline;
diff --git a/src/components/shared/ThemeIcon.astro b/src/components/shared/ThemeIcon.astro
new file mode 100644
index 0000000..c82d4db
--- /dev/null
+++ b/src/components/shared/ThemeIcon.astro
@@ -0,0 +1,62 @@
+<button id="themeToggle">
+    <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
+        <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
+    </svg>
+</button>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+    margin-inline: 20px;
+  }
+  .sun { fill: black; }
+  .moon { fill: transparent; }
+
+
+  :global(.dark) .sun { fill: transparent; }
+  :global(.dark) .moon { fill: white; }
+</style>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const theme = (() => {
+            if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+                return localStorage.getItem("theme");
+            }
+            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                return "dark";
+            }
+            return "light";
+        })();
+
+        if (theme === "light") {
+            document.documentElement.classList.remove("dark");
+        } else {
+            document.documentElement.classList.add("dark");
+        }
+
+        window.localStorage.setItem("theme", theme);
+
+        const handleToggleClick = () => {
+            const element = document.documentElement;
+            element.classList.toggle("dark");
+
+            const isDark = element.classList.contains("dark");
+            localStorage.setItem("theme", isDark ? "dark" : "light");
+        };
+
+        document
+            .getElementById("themeToggle")
+            .addEventListener("click", handleToggleClick);
+    });
+</script>
+
+<script>
+    document.addEventListener('astro:after-swap', () => {
+        localStorage.theme === 'dark'
+        ? document.documentElement.classList.add("dark")
+        : document.documentElement.classList.remove("dark");
+    });
+</script>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e3857fc..9f2983e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -26,11 +26,13 @@ const { titre, description } = Astro.props;
 </head>
 <body transition:animate="slide">
 <Header/>
-<slot/>
+    <slot/>
 <Footer/>
 </body>
 </html>
 <style is:global lang="scss">
+
+
   :root {
     --accent       : 136, 58, 234;
     --accent-light : 224, 204, 250;
@@ -46,23 +48,54 @@ const { titre, description } = Astro.props;
   }
 
   html {
-    /* hide scrollbar */
-    -ms-overflow-style : none; /* IE and Edge */
-    scrollbar-width    : none; /* Firefox */
+    --nord0                 : #2E3440;
+    --nord1                 : #3B4252;
+    --nord2                 : #434C5E;
+    --nord3                 : #4C566A;
+    --nord4                 : #D8DEE9;
+    --nord5                 : #E5E9F0;
+    --nord6                 : #ECEFF4;
+    --nord7                 : #8FBCBB;
+    --nord8                 : #88C0D0;
+    --nord9                 : #81A1C1;
+    --nord10                : #5E81AC;
+    --nord11                : #BF616A;
+    --nord12                : #D08770;
+    --nord13                : #EBCB8B;
+    --nord14                : #A3BE8C;
+    --nord15                : #B48EAD;
+
+    --backgroundColor       : #FFFFFF;
+    --accentBackgroundColor : var(--nord6);
+    --backgroundUI          : var(--nord2);
+    --textColor             : var(--nord0);
+    --accentTextColor       : var(--nord2);
+    --contrastTextColor     : var(--nord8);
+    --contrastTextColor2    : var(--nord15);
+
+    background-color        : var(--backgroundColor);
 
+    color                   : var(--textColor);
+    transition              : background-color 100ms ease-in-out, color 100ms ease-in-out;
   }
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  html::-webkit-scrollbar {
-    display : none;
+  html.dark {
+      --backgroundColor       : var(--nord0);
+      --accentBackgroundColor : var(--nord1);
+      --backgroundUI          : var(--nord4);
+      --textColor             : var(--nord5);
+      --accentTextColor       : var(--nord6);
+      --contrastTextColor     : var(--nord8);
+      --contrastTextColor2    : var(--nord15);
   }
 
+
   body {
     line-height            : 1.5;
     -webkit-font-smoothing : antialiased;
-      background         : rgba(255, 255, 255, 0.9);
   }
 
+
   img,
   picture,
   video,
@@ -87,12 +120,12 @@ const { titre, description } = Astro.props;
   label {
     overflow-wrap : break-word;
     font-family   : "Montserrat", sans-serif;
-    color         : black;
+    color         : inherit;
     font-size     : 1.1em;
   }
 
   a:hover {
-    color : lightseagreen;
+    color : var(--contrastTextColor2);
   }
 
   ul {
@@ -106,7 +139,9 @@ const { titre, description } = Astro.props;
   .bold {
     font-weight : 600;
   }
+
   .italic {
-      font-style : italic;
+    font-style : italic;
   }
+
 </style>
diff --git a/src/layouts/ProjectLayout.astro b/src/layouts/ProjectLayout.astro
index 246f3fd..4057921 100644
--- a/src/layouts/ProjectLayout.astro
+++ b/src/layouts/ProjectLayout.astro
@@ -17,7 +17,7 @@ const { titre, description, blogTitle, src, alt, techstack } = Astro.props;
 ---
 
 <Layout titre={ titre } description={ description }>
-    <main transition:animate="fade">
+    <div class="main" transition:animate="fade">
         <Breadcrumbs>
             <BreadcrumbsItem
                     href="/"
@@ -58,11 +58,11 @@ const { titre, description, blogTitle, src, alt, techstack } = Astro.props;
                 <slot/>
             </section>
         </article>
-    </main>
+    </div>
 </Layout>
 
 <style>
-  main {
+  .main {
     width   : min(100%, 1196px);
     margin  : auto;
     padding : .5em;
@@ -84,12 +84,14 @@ const { titre, description, blogTitle, src, alt, techstack } = Astro.props;
   .tag {
       color: whitesmoke;
       text-decoration: none;
-      padding: 0.1em 0.4em;
+      padding: 1em 4em;
       font-size: 1rem;
       border-radius: 3px 3px 0 0;
+      background : var(--nord6);
+      width : 100%;
 
       display         : flex;
-      justify-content : flex-start;
+      justify-content : center;
       align-items     : center;
   }
   .tag img {
@@ -97,9 +99,19 @@ const { titre, description, blogTitle, src, alt, techstack } = Astro.props;
       height: 32px;
   }
 
+  article {
+      background : var(--accentBackgroundColor);
+      border-radius: 5px;
+  }
+
+  .text {
+      padding : 1em;
+  }
+
   h1 {
     font-size : 2em;
-    color     : #444;
+      color     : var(--textColor);
+      padding-inline : 1em;
   }
 
   @media only screen and (min-width: 400px){
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 3ad2bb9..d1d45e5 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -27,19 +27,19 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
                     <input type="text" name="nom" id="nom" placeholder=" " required/>
                     <span class="visite__form--highlight"></span>
                     <span class="visite__form--bar"></span>
-                    <label for="nom">Nom</label>
+                    <label for="nom">Nom :</label>
                 </div>
                 <div class="visite__form--group">
                     <input type="email" name="email" id="email" placeholder=" " required/>
                     <span class="visite__form--highlight"></span>
                     <span class="visite__form--bar"></span>
-                    <label for="email">Email</label>
+                    <label for="email">Email :</label>
                 </div>
                 <div class="visite__form--group">
                     <textarea name="message" id="message" placeholder=" " required/>
                     <span class="visite__form--highlight"></span>
                     <span class="visite__form--bar"></span>
-                    <label for="message">Votre message ici</label>
+                    <label for="message">Votre message ici :</label>
                 </div>
                 <input type="submit" value="Envoyer"/>
             </form>
@@ -56,14 +56,14 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
 
   h1 {
     font-size : 2em;
-    color     : #444;
+    color     : var(--textColor);
   }
 
   h2 {
     margin-bottom : 2em;
     font-weight   : 400;
     font-size     : 1.2rem;
-    color         : #333;
+    color         : var(--accentTextColor);
   }
 
   .big {
@@ -84,7 +84,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
 
   input[type="text"],
   input[type="mail"] {
-    color : #000;
+    color : var(--textColor);
   }
 
   input[type="submit"] {
@@ -94,12 +94,13 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
     padding-inline : 3em;
     transition     : 0.2s ease all;
     box-shadow     : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
-      background : #EBEBEB;
+      background : var(--backgroundUI);
+      color      : var(--accentBackgroundColor);
   }
 
   input[type="submit"]:hover {
-    background : #676767;
-    color      : #FFF;
+      background : var(--accentBackgroundColor);
+      color : var(--textColor)
   }
 
   input[type="submit"]:focus {
@@ -117,7 +118,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
     display       : block;
     width         : min(450px, 100%);
     border        : none;
-    border-bottom : 1px solid #757575;
+    border-bottom : 1px solid var(--accentBackgroundColor);
   }
 
 
@@ -131,7 +132,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
 
   /* LABEL ======================================= */
   label {
-    color              : #999;
+    color              : var(--nord2);
     font-size          : 1em;
     font-weight        : normal;
     position           : absolute;
@@ -150,7 +151,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
   input:not(:placeholder-shown) ~ label {
     top         : -1.5rem;
     font-weight : 700;
-    color       : #333;
+    color       : var(--textColor);
     font-size   : .8em;
   }
 
@@ -168,7 +169,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
     width              : 0;
     bottom             : 1px;
     position           : absolute;
-    background         : #5264ae;
+    background         : var(--contrastTextColor);
     transition         : 0.2s ease all;
     -moz-transition    : 0.2s ease all;
     -webkit-transition : 0.2s ease all;
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index e9e5b71..0cbad3f 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -44,7 +44,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
 
   h1 {
       font-size : 2em;
-      color     : #444;
+      color     : var(--textColor);
   }
 
   section {
diff --git a/src/pages/projets/index.astro b/src/pages/projets/index.astro
index 6a81c1f..449986c 100644
--- a/src/pages/projets/index.astro
+++ b/src/pages/projets/index.astro
@@ -78,7 +78,7 @@ const myProjects = [
 
   h1 {
     font-size : 2em;
-    color     : #444;
+      color     : var(--textColor);
   }
 
   section {