Merge pull request #5 from bryantkelley/feat/dark-mode

Enable Dark Mode with Some Overall Style Changes

src/app/globals.css

@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -121,6 +119,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 +181,4 @@
   font-weight: 500;
   box-shadow: 0 1px 2px rgba(0,0,0,0.07);
   z-index: 1;
-}
+}

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>

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>

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"}
             >

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

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>

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

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}
       >