From 7a2d80d9db0a84aa59b06c49012f84ab4a359e8b Mon Sep 17 00:00:00 2001
From: Foster Irwin <foster@jfirwin.com>
Date: Tue, 20 Dec 2022 22:26:17 -0700
Subject: [PATCH 1/3] fixed dark/light mode font readability

---
 src/pages/2.0/index.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/2.0/index.tsx b/src/pages/2.0/index.tsx
index 4b2432d6..c615a232 100644
--- a/src/pages/2.0/index.tsx
+++ b/src/pages/2.0/index.tsx
@@ -43,7 +43,7 @@ const TwoPointZero = (): JSX.Element => {
   ];
   return (
     <Layout title="Meshtastic 2.0" description="Meshtastic 2.0 Landing Page">
-      <div className="bg-white">
+      <div>
         <main>
           {/* Hero section */}
           <div className="overflow-hidden pt-8 sm:pt-12 lg:relative lg:py-24">
@@ -73,23 +73,23 @@ const TwoPointZero = (): JSX.Element => {
                     </a>
                   </div>
                   <div className="mt-6 sm:max-w-xl">
-                    <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+                    <h1 className="text-4xl font-bold tracking-tight --ifm-heading-color sm:text-5xl">
                       Meshtastic 2.0 🎉🎉🎉
                     </h1>
-                    <p className="mt-6 text-xl text-gray-500">
+                    <p className="mt-6 text-xl --ifm-font-color-base">
                       After 9 months in the making, we present to you the next
                       milestone for the Meshtastic project.
                     </p>
                   </div>
                   <div className="mt-12 sm:w-full sm:max-w-lg">
-                    <p className="mt-6 mb-4 text-xl text-gray-500">
+                    <p className="mt-6 mb-4 text-xl --ifm-font-color-base">
                       As a part of the launch event, we are running a number of
                       giveaways, so jump in and win some prizes.
                     </p>
                     <div className="flex gap-2">
                       <a
                         href="#start"
-                        className="flex w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 hover:text-black hover:no-underline focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
+                        className="flex w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 font-medium text-white shadow hover:bg-rose-600 hover:text-black hover:no-underline focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
                       >
                         <span className="m-auto">Find Out More</span>
                       </a>
@@ -258,12 +258,12 @@ const TwoPointZero = (): JSX.Element => {
               >
                 {/* Content area */}
                 <div className="pt-12 sm:pt-16 lg:pt-20">
-                  <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                  <h2 className="text-3xl font-bold tracking-tight --ifm-heading-color sm:text-4xl">
                     A brief overview of all the changes and improvements
                   </h2>
-                  <div className="mt-6 space-y-6 text-gray-500">
+                  <div className="mt-6 space-y-6 --ifm-font-color-base">
                     <h2>Monumental stuff!</h2>
-                    <p className="text-base leading-7">
+                    <p className="leading-7 --ifm-font-color-base">
                       <li>
                         Completely new LoRA band plan with faster messaging
                       </li>
@@ -293,7 +293,7 @@ const TwoPointZero = (): JSX.Element => {
                       </li>
                     </p>
                     <h2>Nerd stuff!</h2>
-                    <p className="text-base leading-7">
+                    <p className="leading-7 --ifm-font-color-base">
                       <li>New filesystem for ESP32 (LittleFS)</li>
                       <li>
                         Upgraded Arduino framework for both NRF52 and ESP32
@@ -322,10 +322,10 @@ const TwoPointZero = (): JSX.Element => {
                         key={stat.label}
                         className="border-t-2 border-gray-100 pt-6"
                       >
-                        <dt className="text-base font-medium text-gray-500">
+                        <dt className="font-medium --ifm-font-color-base">
                           {stat.label}
                         </dt>
-                        <dd className="text-3xl font-bold tracking-tight text-gray-900">
+                        <dd className="text-3xl font-bold tracking-tight --ifm-heading-color">
                           {stat.value}
                         </dd>
                       </div>
@@ -341,10 +341,10 @@ const TwoPointZero = (): JSX.Element => {
             <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
               <div className="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
                 <div>
-                  <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                  <h2 className="text-3xl font-bold tracking-tight --ifm-heading-color sm:text-4xl">
                     All made possible by the amazing companies that support us.
                   </h2>
-                  <p className="mt-6 max-w-3xl text-lg leading-7 text-gray-500">
+                  <p className="mt-6 max-w-3xl text-lg leading-7 --ifm-font-color-base">
                     Running a project of this scale is no easy feat, without the
                     generosity of many of our vendors and providers, none of
                     this would be possible.

From 522f7aa564c90d5af07d2624bc6e23962804823c Mon Sep 17 00:00:00 2001
From: Foster Irwin <foster@jfirwin.com>
Date: Tue, 20 Dec 2022 22:37:31 -0700
Subject: [PATCH 2/3] made logo responsive to color changes

---
 src/css/custom.css      | 4 ++++
 src/pages/2.0/index.tsx | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index fb24cc70..2758c589 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -118,6 +118,10 @@ html[data-theme="dark"] .header-github-link:before {
   margin: 20px 36px;
 }
 
+.responsive-color-svg {
+  fill: var(--ifm-heading-color)
+}
+
 .theme-doc-markdown {
   max-width: none;
 }
diff --git a/src/pages/2.0/index.tsx b/src/pages/2.0/index.tsx
index c615a232..0aa54cca 100644
--- a/src/pages/2.0/index.tsx
+++ b/src/pages/2.0/index.tsx
@@ -51,10 +51,11 @@ const TwoPointZero = (): JSX.Element => {
               <div>
                 <div>
                   <img
-                    className="h-11 w-auto"
+                    className="h-11 w-auto responsive-color-svg"
                     it
                     src="/design/logo/svg/Mesh_Logo_Black.svg"
-                    alt="Your Company"
+
+                    alt="Meshtastic Logo"
                   />
                 </div>
                 <div className="mt-20">

From afffac51c315f58fb26eb8c47e99ca654ac6afa1 Mon Sep 17 00:00:00 2001
From: Foster Irwin <foster@jfirwin.com>
Date: Wed, 21 Dec 2022 05:22:02 -0700
Subject: [PATCH 3/3] fixed logo light/dark appearance

---
 src/css/custom.css      |  4 ----
 src/pages/2.0/index.tsx | 25 ++++++++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 2758c589..fb24cc70 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -118,10 +118,6 @@ html[data-theme="dark"] .header-github-link:before {
   margin: 20px 36px;
 }
 
-.responsive-color-svg {
-  fill: var(--ifm-heading-color)
-}
-
 .theme-doc-markdown {
   max-width: none;
 }
diff --git a/src/pages/2.0/index.tsx b/src/pages/2.0/index.tsx
index 0aa54cca..53dd55ac 100644
--- a/src/pages/2.0/index.tsx
+++ b/src/pages/2.0/index.tsx
@@ -7,6 +7,8 @@ import { FiTwitter } from 'react-icons/fi';
 import { ChevronRightIcon } from '@heroicons/react/20/solid';
 import FlipClockCountdown from '@leenguyen/react-flip-clock-countdown';
 import Layout from '@theme/Layout';
+import { Dark, Light } from '/src/components/ColorMode';
+
 
 const TwoPointZero = (): JSX.Element => {
   const stats = [
@@ -50,13 +52,22 @@ const TwoPointZero = (): JSX.Element => {
             <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-24 lg:px-8">
               <div>
                 <div>
-                  <img
-                    className="h-11 w-auto responsive-color-svg"
-                    it
-                    src="/design/logo/svg/Mesh_Logo_Black.svg"
-
-                    alt="Meshtastic Logo"
-                  />
+                  <Dark>
+                    <img
+                      className="h-11 w-auto"
+                      it
+                      src="/design/logo/svg/Mesh_Logo_White.svg"
+                      alt="Meshtastic Logo"
+                    />
+                  </Dark>
+                  <Light>
+                    <img
+                        className="h-11 w-auto"
+                        it
+                        src="/design/logo/svg/Mesh_Logo_Black.svg"
+                        alt="Meshtastic Logo"
+                      />
+                  </Light>
                 </div>
                 <div className="mt-20">
                   <div>