🌔 add darkmode

diepoe · Oct 7, 2021 · a0477f4 · a0477f4 · vercel · Oct 7, 2021
1 parent ecc90d5
commit a0477f4
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 40 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -9,6 +9,7 @@
     lg:text-xl
     font-cyrene
     text-bluegray-900
+    dark:text-bluegray-300
     xl:text-2xl
   "
 >

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -18,7 +18,9 @@
         alt="Limonade Icon"
         class="w-12 h-12 xl:w-14 xl:h-14"
       />
-      <span class="text-xl font-cyrene md:text-2xl lg:text-3xl xl:text-4xl">
+      <span
+        class="text-xl font-cyrene text-bluegray-900 dark:text-bluegray-200 md:text-2xl lg:text-3xl xl:text-4xl"
+      >
         Fluffy Limonade
       </span>
     </header>
@@ -29,7 +31,7 @@
   >
     {#each items as item}
       <li
-        class="grid p-2 rounded-md max-w-max place-items-center text-bluegray-600 text-md lg:text-lg hover:bg-blue-100 2xl:text-xl font-kyivsans"
+        class="grid p-2 rounded-md max-w-max place-items-center text-bluegray-600 dark:text-bluegray-300 text-md lg:text-lg hover:bg-blue-100 dark:hover:bg-bluegray-800 dark:hover:text-bluegray-200 2xl:text-xl font-kyivsans"
       >
         <a href={item.url}>{item.name}</a>
       </li>
@@ -38,15 +40,15 @@
   <!--Mobile nav-->
   <div class="grid col-span-1 mr-4 lg:hidden place-items-end">
     <button
-      class="p-2 rounded hover:bg-blue-100"
+      class="p-2 rounded hover:bg-blue-100 dark:hover:bg-bluegray-800"
       aria-label="show menu"
       on:click={() => {
         showMenu = true;
       }}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current text-bluegray-800"
+        class="stroke-current text-bluegray-800 dark:text-bluegray-200"
         width="24"
         height="24"
         stroke-width="2"
@@ -64,14 +66,16 @@
     <div
       class="absolute inset-x-0 top-0 z-40 p-2 transition origin-top-right transform lg:hidden"
     >
-      <div class="overflow-hidden rounded-lg shadow-md bg-blue-50">
+      <div
+        class="overflow-hidden rounded-lg shadow-md bg-blue-50 dark:bg-bluegray-800"
+      >
         <div class="px-3 pt-4">
           <div class="-mr-2">
             <button
               type="button"
               on:click={() => (showMenu = false)}
               aria-label="Toggle mobile menu"
-              class="inline-flex items-center justify-center p-2 text-red-500 rounded-md bg-blue hover:text-red-600 hover:bg-blue-100 focus:outline-none"
+              class="inline-flex items-center justify-center p-2 text-red-500 rounded-md dark:hover:bg-bluegray-700 hover:text-red-600 hover:bg-blue-100 focus:outline-none"
             >
               <span class="sr-only">Close main menu</span>
               <svg
@@ -103,7 +107,7 @@
                 rel="prefetch"
                 href={item.url}
                 on:click={() => (showMenu = false)}
-                class="block px-3 py-2 text-base font-medium leading-relaxed rounded-md font-kyivsans text-bluegray-700 md:text-lg hover:text-bluegray-900 hover:bg-blue-200"
+                class="block px-3 py-2 text-base font-medium leading-relaxed rounded-md font-kyivsans text-bluegray-700 dark:text-bluegray-300 md:text-lg hover:text-bluegray-900 hover:bg-blue-300"
                 role="menuitem">{item.name}</a
               >
             {/each}

diff --git a/src/components/shop/ShoppingItems.svelte b/src/components/shop/ShoppingItems.svelte
@@ -36,11 +36,11 @@
 </script>
 
 <section
-  class="grid grid-cols-1 gap-3 justify-items-center md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 lg:gap-y-6"
+  class="grid grid-cols-1 gap-3 my-4 justify-items-center md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 lg:gap-y-6"
 >
   {#each items as item}
     <div
-      class="relative w-5/6 p-4 overflow-hidden transition-shadow duration-500 shadow-lg hover:translate-y-1 hover:shadow-xl sm:w-2/3 md:w-64 bg-blue-50 rounded-2xl"
+      class="relative w-5/6 p-4 overflow-hidden transition duration-500 shadow-lg hover:translate-y-1 hover:shadow-xl sm:w-2/3 md:w-64 bg-blue-50 dark:bg-bluegray-800 rounded-2xl"
     >
       <img
         alt={item.name}
@@ -50,13 +50,13 @@
       <div class="w-4/6">
         <h3 class="no-underline hover:underline">
           <a
-            class="mb-2 text-lg font-medium lg:text-xl font-kyivsans text-bluegray-800"
+            class="mb-2 text-lg font-medium lg:text-xl font-kyivsans text-bluegray-800 dark:text-bluegray-100"
             href={item.url}>{item.name}</a
           >
         </h3>
         <p>
           <a
-            class="text-xs font-kyivsans lg:text-base text-bluegray-400 line-clamp-4"
+            class="text-xs font-kyivsans lg:text-base text-bluegray-400 dark:text-bluegray-300 line-clamp-4"
             href={item.url}
           >
             {@html item.description}

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -22,7 +22,7 @@ const {description} = Astro.props
     <title>{title} - Fluffy Limonadenfabrik</title>
   </head>
   <!--TODO: add darkmode-->
-  <body class="bg-blue-50">
+  <body class="bg-blue-50 dark:bg-bluegray-900 dark:text-white">
     <noscript
       >Bitte aktivieren sie JavaScript um diese Webseite nutzen zu
       können.</noscript

diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -3,8 +3,8 @@ import BaseLayout from "./BaseLayout.astro"
 const {content} = Astro.props
 ---
 
-<BaseLayout title={content.title} description={content.description}>
-<div class="prose md:prose-lg xl:prose-xl font-kyivsans">
-<slot />
-</div>
-</BaseLayout>
+<BaseLayout title="{content.title}" description="{content.description}">
+  <div class="prose md:prose-lg xl:prose-xl dark:prose-dark font-kyivsans">
+    <slot />
+  </div>
+</BaseLayout>
diff --git a/src/layouts/ProductLayout.astro b/src/layouts/ProductLayout.astro
@@ -27,6 +27,7 @@ const {content} = Astro.props
           col-span-2
           pb-2
           text-xl text-bluegray-800
+          dark:text-bluegray-100
           sm:text-2xl
           md:text-3xl
           font-branch
@@ -44,7 +45,7 @@ const {content} = Astro.props
     </section>
   </figure>
 
-  <div class="prose md:prose-lg xl:prose-xl font-kyivsans">
+  <div class="prose md:prose-lg xl:prose-xl dark:prose-dark font-kyivsans">
     <slot />
   </div>
 </BaseLayout>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -11,6 +11,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       class="
         pb-2
         text-xl text-bluegray-800
+        dark:text-bluegray-100
         md:text-2xl
         font-branch
         lg:text-3xl
@@ -20,7 +21,15 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       Über das Unternehmen
     </h1>
     <br />
-    <p class="text-justify lg:text-lg text-bluegray-700 font-kyivsans">
+    <p
+      class="
+        text-justify
+        lg:text-lg
+        text-bluegray-700
+        dark:text-bluegray-300
+        font-kyivsans
+      "
+    >
       Fluffy GmbH ist ein junges, innovatives Unter&shy;nehmen mit zur Zeit 34
       Mit&shy;arbeitern, das alkohol&shy;freie Erfrischungs&shy;getränke
       aus&shy;schließlich bio&shy;logisch herstellt. Das Unter&shy;nehmen hat
@@ -31,7 +40,17 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       Spuren&shy;elementen aus.
     </p>
   </section>
-  <section class="p-2 mx-2 bg-yellow-100 rounded-md shadow-md lg:pt-4 lg:pr-5">
+  <section
+    class="
+      p-2
+      mx-2
+      bg-yellow-100
+      rounded-md
+      shadow-md
+      dark:bg-yellow-300
+      lg:pt-4 lg:pr-5
+    "
+  >
     <a
       href="https://unsplash.com/photos/hINQgaTqg7Q"
       target="_blank"
@@ -65,7 +84,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
         "
       />
     </a>
-    <p class="p-2 text-justify lg:text-lg text-bluegray-700 font-kyivsans">
+    <p class="p-2 text-justify lg:text-lg text-bluegray-600 font-kyivsans">
       Die Marke Fluffy als Garant für leckere Limo&shy;naden&shy;sorten, wurde
       2001 ent&shy;wickelt und er&shy;freut sich seitdem wachsend&shy;er
       Beliebt&shy;heit. Die Getränke&shy;sorten der Marke Fluffy sind alle rein
@@ -80,7 +99,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
         text-justify
         xl:mt-4
         lg:text-lg
-        text-bluegray-700
+        text-bluegray-600
         font-kyivsans
       "
     >

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,15 +12,25 @@ import BaseLayout from "../layouts/BaseLayout.astro"
         loading="lazy"
         src="/icon.png"
         alt="Fluffy Icon"
-        class="w-24 h-24 p-4 rounded-md shadow-lg xl:w-36 xl:h-36"
+        class="
+          w-24
+          h-24
+          p-4
+          rounded-md
+          shadow-lg
+          dark:shadow-xl
+          xl:w-36 xl:h-36
+        "
         width="720"
         height="720"
       />
     </figure>
     <h1
       class="
         pb-2
-        text-xl text-center text-bluegray-800
+        text-xl text-center
+        dark:text-bluegray-100
+        text-bluegray-800
         md:text-2xl
         font-branch
         lg:text-3xl
@@ -64,6 +74,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
     <h2
       class="
         text-lg text-bluegray-800
+        dark:text-bluegray-100
         md:text-xl
         lg:text-2xl
         xl:text-3xl
@@ -73,7 +84,15 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       Fluffy - die spritzige Limonade
     </h2>
 
-    <p class="text-justify lg:text-lg text-bluegray-600 font-kyivsans">
+    <p
+      class="
+        text-justify
+        lg:text-lg
+        text-bluegray-600
+        dark:text-bluegray-300
+        font-kyivsans
+      "
+    >
       Hergestellt wird Fluffy aus den besten Zutaten aus der Um&shy;gebung. Wir
       ver&shy;wenden fast aus&shy;schließlich öko&shy;logische
       Anbau&shy;produkte. Somit ist unsere Limo&shy;nade nicht nur ungemein
@@ -87,6 +106,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       rounded-md
       shadow-md
       bg-lemon-100
+      dark:bg-lemon-600
       lg:p-4
       xl:p-6
       lg:pr-5 lg:w-5/6
@@ -95,6 +115,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
     <h2
       class="
         text-lg text-bluegray-800
+        dark:text-bluegray-100
         md:text-xl
         lg:text-2xl
         xl:text-3xl
@@ -103,7 +124,16 @@ import BaseLayout from "../layouts/BaseLayout.astro"
     >
       Gewinnspiel
     </h2>
-    <p class="p-2 text-justify lg:text-lg text-bluegray-700 font-kyivsans">
+    <p
+      class="
+        p-2
+        text-justify
+        lg:text-lg
+        text-bluegray-700
+        dark:text-bluegray-50
+        font-kyivsans
+      "
+    >
       Machen Sie mit und Sie erhalten die Chance auf wertvolle Preise:
     </p>
     <ul
@@ -115,6 +145,7 @@ import BaseLayout from "../layouts/BaseLayout.astro"
         font-kyivsans
         lg:text-lg
         text-bluegray-700
+        dark:text-bluegray-50
       "
     >
       <li>Preis: Eine Reise in den Harz</li>
@@ -131,12 +162,30 @@ import BaseLayout from "../layouts/BaseLayout.astro"
       height="720"
       class="float-right w-24 h-24 p-2 lg:p-4 xl:w-36 xl:h-36"
     />
-    <p class="p-2 text-justify lg:text-lg text-bluegray-700 font-kyivsans">
+    <p
+      class="
+        p-2
+        text-justify
+        lg:text-lg
+        text-bluegray-700
+        dark:text-bluegray-50
+        font-kyivsans
+      "
+    >
       Teilnehmen kann jeder der mindestens 18 Jahre alt ist. Mitmachen kann man
       noch bis zum 31.10.2007. Die Preisfrage lautet: Wieviele Mitarbeiter hat
       die Fluffy GmbH zur Zeit?
     </p>
-    <p class="p-2 text-center lg:text-lg text-bluegray-700 font-kyivsans">
+    <p
+      class="
+        p-2
+        text-center
+        lg:text-lg
+        text-bluegray-700
+        dark:text-bluegray-50
+        font-kyivsans
+      "
+    >
       <strong>Viel Erfolg!</strong>
     </p>
   </section>