From 67cffb4bd4e339e3f949d4e9d921cd80a57ef4b1 Mon Sep 17 00:00:00 2001
From: Cole Peters <cole@colepeters.com>
Date: Thu, 6 Jun 2024 12:41:21 -0500
Subject: [PATCH] Update Cookbook for dark mode

---
 app/elements/cookbook/article.mjs     |  2 +-
 app/elements/cookbook/header.mjs      |  8 +++++++-
 app/elements/cookbook/recipe-card.mjs |  1 +
 app/pages/cookbook/$$.mjs             | 10 ++++++++++
 app/pages/cookbook/index.html         |  8 ++++++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/elements/cookbook/article.mjs b/app/elements/cookbook/article.mjs
index 852ca7b..f3acab0 100644
--- a/app/elements/cookbook/article.mjs
+++ b/app/elements/cookbook/article.mjs
@@ -210,7 +210,7 @@ export default function CookbookArticle ({ html }) {
     <hr class="mbs4 pbs4 border-bs1 border-solid mi-auto" />
 
     <aside class="mi-auto leading4 mbe6">
-      <h1 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h1>
+      <h2 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h2>
       <p class="text1 mbe4">Learning new things can be fun — but also challenging. The Enhance Cookbook is here to show you around the kitchen and help you get your hands dirty.</p>
 
       <a class="linkButton pi2 pb0 font-semibold no-underline" href="/cookbook/">
diff --git a/app/elements/cookbook/header.mjs b/app/elements/cookbook/header.mjs
index d23fd58..5deb5b2 100644
--- a/app/elements/cookbook/header.mjs
+++ b/app/elements/cookbook/header.mjs
@@ -7,8 +7,14 @@ export default function CookbookHeader ({ html }) {
         padding-block: var(--space-6);
       }
 
+      @media (prefers-color-scheme: dark) {
+        :host {
+          background: linear-gradient(to bottom, var(--dark-purple), var(--denim));
+        }
+      }
+
       h1 {
-        color: var(--dark-purple);
+        color: var(--purple-princess);
       }
 
       figure {
diff --git a/app/elements/cookbook/recipe-card.mjs b/app/elements/cookbook/recipe-card.mjs
index 0516cc4..8a6d8d8 100644
--- a/app/elements/cookbook/recipe-card.mjs
+++ b/app/elements/cookbook/recipe-card.mjs
@@ -9,6 +9,7 @@ export default function Recipe ({ html, state }) {
         border: 1px solid var(--gray-200);
         border-radius: 0.25em;
         box-shadow: 0 2px 8px hsla(0deg 0% 0% / 0.1);
+        color: var(--rift);
         transition: background-color 0.15s linear;
       }
 
diff --git a/app/pages/cookbook/$$.mjs b/app/pages/cookbook/$$.mjs
index e3603a5..3e59c5f 100644
--- a/app/pages/cookbook/$$.mjs
+++ b/app/pages/cookbook/$$.mjs
@@ -4,6 +4,16 @@ export default function CookbookPage ({ html, state }) {
   const { title, html: recipeHtml } = recipe
 
   return html`
+    <style scope="global">
+      /* Colors */
+      body {
+        background-color: var(--white-denim);
+        color: var(--rift-white);
+      }
+      a {
+        color: var(--purple-princess);
+      }
+    </style>
     <site-header active="/cookbook"></site-header>
     <site-container>
       <cookbook-article>
diff --git a/app/pages/cookbook/index.html b/app/pages/cookbook/index.html
index e5411b2..b75cd7f 100644
--- a/app/pages/cookbook/index.html
+++ b/app/pages/cookbook/index.html
@@ -1,3 +1,11 @@
+<style scope="global">
+  /* Colors */
+  body {
+    background-color: var(--white-denim);
+    color: var(--rift-white);
+  }
+</style>
+
 <site-header active="/cookbook"></site-header>
 <cookbook-header></cookbook-header>