ham-fisted svg effort

src/app.css

@@ -3,11 +3,12 @@
 @tailwind utilities;
 
 :root {
-    --background: #F8FAF9;   /* Sage/Light/2 */
+    --background: #F8FAF9;    /* Sage/Light/2 */
     --callout: #ECEFED;       /* Sage/Light/4 */ 
     --stroke: #D7DCDA;        /* Sage/Light/7 */
     --text-shout: #164430;    /* Green/Dark/6 */
     --text-murmur: #113123;   /* Green/Dark/4 */
+    --icon-dark: #236E4A;     /* Green/Dark/8 */
 }
 
 body {
@@ -47,6 +48,10 @@ footer {
     background-color: var(--callout);
 }
 
+.svg-dark-stroke {
+    stroke: var(--icon-dark);
+}
+
 
 @media (min-width: 1024px) {
     .t-row:not(:last-child) {

src/svg/moon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 6C9 10.9706 13.0294 15 18 15C18.9093 15 19.787 14.8655 20.6144 14.6147C19.4943 18.3103 16.0613 20.9999 12 20.9999C7.02944 20.9999 3 16.9707 3 12.0001C3 7.93883 5.69007 4.50583 9.38561 3.38574C9.13484 4.21311 9 5.09074 9 6Z" stroke="textColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/partials/header.handlebars

@@ -1,3 +1,8 @@
-<div class="p-10 lg:px-[60px]">
+<div class="p-10 lg:px-[60px] flex justify-between">
     <h2 class="text-xl"><a href="/">{{{siteName}}}</a></h2>
+    <button>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 6C9 10.9706 13.0294 15 18 15C18.9093 15 19.787 14.8655 20.6144 14.6147C19.4943 18.3103 16.0613 20.9999 12 20.9999C7.02944 20.9999 3 16.9707 3 12.0001C3 7.93883 5.69007 4.50583 9.38561 3.38574C9.13484 4.21311 9 5.09074 9 6Z" class="svg-dark-stroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </button>
 </div>