From ffcb5c66be5f0f4a47d7ff6221066d288933e787 Mon Sep 17 00:00:00 2001
From: Alexander Lyon <arlyon@me.com>
Date: Fri, 7 Jun 2024 12:27:54 +0100
Subject: [PATCH] add theme toggle to footer

---
 site/app/page.tsx          | 4 ++--
 site/components/footer.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/site/app/page.tsx b/site/app/page.tsx
index 0c7fedb..eb4c1f2 100644
--- a/site/app/page.tsx
+++ b/site/app/page.tsx
@@ -87,7 +87,7 @@ export default function HomePage() {
             <span className="inline-block">Home Automation</span>{" "}
             <span className="inline-block">
               That{" "}
-              <span className="bg-gradient-to-b from-green-950 to-green-500 inline-block text-transparent bg-clip-text">
+              <span className="bg-gradient-to-b to-green-800 from-green-500 dark:from-green-900 dark:to-green-500 inline-block text-transparent bg-clip-text">
                 Scales
               </span>
             </span>
@@ -158,7 +158,7 @@ export default function HomePage() {
 
         <div />
         <div />
-        <div className="flex items-center justify-center pattern-diagonal-lines pattern-green-300 pattern-bg-green-50 dark:pattern-bg-black pattern-size-2 pattern-opacity-100">
+        <div className="flex items-center justify-center pattern-diagonal-lines pattern-green-300 dark:pattern-green-800 pattern-bg-green-50 dark:pattern-bg-black pattern-size-2 pattern-opacity-100">
           <div className="main-grid grid gap-[1px] sm:grid-cols-2 xl:grid-cols-4 bg-border outline outline-1 outline-border dark:outline-muted dark:bg-muted">
             {[
               {
diff --git a/site/components/footer.tsx b/site/components/footer.tsx
index 68a0283..4691a23 100644
--- a/site/components/footer.tsx
+++ b/site/components/footer.tsx
@@ -5,6 +5,7 @@
  */
 import { Logo } from "@/app/page";
 import Link from "next/link";
+import { ThemeToggle } from "./theme-toggle";
 
 export function Footer() {
   return (
@@ -50,7 +51,7 @@ export function Footer() {
             </li>
           </ul>
         </div>
-        <div className="lg:order-3">
+        <div className="lg:order-3 flex flex-col items-start gap-4">
           <p className="text-muted-foreground">
             Made by{" "}
             <Link
@@ -61,6 +62,7 @@ export function Footer() {
               @arlyon
             </Link>
           </p>
+          <ThemeToggle />
         </div>
         <div>
           <h4 className="font-semibold mb-2">Community</h4>