From d037c99c549b07e04c71025e0a5d3450c6e9992f Mon Sep 17 00:00:00 2001
From: Bryant Kelley <bryant@bryantkelley.com>
Date: Mon, 4 Aug 2025 09:11:44 -0700
Subject: [PATCH 1/2] Enable dark mode and update some dark mode styles
 including meta theme colors and html background.

---
 src/app/globals.css              | 14 ++++++++++++--
 src/app/layout.tsx               | 11 +++++++++--
 src/app/stats/page.tsx           |  2 +-
 src/components/ChatBox.tsx       |  2 +-
 src/components/ConfigContext.tsx |  2 +-
 src/components/Header.tsx        |  2 +-
 src/components/Modal.tsx         |  2 +-
 src/components/RefreshButton.tsx |  3 +--
 8 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5eec4e2..f8c99c5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+/* @custom-variant dark (&:where(.dark, .dark *)); */
 
 @theme inline {
   --color-background: var(--background);
@@ -121,6 +121,16 @@
   }
 }
 
+html {
+  background-color: var(--color-neutral-200);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: var(--color-neutral-800);
+  }
+}
+
 .custom-node-marker {
   width: 16px;
   height: 16px;
@@ -173,4 +183,4 @@
   font-weight: 500;
   box-shadow: 0 1px 2px rgba(0,0,0,0.07);
   z-index: 1;
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c2675f2..d0a6443 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "../components/Header";
@@ -19,6 +19,13 @@ export const metadata: Metadata = {
   description: "A real-time map, chat client, and packet analysis tool for mesh networks using MeshCore and Meshtastic.",
 };
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "oklch(92.2% 0 0)" }, // neutral-200
+    { media: "(prefers-color-scheme: dark)", color: "oklch(26.9% 0 0)" }, //neutral-800
+  ],
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -33,7 +40,7 @@ export default function RootLayout({
         <div className="flex flex-col min-h-screen w-full">
           <ConfigProvider>
             <Header />
-            <main className="flex-1 flex flex-col w-full">{children}</main>
+            <main className="flex-1 flex flex-col w-full bg-neutral-200 dark:bg-neutral-800">{children}</main>
           </ConfigProvider>
         </div>
       </body>
diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx
index f388b06..a5c7e7b 100644
--- a/src/app/stats/page.tsx
+++ b/src/app/stats/page.tsx
@@ -29,7 +29,7 @@ export default function StatsPage() {
   }, []);
 
   return (
-    <div className="max-w-2xl mx-auto py-8 px-4">
+    <div className="max-w-2xl w-full mx-auto my-4 py-2 px-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-neutral-900 rounded-lg shadow-lg">
       <h1 className="text-2xl font-bold mb-6">MeshCore Network Stats</h1>
       {loading ? (
         <div>Loading...</div>
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index f06a80c..ff9853c 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -177,7 +177,7 @@ export default function ChatBox({ showAllMessagesTab = false, className = "", st
           )}
           {!startExpanded && (
             <button
-              className="p-1 rounded hover:bg-neutral-200 dark:hover:bg-neutral-800"
+              className="p-1 rounded text-gray-800 dark:text-gray-100 hover:bg-neutral-100 dark:hover:bg-neutral-800"
               onClick={() => setMinimized((m) => !m)}
               aria-label={minimized ? "Maximize MeshCore Chat" : "Minimize MeshCore Chat"}
             >
diff --git a/src/components/ConfigContext.tsx b/src/components/ConfigContext.tsx
index 04c30d1..4bba6d4 100644
--- a/src/components/ConfigContext.tsx
+++ b/src/components/ConfigContext.tsx
@@ -131,7 +131,7 @@ function ConfigPopover({ config, setConfig, onClose, anchorRef, onOpenKeyModal }
   return (
     <div
       ref={popoverRef}
-      className="z-[2000] bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-6 min-w-[320px] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)] overflow-auto border border-gray-200 dark:border-neutral-700 fixed top-16 right-4 flex flex-col"
+      className="z-[2000] text-neutral-800 dark:text-neutral-200 bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-6 min-w-[320px] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)] overflow-auto border border-gray-200 dark:border-neutral-700 fixed top-16 right-4 flex flex-col"
       style={{ boxSizing: 'border-box' }}
     >
       <button
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c4651ec..14bbe62 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -16,7 +16,7 @@ export default function Header({ configButtonRef }: HeaderProps) {
 
   return (
     <>
-      <header className="w-full flex items-center justify-between px-6 py-3 bg-white dark:bg-neutral-900 shadow z-20">
+      <header className="w-full flex items-center justify-between px-6 py-3 text-gray-800 dark:text-gray-100 bg-white dark:bg-neutral-900 shadow z-20">
         <nav className="flex gap-6 items-center">
           <Link href="/" className="font-bold text-lg">{getAppName()}</Link>
           <Link href="/messages">Messages</Link>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 2d635fa..33286cb 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -45,7 +45,7 @@ export default function Modal({ isOpen, onClose, title, children, maxWidth = "50
     <div className="fixed inset-0 z-[3000] flex items-center justify-center bg-black/40">
       <div 
         ref={modalRef}
-        className="bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-6 min-w-[350px] max-h-[60vh] overflow-auto border border-gray-200 dark:border-neutral-700 relative"
+        className="text-neutral-800 dark:text-neutral-200 bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-6 min-w-[350px] max-h-[60vh] overflow-auto border border-gray-200 dark:border-neutral-700 relative"
         style={{ maxWidth }}
       >
         <button
diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx
index 9570b45..6b9cb6d 100644
--- a/src/components/RefreshButton.tsx
+++ b/src/components/RefreshButton.tsx
@@ -27,8 +27,6 @@ export default function RefreshButton({
         onClick={onClick}
         disabled={loading || disabled}
         style={{
-          background: "#fff",
-          color: "#2563eb",
           border: "none",
           borderRadius: "50%",
           width: size,
@@ -43,6 +41,7 @@ export default function RefreshButton({
           fontSize: iconSize,
           padding: 0,
         }}
+        className="text-blue-600 dark:text-white bg-white dark:bg-blue-600"
         aria-label={ariaLabel}
         title={title}
       >

From 3bdd925a01a7e020789dda1ef08c19c2b2b5a1a3 Mon Sep 17 00:00:00 2001
From: Bryant Kelley <bryant@bryantkelley.com>
Date: Mon, 4 Aug 2025 09:57:29 -0700
Subject: [PATCH 2/2] Remove custom theme required for old override

---
 src/app/globals.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f8c99c5..9ef44fb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-/* @custom-variant dark (&:where(.dark, .dark *)); */
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);