From c6b1dd7376ee33b4a9c49fce4fdd64a5f633b557 Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Tue, 25 Jul 2023 19:44:52 +0900
Subject: [PATCH 1/6] Implemented dark mode for connect page

---
 src/components/Sidebar/Sidebar.tsx            |  2 +-
 src/components/connection/ConnectTab.tsx      |  2 +-
 src/components/connection/ConnectionInput.tsx |  2 +-
 .../connection/ConnectionSwitch.tsx           |  4 +-
 .../connection/SerialConnectPane.tsx          | 14 ++---
 .../connection/SerialPortOption.tsx           | 57 +++++++------------
 src/components/connection/TcpConnectPane.tsx  | 14 +++--
 src/components/pages/ConnectPage.tsx          | 20 ++++---
 8 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index a29cb65a..f1965cfa 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -34,7 +34,7 @@ const Sidebar = () => {
 
   return (
     <div
-      className={`shrink-0 sidebar-width-transition flex flex-col h-screen box-content shadow-lg border-r border-gray-100 overflow-x-hidden ${
+      className={`shrink-0 sidebar-width-transition flex flex-col h-screen box-content bg-red-50 shadow-lg border-r border-gray-100 overflow-x-hidden ${
         isSidebarExpanded ? "w-[300px] text-gray-500" : "w-20 text-white"
       }`}
     >
diff --git a/src/components/connection/ConnectTab.tsx b/src/components/connection/ConnectTab.tsx
index b14d75a8..e31ef75f 100644
--- a/src/components/connection/ConnectTab.tsx
+++ b/src/components/connection/ConnectTab.tsx
@@ -18,7 +18,7 @@ const ConnectTab = ({
 }: IConnectTabProps) => {
   return (
     <Tabs.Trigger
-      className={`flex flex-row align-middle gap-2 px-8 py-4 border-gray-500 text-gray-500 data-[state=active]:border-b-2 data-[state=active]:text-gray-700 ${className}`}
+      className={`flex flex-row align-middle gap-2 px-8 py-4 border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400 data-[state=active]:border-b-2 data-[state=active]:text-gray-700 dark:data-[state=active]:text-gray-300 ${className}`}
       value={value}
     >
       <p>{label}</p>
diff --git a/src/components/connection/ConnectionInput.tsx b/src/components/connection/ConnectionInput.tsx
index ac0cd110..b1df4875 100644
--- a/src/components/connection/ConnectionInput.tsx
+++ b/src/components/connection/ConnectionInput.tsx
@@ -13,7 +13,7 @@ const ConnectionInput = forwardRef<HTMLInputElement, IConnectionInputProps>(
     return (
       <input
         {...props}
-        className={`flex-1 border border-gray-400 rounded-lg px-5 py-4 text-gray-700 placeholder:text-gray-400 h-full bg-transparent focus:outline-none disabled:cursor-wait ${
+        className={`flex-1 border border-gray-400 dark:border-gray-400 rounded-lg px-5 py-4 text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-500 h-full bg-transparent focus:outline-none disabled:cursor-wait ${
           props.className ?? ""
         }`}
         ref={ref}
diff --git a/src/components/connection/ConnectionSwitch.tsx b/src/components/connection/ConnectionSwitch.tsx
index f1c4bace..9554c98c 100644
--- a/src/components/connection/ConnectionSwitch.tsx
+++ b/src/components/connection/ConnectionSwitch.tsx
@@ -9,11 +9,11 @@ export interface IConnectionSwitchProps {
 const ConnectionSwitch = ({ checked, setChecked }: IConnectionSwitchProps) => {
   return (
     <Switch.Root
-      className="w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-700 transition-colors"
+      className="w-10 h-6 bg-gray-300 dark:bg-gray-600 rounded-full relative data-[state=checked]:bg-gray-700 dark:data-[state=checked]:bg-gray-500 transition-colors"
       checked={checked}
       onCheckedChange={setChecked}
     >
-      <Switch.Thumb className="block w-5 h-5 bg-white rounded-full translate-x-[2px] data-[state=checked]:translate-x-[18px] transition-transform" />
+      <Switch.Thumb className="block w-5 h-5 bg-white dark:bg-gray-200 rounded-full translate-x-[2px] data-[state=checked]:translate-x-[18px] transition-transform" />
     </Switch.Root>
   );
 };
diff --git a/src/components/connection/SerialConnectPane.tsx b/src/components/connection/SerialConnectPane.tsx
index 5eb0b38d..b933baba 100644
--- a/src/components/connection/SerialConnectPane.tsx
+++ b/src/components/connection/SerialConnectPane.tsx
@@ -58,7 +58,7 @@ const SerialConnectPane = ({
               />
             ))
           ) : (
-            <p className="text-base leading-6 font-normal text-gray-500 pl-40 pr-40 text-center">
+            <p className="text-base leading-6 font-normal text-gray-500 dark:text-gray-400 pl-40 pr-40 text-center">
               {t("connectPage.tabs.serial.empty")}
             </p>
           )}
@@ -70,18 +70,18 @@ const SerialConnectPane = ({
         className="flex flex-row justify-center align-middle mx-auto gap-4 mt-5"
         onClick={() => refreshPorts()}
       >
-        <ArrowPathIcon className="text-gray-400 w-6 h-6 hover:cursor-pointer" />
-        <p className="my-auto text-gray-500">
+        <ArrowPathIcon className="text-gray-400 dark:text-gray-300 w-6 h-6 hover:cursor-pointer" />
+        <p className="my-auto text-gray-500 dark:text-gray-400">
           {t("connectPage.tabs.serial.refresh")}
         </p>
       </button>
 
       <Collapsible.Trigger asChild>
         <button className="flex flex-row align-middle justify-between w-full mt-5 mb-2">
-          <p className="my-auto text-base font-normal text-gray-500">
+          <p className="my-auto text-base font-normal text-gray-500 dark:text-gray-400">
             {t("connectPage.tabs.serial.advancedTitle")}
           </p>
-          <span className="my-auto text-gray-500">
+          <span className="my-auto text-gray-500 dark:text-gray-400">
             {isAdvancedOpen ? <Cross2Icon /> : <RowSpacingIcon />}
           </span>
         </button>
@@ -97,14 +97,14 @@ const SerialConnectPane = ({
           />
 
           <div className="flex flex-row justify-between">
-            <p className="text-base font-normal text-gray-500">
+            <p className="text-base font-normal text-gray-500 dark:text-gray-400">
               {t("connectPage.tabs.serial.dtrTitle")}
             </p>
             <ConnectionSwitch checked={dtr} setChecked={setDtr} />
           </div>
 
           <div className="flex flex-row justify-between">
-            <p className="text-base font-normal text-gray-500">
+            <p className="text-base font-normal text-gray-500 dark:text-gray-400">
               {t("connectPage.tabs.serial.rtsTitle")}
             </p>
             <ConnectionSwitch checked={rts} setChecked={setRts} />
diff --git a/src/components/connection/SerialPortOption.tsx b/src/components/connection/SerialPortOption.tsx
index 6b380b08..1c58f8c8 100644
--- a/src/components/connection/SerialPortOption.tsx
+++ b/src/components/connection/SerialPortOption.tsx
@@ -21,33 +21,12 @@ const SerialPortOption = ({
   onClick,
 }: ISerialPortOptions) => {
   switch (connectionState.status) {
-    case "IDLE":
-      return (
-        <button
-          className="hover:cursor-pointer"
-          type="button"
-          onClick={() => onClick(name)}
-        >
-          <div className="flex justify-center select-none">
-            <div className="flex flex-1 justify-left border rounded-lg border-gray-400 pl-4 pt-5 pb-5 pr-4 hover:bg-gray-50 hover:border-gray-500 hover:shadow-lg">
-              <Usb className="text-gray-500 w-6 h-6" />
-              <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 mt-0.5">
-                <Trans
-                  i18nKey="connectPage.tabs.serial.portOption"
-                  values={{ portName: name }}
-                />
-              </h1>
-            </div>
-          </div>
-        </button>
-      );
-
     case "PENDING":
       return (
         <div className="flex justify-center select-none">
-          <div className="flex flex-1 justify-left border rounded-lg bg-gray-50 border-gray-500 pl-4 pt-5 pb-5 pr-4 w-6/12 hover:cursor-wait">
-            <EllipsisHorizontalCircleIcon className="text-gray-500 w-6 h-6" />
-            <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 mt-0.5">
+          <div className="flex flex-1 justify-left border rounded-lg border-gray-500 dark:border-gray-200 pl-4 pt-5 pb-5 pr-4 w-6/12 hover:cursor-wait bg-white dark:bg-gray-800">
+            <EllipsisHorizontalCircleIcon className="text-gray-500 dark:text-gray-400 w-6 h-6" />
+            <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 dark:text-gray-400 mt-0.5">
               <Trans
                 i18nKey="connectPage.tabs.serial.portOption"
                 values={{ portName: name }}
@@ -60,9 +39,9 @@ const SerialPortOption = ({
     case "SUCCESSFUL":
       return (
         <div className="flex justify-center select-none">
-          <div className="flex flex-1 justify-left border rounded-lg border-green-500 bg-green-50 pl-4 pt-5 pb-5 pr-4 w-6/12 ">
-            <CheckCircleIcon className="text-green-600 w-6 h-6" />
-            <h1 className="ml-4 text-base leading-6 font-normal text-green-600 mt-0.5">
+          <div className="flex flex-1 justify-left border rounded-lg border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-900 pl-4 pt-5 pb-5 pr-4 w-6/12">
+            <CheckCircleIcon className="text-green-600 dark:text-green-500 w-6 h-6" />
+            <h1 className="ml-4 text-base leading-6 font-normal text-green-600 dark:text-green-500 mt-0.5">
               <Trans
                 i18nKey="connectPage.tabs.serial.portOption"
                 values={{ portName: name }}
@@ -75,30 +54,34 @@ const SerialPortOption = ({
     case "FAILED":
       return (
         <div className="flex justify-center select-none">
-          <div className="flex-1 border rounded-lg border-red-500 bg-red-50 pl-4 pt-5 pb-5 pr-4 w-6/12 ">
+          <div className="flex-1 border rounded-lg border-red-500 dark:border-red-400 bg-red-50 dark:bg-red-900 pl-4 pt-5 pb-5 pr-4 w-6/12">
             <div className="flex flex-row">
-              <XCircleIcon className="text-red-600 w-6 h-6" />
-              <h1 className="ml-4 text-base leading-6 font-normal text-red-600">
+              <XCircleIcon className="text-red-600 dark:text-red-400 w-6 h-6" />
+              <h1 className="ml-4 text-base leading-6 font-normal text-red-600 dark:text-red-400">
                 <Trans
                   i18nKey="connectPage.tabs.serial.portOption"
                   values={{ portName: name }}
                 />
               </h1>
             </div>
-            <h2 className="pl-6 pr-2 ml-4 text-sm leading-5 font-light text-red-600 mt-0.5">
+            <h2 className="pl-6 pr-2 ml-4 text-sm leading-5 font-light text-red-600 dark:text-red-500 mt-0.5">
               <i>{connectionState.message}</i>
             </h2>
           </div>
         </div>
       );
 
-    default:
+    default: // "IDLE"
       return (
-        <div>
+        <button
+          className="hover:cursor-pointer"
+          type="button"
+          onClick={() => onClick(name)}
+        >
           <div className="flex justify-center select-none">
-            <div className="flex justify-left border rounded-lg border-gray-400 pl-4 pt-3 pb-3 pr-4 w-6/12 hover:bg-gray-50 hover:border-gray-500 hover:shadow-lg hover:cursor-pointer">
-              <XCircleIcon className="text-gray-500 w-6 h-6" />
-              <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 mt-0.5">
+            <div className="flex flex-1 justify-left border rounded-lg border-gray-400 dark:border-gray-200 pl-4 pt-5 pb-5 pr-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-500 dark:hover:border-gray-50 hover:shadow-lg">
+              <Usb className="text-gray-500 dark:text-gray-400 w-6 h-6" />
+              <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 dark:text-gray-400 mt-0.5">
                 <Trans
                   i18nKey="connectPage.tabs.serial.portOption"
                   values={{ portName: name }}
@@ -106,7 +89,7 @@ const SerialPortOption = ({
               </h1>
             </div>
           </div>
-        </div>
+        </button>
       );
   }
 };
diff --git a/src/components/connection/TcpConnectPane.tsx b/src/components/connection/TcpConnectPane.tsx
index d3cefd57..b5c16737 100644
--- a/src/components/connection/TcpConnectPane.tsx
+++ b/src/components/connection/TcpConnectPane.tsx
@@ -47,28 +47,30 @@ const TcpConnectPane = ({
       />
 
       <button
-        className="flex flex-row flex-1 justify-center gap-3 border rounded-lg border-gray-400 mx-auto px-5 py-4 hover:bg-gray-50 hover:border-gray-500 hover:shadow-lg disabled:cursor-wait"
+        className="flex flex-row flex-1 justify-center gap-3 border rounded-lg border-gray-400 dark:border-gray-500 mx-auto px-5 py-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-500 dark:hover:border-gray-400 hover:shadow-lg disabled:cursor-wait"
         disabled={activeSocketState.status === "PENDING"}
         type="submit"
       >
         {activeSocketState.status === "PENDING" ? (
           <>
-            <EllipsisHorizontalCircleIcon className="w-6 h-6 text-gray-500" />
-            <p className="text-gray-700">
+            <EllipsisHorizontalCircleIcon className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+            <p className="text-gray-700 dark:text-gray-400">
               {t("connectPage.tabs.tcp.connecting")}
             </p>
           </>
         ) : (
           <>
-            <LinkIcon className="w-6 h-6 text-gray-500" />
-            <p className="text-gray-700">{t("connectPage.tabs.tcp.connect")}</p>
+            <LinkIcon className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+            <p className="text-gray-700 dark:text-gray-400">
+              {t("connectPage.tabs.tcp.connect")}
+            </p>
           </>
         )}
       </button>
 
       {activeSocketState.status === "FAILED" && (
         <div>
-          <p className="pl-6 pr-2 ml-4 text-sm leading-5 font-light text-red-600 my-1">
+          <p className="pl-6 pr-2 ml-4 text-sm leading-5 font-light text-red-600 dark:text-red-400 my-1">
             {activeSocketState.message}
           </p>
         </div>
diff --git a/src/components/pages/ConnectPage.tsx b/src/components/pages/ConnectPage.tsx
index ed8a316d..77bde5fa 100644
--- a/src/components/pages/ConnectPage.tsx
+++ b/src/components/pages/ConnectPage.tsx
@@ -5,7 +5,10 @@ import { open } from "@tauri-apps/api/shell";
 import * as Tabs from "@radix-ui/react-tabs";
 
 import Hero_Image from "@app/assets/onboard_hero_image.jpg";
-import Meshtastic_Logo from "@app/assets/Mesh_Logo_Black.png";
+
+// TODO export these as svg
+import Meshtastic_Logo_Dark from "@app/assets/Mesh_Logo_Black.png";
+import Meshtastic_Logo_Light from "@app/assets/Mesh_Logo_White.svg";
 
 import ConnectTab from "@components/connection/ConnectTab";
 import TcpConnectPane from "@components/connection/TcpConnectPane";
@@ -176,27 +179,28 @@ const ConnectPage = ({ unmountSelf }: IOnboardPageProps) => {
 
   return (
     <div
-      className="landing-screen-opacity-transition absolute flex flex-row h-screen w-screen z-40 bg-white"
+      className="landing-screen-opacity-transition absolute flex flex-row h-screen w-screen z-40 bg-white dark:bg-gray-800"
       style={{ opacity: isScreenActive ? 1 : 0 }}
     >
-      <div className="flex flex-col flex-1 py-24 overflow-auto no-gutter">
+      <div className="flex flex-col flex-1 py-24 overflow-auto no-gutter hide-scrollbar">
         <div className="flex justify-center">
           <div className="h-1/8">
             <img
-              className="w-11/12 h-11/12 text-gray-800"
-              src={Meshtastic_Logo}
+              className="w-11/12 h-11/12"
+              // TODO switch to light mode or get fill working
+              src={Meshtastic_Logo_Dark}
             ></img>
           </div>
         </div>
 
         <div className="flex justify-center mt-10">
-          <h1 className="text-4xl font-semibold leading-10 text-gray-800">
+          <h1 className="text-4xl font-semibold leading-10 text-gray-800 dark:text-gray-300">
             {t("connectPage.title")}
           </h1>
         </div>
 
         <div className="flex justify-center mt-5">
-          <h2 className="text-base leading-6 font-normal text-gray-500 pl-40 pr-40 text-center">
+          <h2 className="text-base leading-6 font-normal text-gray-500 dark:text-gray-400 pl-40 pr-40 text-center">
             <Trans
               i18nKey={"connectPage.supportedRadioBlurb"}
               components={{
@@ -206,7 +210,7 @@ const ConnectPage = ({ unmountSelf }: IOnboardPageProps) => {
                     onClick={() =>
                       void open("https://meshtastic.org/docs/introduction")
                     }
-                    className="hover:cursor-pointer hover:text-gray-600 underline"
+                    className="hover:cursor-pointer hover:text-gray-600 dark:hover:text-gray-300 underline transition-colors"
                   />
                 ),
               }}

From 60bd23d77bd68295d662033a8107e0dba9149c88 Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Wed, 26 Jul 2023 13:27:33 -0700
Subject: [PATCH 2/6] Styled remainder of application for dark mode

---
 src/assets/Mesh_Logo_Dark.svg                 |  12 ++
 src/assets/Mesh_Logo_Light.svg                |  12 ++
 src/assets/Mesh_Logo_White.svg                |  12 --
 src/components/DefaultTooltip.tsx             |   4 +-
 src/components/Map/CreateWaypointDialog.tsx   |  62 +++++----
 src/components/Map/MapContextOption.tsx       |   6 +-
 src/components/Map/MapOverlayButton.tsx       |   4 +-
 src/components/Map/MapSelectedNodeMenu.tsx    |  25 ++--
 src/components/Map/MapView.css                |  79 ++++++++++--
 src/components/Map/MapView.tsx                |   6 +-
 .../Messaging/ChannelListElement.tsx          |  49 +++----
 src/components/Messaging/MessagingInput.tsx   |  17 ++-
 .../Messaging/TextMessageBubble.tsx           |  17 ++-
 src/components/NavigationBacktrace.tsx        |   6 +-
 src/components/NodeSearch/NodeSearchDock.tsx  |   4 +-
 src/components/NodeSearch/NodeSearchInput.tsx |   2 +-
 src/components/Sidebar/Sidebar.tsx            |   8 +-
 src/components/Sidebar/SidebarIcon.tsx        |  16 ++-
 src/components/Sidebar/SidebarLogo.tsx        |  18 ++-
 src/components/Sidebar/SidebarTab.tsx         |   2 +-
 src/components/Table/TableBody.tsx            |   9 +-
 src/components/Table/TableLayout.tsx          |   4 +-
 src/components/Waypoints/WaypointMenu.tsx     |  25 ++--
 src/components/config/ConfigInput.tsx         |   2 +-
 src/components/config/ConfigLabel.tsx         |   4 +-
 src/components/config/ConfigLayout.tsx        |  10 +-
 src/components/config/ConfigOption.tsx        |  18 ++-
 src/components/config/ConfigSelect.tsx        |  35 +++++
 src/components/config/ConfigTitlebar.tsx      |  14 +-
 .../config/channel/ChannelConfigDetail.tsx    |  28 ++--
 .../config/device/BluetoothConfigPage.tsx     |  29 ++---
 .../config/device/DeviceConfigPage.tsx        |  78 ++++++-----
 .../config/device/DisplayConfigPage.tsx       | 122 ++++++++----------
 .../config/device/LoRaConfigPage.tsx          |  95 +++++++-------
 .../config/device/NetworkConfigPage.tsx       |  23 ++--
 .../config/module/AudioConfigPage.tsx         |  30 +++--
 .../config/module/CannedMessageConfigPage.tsx |  41 +++---
 .../config/module/SerialModuleConfigPage.tsx  |  88 ++++++-------
 .../connection/SerialPortOption.tsx           |   4 +-
 src/components/connection/TcpConnectPane.tsx  |   4 +-
 src/components/pages/ApplicationStatePage.tsx |  14 +-
 src/components/pages/ConnectPage.tsx          |  14 +-
 src/components/pages/MessagingPage.tsx        |   4 +-
 src/index.css                                 |  16 +++
 src/utils/hooks.ts                            |  32 +++++
 src/utils/nodes.ts                            |  32 ++---
 46 files changed, 663 insertions(+), 473 deletions(-)
 create mode 100644 src/assets/Mesh_Logo_Dark.svg
 create mode 100644 src/assets/Mesh_Logo_Light.svg
 delete mode 100644 src/assets/Mesh_Logo_White.svg
 create mode 100644 src/components/config/ConfigSelect.tsx

diff --git a/src/assets/Mesh_Logo_Dark.svg b/src/assets/Mesh_Logo_Dark.svg
new file mode 100644
index 00000000..d13c103d
--- /dev/null
+++ b/src/assets/Mesh_Logo_Dark.svg
@@ -0,0 +1,12 @@
+<svg width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1702_6954)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1289 3.52946L12.0744 15.3414L10.3755 14.1829L19.2778 1.1277C19.469 0.847096 19.7867 0.679129 20.1263 0.678711C20.466 0.678432 20.7838 0.845843 20.9756 1.12616L29.8985 14.1609L28.2016 15.3225L20.1289 3.52946Z" fill="#1F2937"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.22799 15.329L12.6367 1.53155L10.9377 0.373047L1.52905 14.1704L3.22799 15.329Z" fill="#1F2937"/>
+<path d="M3.7144 0.657227H2.5144V2.15723H1.0144V3.35723H2.5144V4.85723H3.7144V3.35723H5.2144V2.15723H3.7144V0.657227Z" fill="#1F2937" stroke="#1F2937"/>
+</g>
+<defs>
+<clipPath id="clip0_1702_6954">
+<rect width="30" height="15.7143" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/Mesh_Logo_Light.svg b/src/assets/Mesh_Logo_Light.svg
new file mode 100644
index 00000000..ce55b364
--- /dev/null
+++ b/src/assets/Mesh_Logo_Light.svg
@@ -0,0 +1,12 @@
+<svg width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1702_6947)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1289 3.52946L12.0744 15.3414L10.3755 14.1829L19.2778 1.1277C19.469 0.847096 19.7867 0.679129 20.1263 0.678711C20.466 0.678432 20.7838 0.845843 20.9756 1.12616L29.8985 14.1609L28.2016 15.3225L20.1289 3.52946Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.22799 15.329L12.6367 1.53155L10.9377 0.373047L1.52905 14.1704L3.22799 15.329Z" fill="white"/>
+<path d="M3.7144 0.657227H2.5144V2.15723H1.0144V3.35723H2.5144V4.85723H3.7144V3.35723H5.2144V2.15723H3.7144V0.657227Z" fill="white" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1702_6947">
+<rect width="30" height="15.7143" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/Mesh_Logo_White.svg b/src/assets/Mesh_Logo_White.svg
deleted file mode 100644
index 090a53c3..00000000
--- a/src/assets/Mesh_Logo_White.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="42" height="22" viewBox="0 0 42 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_181_782)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.1805 4.94087L16.9043 21.4776L14.5258 19.8557L26.9889 1.57841C27.2567 1.18557 27.7014 0.950415 28.1768 0.94983C28.6524 0.949439 29.0974 1.18381 29.3659 1.57626L41.8579 19.8249L39.4824 21.4511L28.1805 4.94087Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.51913 21.4605L17.6913 2.14413L15.3128 0.522217L2.14062 19.8386L4.51913 21.4605Z" fill="white"/>
-<path d="M5.20004 0.919998H3.52004V3.02H1.42004V4.7H3.52004V6.8H5.20004V4.7H7.30004V3.02H5.20004V0.919998Z" fill="white" stroke="white"/>
-</g>
-<defs>
-<clipPath id="clip0_181_782">
-<rect width="42" height="22" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/components/DefaultTooltip.tsx b/src/components/DefaultTooltip.tsx
index 251078b4..4529d357 100644
--- a/src/components/DefaultTooltip.tsx
+++ b/src/components/DefaultTooltip.tsx
@@ -26,14 +26,14 @@ const DefaultTooltip = ({
         <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className="z-50 px-3 py-1.5 shadow-lg rounded-lg bg-white border border-gray-200 text-xs font-normal text-gray-400"
+            className="z-50 px-3 py-1.5 shadow-lg rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-500 text-xs font-normal text-gray-400 dark:text-gray-300"
             sideOffset={5}
             avoidCollisions
             collisionPadding={20}
             side={rest.side ?? "top"}
           >
             {text}
-            <Tooltip.Arrow className="fill-gray-200" />
+            <Tooltip.Arrow className="fill-gray-200 dark:fill-gray-600" />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
diff --git a/src/components/Map/CreateWaypointDialog.tsx b/src/components/Map/CreateWaypointDialog.tsx
index 1f5c0bc8..c8bb6bde 100644
--- a/src/components/Map/CreateWaypointDialog.tsx
+++ b/src/components/Map/CreateWaypointDialog.tsx
@@ -42,6 +42,7 @@ import {
 import { selectMapState } from "@features/map/mapSelectors";
 
 import { dateTimeLocalFormatString } from "@utils/form";
+import { useIsDarkMode } from "@utils/hooks";
 import { MapIDs, formatLocation, getFlyToConfig } from "@utils/map";
 import { getChannelName } from "@utils/messaging";
 
@@ -73,6 +74,8 @@ const CreateWaypointDialog = ({
 }: ICreateWaypointDialogProps) => {
   const { t } = useTranslation();
 
+  const { isDarkMode } = useIsDarkMode();
+
   const dispatch = useDispatch();
   const primaryDeviceKey = useSelector(selectPrimaryDeviceKey());
   const deviceChannels = useSelector(selectDeviceChannels());
@@ -238,8 +241,8 @@ const CreateWaypointDialog = ({
   return (
     <Dialog.Portal>
       {/* Tracking https://github.com/radix-ui/primitives/issues/1159 */}
-      <div className="fixed inset-0 bg-gray-900/[0.4]" />
-      <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col bg-white default-overlay">
+      <div className="fixed inset-0 bg-gray-900/[0.4] dark:bg-gray-600/[0.7]" />
+      <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col bg-white dark:bg-gray-800 default-overlay">
         <div className="flex flex-row max-h-[80vh]">
           <div className="relative w-[600px]">
             <Map
@@ -296,7 +299,10 @@ const CreateWaypointDialog = ({
                 tooltipText={t("map.waypoints.centerWaypointTooltip")}
                 tooltipProps={{ side: "left" }}
               >
-                <Locate strokeWidth={1} className="text-gray-600" />
+                <Locate
+                  strokeWidth={1}
+                  className="text-gray-600 dark:text-gray-400"
+                />
               </MapOverlayButton>
             </Map>
             <div className=" w-[480px] h-full" />
@@ -304,7 +310,7 @@ const CreateWaypointDialog = ({
 
           <div className="flex flex-col gap-4 px-9 py-7 w-96">
             <div className="flex flex-col">
-              <Dialog.Title className="text-base font-medium text-gray-700">
+              <Dialog.Title className="text-base font-medium text-gray-700 dark:text-gray-300">
                 {existingWaypoint
                   ? t("map.waypoints.editWaypointTitle")
                   : t("map.waypoints.createWaypointTitle")}
@@ -322,7 +328,9 @@ const CreateWaypointDialog = ({
                 <label className="flex flex-col flex-1">
                   <p
                     className={`flex flex-row justify-between ${
-                      name.isValid ? "text-gray-600" : "text-red-500"
+                      name.isValid
+                        ? "text-gray-600 dark:text-gray-400"
+                        : "text-red-500 dark:text-red-400"
                     }`}
                   >
                     <span>{t("map.waypoints.nameLabel")}</span>
@@ -332,7 +340,7 @@ const CreateWaypointDialog = ({
                   </p>
 
                   <ConnectionInput
-                    className="w-full invalid:border-red-400 invalid:text-red-400"
+                    className="w-full invalid:border-red-400 dark:invalid:border-red-400 invalid:text-red-400 dark:invalid:text-red-400"
                     placeholder={t("map.waypoints.namePlaceholder")}
                     value={name.value}
                     onChange={handleNameChange}
@@ -345,7 +353,9 @@ const CreateWaypointDialog = ({
                 <label className="flex flex-col flex-1">
                   <p
                     className={`flex flex-row justify-between ${
-                      desc.isValid ? "text-gray-600" : "text-red-500"
+                      desc.isValid
+                        ? "text-gray-600 dark:text-gray-400"
+                        : "text-red-500 dark:text-red-400"
                     }`}
                   >
                     <span>{t("map.waypoints.descriptionLabel")}</span>
@@ -355,7 +365,7 @@ const CreateWaypointDialog = ({
                   </p>
 
                   <ConnectionInput
-                    className="w-full invalid:border-red-400 invalid:text-red-400"
+                    className="w-full invalid:border-red-400 dark:invalid:border-red-400 invalid:text-red-400 dark:invalid:text-red-400"
                     placeholder={t("map.waypoints.descriptionPlaceholder")}
                     value={desc.value}
                     onChange={handleDescChange}
@@ -365,7 +375,7 @@ const CreateWaypointDialog = ({
               </fieldset>
 
               <fieldset className="">
-                <label className="text-gray-600">
+                <label className="text-gray-600 dark:text-gray-400">
                   <p>{t("map.waypoints.blockWaypointEditing")}</p>
                   <ConnectionSwitch
                     checked={waypointLocked}
@@ -375,7 +385,7 @@ const CreateWaypointDialog = ({
               </fieldset>
 
               <fieldset className="">
-                <label className="text-gray-600">
+                <label className="text-gray-600 dark:text-gray-400">
                   <p>{t("map.waypoints.waypointExpires")}</p>
                   <ConnectionSwitch
                     checked={waypointExpires}
@@ -386,11 +396,11 @@ const CreateWaypointDialog = ({
 
               <fieldset className="">
                 <label className="">
-                  <p className="text-gray-600">
+                  <p className="text-gray-600 dark:text-gray-400">
                     {t("map.waypoints.expireTime")}
                   </p>
                   <ConnectionInput
-                    className="w-full disabled:cursor-not-allowed disabled:text-gray-300"
+                    className="w-full disabled:cursor-not-allowed disabled:text-gray-300 dark:disabled:text-gray-700"
                     type="datetime-local"
                     disabled={!waypointExpires}
                     min={moment().format(dateTimeLocalFormatString)}
@@ -402,7 +412,7 @@ const CreateWaypointDialog = ({
 
               <fieldset className="">
                 <label className="">
-                  <p className="text-gray-600">
+                  <p className="text-gray-600 dark:text-gray-400">
                     {t("map.waypoints.deviceChannel")}
                   </p>
                   <Select.Root
@@ -410,7 +420,7 @@ const CreateWaypointDialog = ({
                     onValueChange={(e) => setChannelNum(parseInt(e))}
                   >
                     <Select.Trigger
-                      className="flex-1 border px-5 py-4 border-gray-400 rounded-lg text-gray-700 h-full bg-transparent focus:outline-none disabled:cursor-wait inline-flex items-center justify-center"
+                      className="flex-1 border px-5 py-4 border-gray-400 rounded-lg text-gray-700 dark:text-gray-400 h-full bg-transparent focus:outline-none disabled:cursor-wait inline-flex items-center justify-center"
                       aria-label={t("map.waypoints.channelAriaLabel")}
                       asChild
                     >
@@ -431,13 +441,13 @@ const CreateWaypointDialog = ({
                           <ChevronUpIcon />
                         </Select.ScrollUpButton>
 
-                        <Select.Viewport className="bg-white p-2 rounded-lg shadow-lg">
+                        <Select.Viewport className="bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg">
                           <Select.Group>
                             {deviceChannels.map((c) => (
                               <Select.Item
                                 key={c.config.index}
                                 value={`${c.config.index}`}
-                                className={`relative flex items-center select-none h-6 pl-7 pr-5 py-4 text-gray-700 cursor-pointer radix-disabled:cursor-default radix-disabled:opacity-50`}
+                                className={`relative flex items-center select-none h-6 pl-7 pr-5 py-4 text-gray-700 dark:text-gray-300 cursor-pointer radix-disabled:cursor-default radix-disabled:opacity-50 dark:radix-disabled:opacity-100 dark:radix-disabled:text-gray-700`}
                                 disabled={c.config.role === 0} // DISABLED role
                               >
                                 <Select.ItemText>
@@ -461,7 +471,9 @@ const CreateWaypointDialog = ({
               </fieldset>
 
               <div className="mb-2">
-                <p className="text-gray-600">{t("map.waypoints.pinEmoji")}</p>
+                <p className="text-gray-600 dark:text-gray-400">
+                  {t("map.waypoints.pinEmoji")}
+                </p>
                 <Popover.Root
                   open={isEmojiPickerOpen}
                   onOpenChange={(e) => setIsEmojiPickerOpen(e)}
@@ -470,14 +482,14 @@ const CreateWaypointDialog = ({
                     <Popover.Trigger asChild>
                       <div className="relative mr-auto">
                         <button
-                          className="relative w-9 h-9 flex align-middle justify-center border border-gray-200 rounded-full"
+                          className="relative w-9 h-9 flex align-middle justify-center border border-gray-200 dark:border-gray-500 rounded-full"
                           aria-label="Select emoji"
                         >
                           <p className="m-auto text-xl">
                             {emoji ?? (
                               <Plus
                                 strokeWidth={1.5}
-                                className="text-gray-400 p-0.5"
+                                className="text-gray-400 dark:text-gray-500 p-0.5"
                               />
                             )}
                           </p>
@@ -492,7 +504,7 @@ const CreateWaypointDialog = ({
                               setEmoji(null);
                             }}
                           >
-                            <Cross2Icon className="w-4 h-4 p-0.5 bg-white rounded-full shadow-md border border-gray-200 text-gray-400" />
+                            <Cross2Icon className="w-4 h-4 p-0.5 bg-white dark:bg-gray-800 rounded-full shadow-md border border-gray-200 dark:border-gray-500 text-gray-400 dark:text-gray-400" />
                           </button>
                         )}
                       </div>
@@ -509,10 +521,10 @@ const CreateWaypointDialog = ({
                             setEmoji(e.native);
                             setIsEmojiPickerOpen(false);
                           }}
-                          theme="light"
+                          theme={isDarkMode ? "dark" : "light"}
                           previewPosition="none"
                         />
-                        <Popover.Arrow className="fill-gray-200" />
+                        <Popover.Arrow className="fill-gray-200 dark:fill-gray-800" />
                       </div>
                     </Popover.Content>
                   </Popover.Portal>
@@ -525,7 +537,7 @@ const CreateWaypointDialog = ({
                 type="button"
                 onClick={handleSubmit}
                 disabled={!(name.isValid && desc.isValid)}
-                className=" text-gray-600 hover:text-gray-700 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors"
+                className=" text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 disabled:text-gray-300 dark:disabled:text-gray-700 disabled:cursor-not-allowed transition-colors"
               >
                 {existingWaypoint
                   ? t("map.waypoints.saveChanges")
@@ -533,7 +545,7 @@ const CreateWaypointDialog = ({
               </button>
 
               <Dialog.Close asChild>
-                <button className="text-red-400 hover:text-red-500 transition-colors">
+                <button className="text-red-400 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300 transition-colors">
                   {t("map.waypoints.cancel")}
                 </button>
               </Dialog.Close>
@@ -543,7 +555,7 @@ const CreateWaypointDialog = ({
 
         <Dialog.Close asChild>
           <button
-            className="fixed top-7 right-9 w-6 h-6 text-gray-500 hover:text-gray-600 transition-colors"
+            className="fixed top-7 right-9 w-6 h-6 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
             aria-label={t("map.waypoints.closeAriaLabel")}
           >
             <X strokeWidth={1.5} />
diff --git a/src/components/Map/MapContextOption.tsx b/src/components/Map/MapContextOption.tsx
index b6a5810b..ef9f5b3d 100644
--- a/src/components/Map/MapContextOption.tsx
+++ b/src/components/Map/MapContextOption.tsx
@@ -11,14 +11,16 @@ const MapContextOption = forwardRef<HTMLButtonElement, IMapContextOptionProps>(
   function MapContextOption({ text, onClick, renderIcon }, ref) {
     return (
       <button
-        className="px-1 pr-2 py-1 bg-white hover:bg-gray-100 rounded-lg"
+        className="px-1 pr-2 py-1 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
         type="button"
         onClick={onClick}
         ref={ref}
       >
         <div className="flex flex-row gap-2 align-middle">
           {renderIcon("my-auto w-5 h-5 text-gray-400")}
-          <p className="text-sm font-normal text-gray-500">{text}</p>
+          <p className="text-sm font-normal text-gray-500 dark:text-gray-400">
+            {text}
+          </p>
         </div>
       </button>
     );
diff --git a/src/components/Map/MapOverlayButton.tsx b/src/components/Map/MapOverlayButton.tsx
index fa607d00..f8e359aa 100644
--- a/src/components/Map/MapOverlayButton.tsx
+++ b/src/components/Map/MapOverlayButton.tsx
@@ -31,7 +31,9 @@ const MapOverlayButton = ({
         type="button"
         onClick={handleClick}
         className={`p-2 default-overlay ${
-          selected ? "!bg-gray-700 !border-gray-500" : ""
+          selected
+            ? "!bg-gray-700 dark:!bg-gray-300 !border-gray-500 dark:!border-gray-400"
+            : "!bg-white dark:!bg-gray-800"
         } ${className}`}
       >
         {children}
diff --git a/src/components/Map/MapSelectedNodeMenu.tsx b/src/components/Map/MapSelectedNodeMenu.tsx
index f5a8b3a5..ac79782d 100644
--- a/src/components/Map/MapSelectedNodeMenu.tsx
+++ b/src/components/Map/MapSelectedNodeMenu.tsx
@@ -82,17 +82,20 @@ const MapSelectedNodeMenu = () => {
   };
 
   return (
-    <div className="absolute top-24 right-9 bg-white p-5 pl-4 rounded-lg drop-shadow-lg w-80">
+    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-5 pl-4 rounded-lg drop-shadow-lg w-80">
       <div className="flex justify-between">
-        <h1 className="text-gray-600 text-2xl leading-5 font-semibold">
+        <h1 className="text-gray-600 dark:text-gray-400 text-2xl leading-5 font-semibold">
           {deviceName}
         </h1>
         <button type="button" onClick={clearActiveNode}>
-          <X strokeWidth={1.5} className="w-5 h-5 text-gray-500" />
+          <X
+            strokeWidth={1.5}
+            className="w-5 h-5 text-gray-500 dark:text-gray-400"
+          />
         </button>
       </div>
 
-      <p className="text-gray-500 text-sm leading-5 font-normal pt-1">
+      <p className="text-gray-500 dark:text-gray-400 text-sm leading-5 font-normal pt-1">
         <Trans
           i18nKey="map.panes.nodeInfo.lastHeard"
           components={{
@@ -108,17 +111,17 @@ const MapSelectedNodeMenu = () => {
         />
       </p>
 
-      <h2 className="text-gray-500 text-base leading-6 font-semibold pt-2 pb-1">
+      <h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-semibold pt-2 pb-1">
         {t("map.panes.nodeInfo.generalInfo")}
       </h2>
       <div className="flex flex-col">
         <div className="flex justify-between pb-1">
           <div className="flex justify-start">
             <MapPin
-              className="w-5 h-5 text-gray-500 mt-0.5"
+              className="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5"
               strokeWidth={1.5}
             />
-            <h2 className="text-gray-500 text-base leading-6 font-normal pl-2">
+            <h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-normal pl-2">
               {!deviceLatCoord || !deviceLngCoord ? (
                 <span>{t("map.panes.nodeInfo.unknownValue")}</span>
               ) : (
@@ -142,7 +145,7 @@ const MapSelectedNodeMenu = () => {
           >
             <Copy
               strokeWidth={1.5}
-              className="w-5 h-5 float-right text-gray-500"
+              className="w-5 h-5 float-right text-gray-500 dark:text-gray-400"
             />
           </button>
         </div>
@@ -151,9 +154,9 @@ const MapSelectedNodeMenu = () => {
           <div className="flex justify-start">
             <BatteryLevelIcon
               batteryLevel={batteryLevel}
-              className="w-5 h-5 text-gray-500 mt-0.5"
+              className="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5"
             />
-            <h2 className="text-gray-500 text-base leading-6 font-normal pl-2">
+            <h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-normal pl-2">
               {getBatteryStateString(batteryLevel)}
             </h2>
           </div>
@@ -165,7 +168,7 @@ const MapSelectedNodeMenu = () => {
           >
             <Copy
               strokeWidth={1.5}
-              className="w-5 h-5 float-right text-gray-500"
+              className="w-5 h-5 float-right text-gray-500 dark:text-gray-400"
             />
           </button>
         </div>
diff --git a/src/components/Map/MapView.css b/src/components/Map/MapView.css
index c47f0c1c..1a079705 100644
--- a/src/components/Map/MapView.css
+++ b/src/components/Map/MapView.css
@@ -1,3 +1,23 @@
+/* .maplibregl-ctrl-icon, .mapboxgl-ctrl-icon { */
+.maplibregl-ctrl,
+.maplibregl-ctrl-group,
+.mapboxgl-ctrl,
+.mapboxgl-ctrl-group {
+  @apply bg-white;
+  @apply text-gray-700;
+
+  /* CSS can't nest attributes */
+  @media (prefers-color-scheme: dark) {
+    /* @apply bg-gray-800; */
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
+
+    /* @apply text-gray-300; */
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity)) !important;
+  }
+}
+
 /* Bottom Right Control Group */
 .maplibregl-ctrl-bottom-right {
   display: flex;
@@ -13,8 +33,8 @@
 
 /* Zoom Buttons Container */
 .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-group {
-  @apply shadow-lg !important;
-  @apply border-gray-100 !important;
+  @apply !shadow-lg;
+  @apply !border-gray-100;
 }
 
 /* Attribution */
@@ -25,29 +45,29 @@
 
 /* Attribution text */
 .maplibregl-ctrl-attrib-inner {
-  @apply font-sans !important;
-  @apply text-xs !important;
-  @apply font-normal !important;
-  @apply text-gray-700 !important;
+  @apply !font-sans;
+  @apply !text-xs;
+  @apply !font-normal;
+  /* @apply !text-gray-700 !important; */
 
-  @apply py-0.5 !important;
+  @apply !py-0.5;
 }
 
 /* Attribution text */
 .maplibregl-ctrl-attrib-inner > * {
-  @apply font-sans !important;
-  @apply text-xs !important;
-  @apply font-normal !important;
-  @apply text-gray-700 !important;
+  @apply !font-sans;
+  @apply !text-xs;
+  @apply !font-normal;
+  /* @apply text-gray-700 !important; */
 }
 
 /* Distance Scale */
 .maplibregl-ctrl-scale {
   background-color: transparent !important;
   text-align: center;
-  @apply border-gray-500 !important;
-  @apply text-gray-500 !important;
-  @apply text-xs !important;
+  @apply !border-gray-500;
+  /* @apply text-gray-500 !important; */
+  @apply !text-xs;
 }
 
 /* Zoom Control Buttons and Compass */
@@ -62,16 +82,47 @@
 .maplibregl-ctrl-zoom-out,
 .maplibregl-ctrl-compass {
   @apply border-t-gray-100 !important;
+
+  /* Note: nesting of attributes not supported */
+  @media (prefers-color-scheme: dark) {
+    /* @apply !border-t-gray-600; */
+    --tw-border-opacity: 1 !important;
+    border-top-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
+  }
 }
 
 /* Zoom In Control Icon */
 .maplibregl-ctrl-zoom-in > .maplibregl-ctrl-icon {
+  /* TODO this image will need to be updated with a dark mode version */
   padding: 8px;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4.5V19.5M19.5 12L4.5 12' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+
+  @media (prefers-color-scheme: dark) {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4.5V19.5M19.5 12L4.5 12' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+  }
 }
 
 /* Zoom Out Control Icon */
 .maplibregl-ctrl-zoom-out > .maplibregl-ctrl-icon {
+  /* TODO this image will need to be updated with a dark mode version */
   padding: 8px;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+
+  @media (prefers-color-scheme: dark) {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+  }
+}
+
+/* Attribution text */
+.maplibregl-ctrl-attrib-inner,
+.mapboxgl-ctrl-attrib-inner,
+.maplibregl-ctrl-attrib-inner > a,
+.mapboxgl-ctrl-attrib-inner > a {
+  @apply !text-gray-700;
+
+  @media (prefers-color-scheme: dark) {
+    /* @apply !text-gray-300; */
+    --tw-text-opacity: 1 !important;
+    color: rgb(209 213 219 / var(--tw-text-opacity)) !important;
+  }
 }
diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx
index 7dfc2525..efdd3a7c 100644
--- a/src/components/Map/MapView.tsx
+++ b/src/components/Map/MapView.tsx
@@ -261,10 +261,10 @@ export const MapView = () => {
               <div className="translate-y-1/2">
                 {/* https://www.kindacode.com/article/how-to-create-triangles-with-tailwind-css-4-examples/ */}
                 <div className="w-full">
-                  <div className="mx-auto w-0 h-0 border-l-[6px] border-l-transparent border-b-[8px] border-b-gray-200 border-r-[6px] border-r-transparent" />
+                  <div className="mx-auto w-0 h-0 border-l-[6px] border-l-transparent border-b-[8px]  border-b-gray-200 dark:border-b-gray-800 border-r-[6px] border-r-transparent" />
                 </div>
 
-                <div className="flex flex-col gap-2 default-overlay p-2">
+                <div className="flex flex-col gap-2 default-overlay p-2 bg-white dark:bg-gray-800">
                   <Dialog.Trigger asChild>
                     <MapContextOption
                       text={t("map.contextMenu.dropWaypoint")}
@@ -275,7 +275,7 @@ export const MapView = () => {
                   </Dialog.Trigger>
 
                   <Separator.Root
-                    className="h-px w-full bg-gray-200"
+                    className="h-px w-full bg-gray-200 dark:bg-gray-500"
                     decorative
                     orientation="horizontal"
                   />
diff --git a/src/components/Messaging/ChannelListElement.tsx b/src/components/Messaging/ChannelListElement.tsx
index 6ea5a2ca..363aaa32 100644
--- a/src/components/Messaging/ChannelListElement.tsx
+++ b/src/components/Messaging/ChannelListElement.tsx
@@ -37,28 +37,30 @@ const ChannelListElement = ({
         className="py-2 relative"
       >
         <div
-          className="absolute bg-gray-700 rounded-lg h-full -z-10"
+          className="absolute bg-gray-700 dark:bg-gray-200 rounded-lg h-full"
           style={{ width: "calc(100% + 30px)", top: "0px", left: "-15px" }}
         />
-        <div className="flex flex-row justify-between items-baseline">
-          <p className="flex flex-row gap-2 items-baseline text-gray-50">
-            <span className="text-base font-semibold">
-              {getChannelName(channel)}
-            </span>
-            <span className="text-sm font-normal">
-              <Trans
-                i18nKey="messaging.channelNumber"
-                values={{ channelNum: channel.config.index }}
-              />
-            </span>
-          </p>
-          <p className="text-xs font-normal text-gray-100">
-            {timeLastMessageReceived}
+        <div className="relative z-10">
+          <div className="flex flex-row justify-between items-baseline">
+            <p className="flex flex-row gap-2 items-baseline text-gray-50 dark:text-gray-700">
+              <span className="text-base font-semibold">
+                {getChannelName(channel)}
+              </span>
+              <span className="text-sm font-normal">
+                <Trans
+                  i18nKey="messaging.channelNumber"
+                  values={{ channelNum: channel.config.index }}
+                />
+              </span>
+            </p>
+            <p className="text-xs font-normal text-gray-100 dark:text-gray-400">
+              {timeLastMessageReceived}
+            </p>
+          </div>
+          <p className="min-w-full text-left whitespace-nowrap overflow-hidden overflow-ellipsis text-base font-normal text-gray-400 dark:text-gray-500">
+            {getLastChannelMessageDisplayText(lastMessage)}
           </p>
         </div>
-        <p className="min-w-full text-left whitespace-nowrap overflow-hidden overflow-ellipsis text-base font-normal text-gray-400">
-          {getLastChannelMessageDisplayText(lastMessage)}
-        </p>
       </button>
     );
   }
@@ -70,19 +72,22 @@ const ChannelListElement = ({
       className="py-2"
     >
       <div className="flex flex-row justify-between items-baseline">
-        <p className="flex flex-row gap-2 items-baseline text-gray-700">
+        <p className="flex flex-row gap-2 items-baseline text-gray-700 dark:text-gray-400">
           <span className="text-base font-semibold ">
             {getChannelName(channel)}
           </span>
           <span className="text-sm font-normal">
-            (ch {channel.config.index})
+            <Trans
+              i18nKey="messaging.channelNumber"
+              values={{ channelNum: channel.config.index }}
+            />
           </span>
         </p>
-        <p className="text-xs font-normal text-gray-400">
+        <p className="text-xs font-normal text-gray-400 dark:text-gray-500">
           {timeLastMessageReceived}
         </p>
       </div>
-      <p className="min-w-full text-left whitespace-nowrap overflow-hidden overflow-ellipsis text-base font-normal text-gray-500">
+      <p className="min-w-full text-left whitespace-nowrap overflow-hidden overflow-ellipsis text-base font-normal text-gray-500 dark:text-gray-500">
         {getLastChannelMessageDisplayText(lastMessage)}
       </p>
     </button>
diff --git a/src/components/Messaging/MessagingInput.tsx b/src/components/Messaging/MessagingInput.tsx
index 294d5889..38e0e10a 100644
--- a/src/components/Messaging/MessagingInput.tsx
+++ b/src/components/Messaging/MessagingInput.tsx
@@ -1,5 +1,6 @@
-import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import React, { FormEventHandler, useState } from "react";
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import DefaultTooltip from "@components/DefaultTooltip";
 
 export interface IMessagingInputProps {
   onSubmit: (message: string) => void;
@@ -23,19 +24,21 @@ const MessagingInput = ({
   return (
     <form
       onSubmit={handleSubmit}
-      className={`${className} flex flex-row bg-white rounded-lg gap-3 border h-12 border-gray-200`}
+      className={`${className} flex flex-row bg-white dark:bg-gray-800 rounded-lg gap-3 border h-12 border-gray-200 dark:border-gray-500`}
     >
       <input
         type="text"
         placeholder={placeholder}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
-        className="rounded-l-lg flex-1 pl-4 text-sm font-normal text-gray-700 placeholder:text-sm placeholder:font-normal placeholder:text-gray-300"
+        className="rounded-l-lg flex-1 pl-4 text-sm font-normal bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder:text-sm placeholder:font-normal placeholder:text-gray-300 dark:placeholder:text-gray-500"
       />
-      <div className="my-2 w-[1px] bg-gray-200" />
-      <button type="submit" className="py-2 pr-3">
-        <PaperAirplaneIcon className="w-6 h-6 text-gray-400" />
-      </button>
+      <div className="my-2 w-[1px] bg-gray-200 dark:bg-gray-500" />
+      <DefaultTooltip text="Send message to channel">
+        <button type="submit" className="py-2 pr-3">
+          <PaperAirplaneIcon className="w-6 h-6 text-gray-400 dark:text-gray-400" />
+        </button>
+      </DefaultTooltip>
     </form>
   );
 };
diff --git a/src/components/Messaging/TextMessageBubble.tsx b/src/components/Messaging/TextMessageBubble.tsx
index 477c96f1..1ade078e 100644
--- a/src/components/Messaging/TextMessageBubble.tsx
+++ b/src/components/Messaging/TextMessageBubble.tsx
@@ -74,10 +74,10 @@ const TextMessageBubble = ({
     return (
       <div className={`${className}`}>
         <p className="flex flex-row justify-end mb-1 gap-2 items-baseline">
-          <span className="text-xs font-semibold text-gray-400">
+          <span className="text-xs font-semibold text-gray-400 dark:text-gray-400">
             {formatMessageTime(packet.rxTime)}
           </span>
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">
             {usernameDisplayText}
           </span>
         </p>
@@ -85,10 +85,10 @@ const TextMessageBubble = ({
         <div
           className={`ml-auto ${
             type === "waypoint" ? "w-2/5" : "w-fit"
-          } max-w-[40%] rounded-l-lg rounded-br-lg border border-gray-200`}
+          } max-w-[40%] rounded-l-lg rounded-br-lg border border-gray-200 dark:border-gray-400`}
         >
           <p
-            className={`px-3 py-2 rounded-tl-lg bg-gray-700 text-sm font-normal text-gray-100 break-words border-b border-gray-400 ${
+            className={`px-3 py-2 rounded-tl-lg bg-gray-700 dark:bg-gray-300 text-sm font-normal text-gray-100 dark:text-gray-600 break-words border-b border-gray-400 dark:border-gray-600 ${
               message.payload.type !== "waypoint" ? "rounded-b-lg" : ""
             }`}
           >
@@ -127,7 +127,10 @@ const TextMessageBubble = ({
                   tooltipText="Show on map"
                   tooltipProps={{ side: "left" }}
                 >
-                  <MapIcon className="text-gray-400" strokeWidth={1.5} />
+                  <MapIcon
+                    className="text-gray-400 dark:text-gray-300"
+                    strokeWidth={1.5}
+                  />
                 </MapOverlayButton>
               </Map>
             </div>
@@ -136,7 +139,9 @@ const TextMessageBubble = ({
 
         <p
           className={`ml-auto mt-1 text-xs text-right ${
-            isError ? "font-semibold text-red-500" : "font-normal text-gray-500"
+            isError
+              ? "font-semibold text-red-500 dark:text-red-400"
+              : "font-normal text-gray-500 dark:text-gray-400"
           }`}
         >
           {text}
diff --git a/src/components/NavigationBacktrace.tsx b/src/components/NavigationBacktrace.tsx
index 49d43762..2963e46b 100644
--- a/src/components/NavigationBacktrace.tsx
+++ b/src/components/NavigationBacktrace.tsx
@@ -21,13 +21,13 @@ const NavigationBacktrace = ({
     <div className={`${className} flex flex-row gap-2`}>
       <DefaultTooltip text={t("general.goHome")}>
         <button type="button" onClick={() => navigateTo("/")}>
-          <HomeIcon className="my-auto w-5 h-5 text-gray-400" />
+          <HomeIcon className="my-auto w-5 h-5 text-gray-400 dark:text-gray-400" />
         </button>
       </DefaultTooltip>
       {levels.map((l) => (
         <div key={l} className="flex flex-row gap-2">
-          <ChevronRightIcon className="my-auto w-5 h-5 text-gray-600" />
-          <p className="my-auto text-sm leading-5 font-normal text-gray-500">
+          <ChevronRightIcon className="my-auto w-5 h-5 text-gray-600 dark:text-gray-500" />
+          <p className="my-auto text-sm leading-5 font-normal text-gray-500 dark:text-gray-400">
             {l}
           </p>
         </div>
diff --git a/src/components/NodeSearch/NodeSearchDock.tsx b/src/components/NodeSearch/NodeSearchDock.tsx
index 8684d99d..2b1df8f1 100644
--- a/src/components/NodeSearch/NodeSearchDock.tsx
+++ b/src/components/NodeSearch/NodeSearchDock.tsx
@@ -41,7 +41,7 @@ const _NodeSearchDock = ({
 }: _INodeSearchDockProps) => {
   if (!filteredNodes.length && !!device) {
     return (
-      <p className="text-sm font-normal text-gray-500">
+      <p className="text-sm font-normal text-gray-500 dark:text-gray-400">
         <Trans i18nKey="map.panes.search.noResults" values={{ query }} />
       </p>
     );
@@ -155,7 +155,7 @@ const NodeSearchDock = () => {
       >
         <button
           onClick={() => setNodeSearchDockExpanded(!searchDockExpanded)}
-          className="flex flex-row align-middle justify-center bg-white rounded-full mx-auto p-2 shadow-lg text-gray-700 border border-gray-200"
+          className="flex flex-row align-middle justify-center bg-white dark:bg-gray-800 rounded-full mx-auto p-2 shadow-lg text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700"
         >
           {searchDockExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
         </button>
diff --git a/src/components/NodeSearch/NodeSearchInput.tsx b/src/components/NodeSearch/NodeSearchInput.tsx
index be30f783..01d52e36 100644
--- a/src/components/NodeSearch/NodeSearchInput.tsx
+++ b/src/components/NodeSearch/NodeSearchInput.tsx
@@ -14,7 +14,7 @@ const NodeSearchInput = ({
   return (
     <div className="flex-grow">
       <input
-        className="w-full h-full px-4 py-3 default-overlay font-sans text-base font-normal text-gray-500 placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:text-gray-300"
+        className="w-full h-full px-4 py-3 default-overlay font-sans text-base font-normal text-gray-500 dark:text-gray-300 placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:text-gray-300"
         type="text"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f1965cfa..0c0a6999 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -34,8 +34,10 @@ const Sidebar = () => {
 
   return (
     <div
-      className={`shrink-0 sidebar-width-transition flex flex-col h-screen box-content bg-red-50 shadow-lg border-r border-gray-100 overflow-x-hidden ${
-        isSidebarExpanded ? "w-[300px] text-gray-500" : "w-20 text-white"
+      className={`shrink-0 sidebar-width-transition flex flex-col h-screen box-content bg-white dark:bg-gray-800 shadow-lg border-r border-gray-100 dark:border-gray-700 overflow-x-hidden ${
+        isSidebarExpanded
+          ? "w-[300px] text-gray-500 dark:text-gray-400"
+          : "w-20 text-white dark:text-gray-800"
       }`}
     >
       <SidebarLogo isSidebarExpanded={isSidebarExpanded} />
@@ -150,7 +152,7 @@ const Sidebar = () => {
       </div>
 
       <div className="flex flex-col mt-auto justify-between px-4 pt-4 pb-1">
-        <hr className="border-gray-100" />
+        <hr className="border-gray-100 dark:border-gray-700" />
 
         <SidebarIcon
           name={isSidebarExpanded ? t("sidebar.expand") : t("sidebar.collapse")}
diff --git a/src/components/Sidebar/SidebarIcon.tsx b/src/components/Sidebar/SidebarIcon.tsx
index 5331a897..9db5921a 100644
--- a/src/components/Sidebar/SidebarIcon.tsx
+++ b/src/components/Sidebar/SidebarIcon.tsx
@@ -25,12 +25,18 @@ const SidebarIcon = ({
         type="button"
         onClick={onClick}
         className={`sidebar-background-color-transition flex flex-row align-middle w-full rounded-lg
-        ${isActive ? "bg-gray-700" : "bg-white"} `}
+        ${
+          isActive
+            ? "bg-gray-700 dark:bg-gray-300"
+            : "bg-white dark:bg-gray-800"
+        } `}
       >
         <div className="flex flex-row w-full p-3">
           <div
             className={`w-6 h-6 ${
-              isActive ? "text-gray-200" : "text-gray-400"
+              isActive
+                ? "text-gray-200 dark:text-gray-700"
+                : "text-gray-400 dark:text-gray-400"
             }`}
           >
             {children}
@@ -38,7 +44,11 @@ const SidebarIcon = ({
 
           <p
             className={`sidebar-opacity-transition px-3 text-xs font-medium self-center whitespace-nowrap 
-            ${isActive ? "text-gray-100" : "text-gray-700"}
+            ${
+              isActive
+                ? "text-gray-100 dark:text-gray-700"
+                : "text-gray-700 dark:text-gray-300"
+            }
             `}
             style={isSidebarExpanded ? { opacity: 1 } : { opacity: 0 }}
           >
diff --git a/src/components/Sidebar/SidebarLogo.tsx b/src/components/Sidebar/SidebarLogo.tsx
index 74b50228..eb3dd45a 100644
--- a/src/components/Sidebar/SidebarLogo.tsx
+++ b/src/components/Sidebar/SidebarLogo.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import LogoWhiteSVG from "@app/assets/Mesh_Logo_White.svg";
+
+import MeshLogoLight from "@app/assets/Mesh_Logo_Light.svg";
+import MeshLogoDark from "@app/assets/Mesh_Logo_Dark.svg";
+
+import { useIsDarkMode } from "@utils/hooks";
 
 import "@components/Sidebar/Sidebar.css";
 
@@ -11,20 +15,22 @@ export interface IMeshLogoProps {
 const SidebarLogo = ({ isSidebarExpanded }: IMeshLogoProps) => {
   const { t } = useTranslation();
 
+  const { isDarkMode } = useIsDarkMode();
+
   return (
-    <div className="flex flex-row justify-start align-middle h-20 p-4 border-b border-gray-100">
+    <div className="flex flex-row justify-start align-middle h-20 p-4 border-b border-gray-100 dark:border-gray-700">
       <img
-        className="my-auto p-3 bg-gray-700 rounded-lg h-12 w-12"
-        src={LogoWhiteSVG}
+        className="my-auto p-3 bg-gray-700 dark:bg-gray-200 rounded-lg h-12 w-12"
+        src={isDarkMode ? MeshLogoDark : MeshLogoLight}
       />
       <div
         className="sidebar-opacity-transition my-auto pl-4 whitespace-nowrap"
         style={isSidebarExpanded ? { opacity: 1 } : { opacity: 0 }}
       >
-        <p className="text-gray-700 text-sm font-medium">
+        <p className="text-gray-700 dark:text-gray-300 text-sm font-medium">
           {t("general.meshtastic")}
         </p>
-        <p className="text-gray-400 text-xs font-normal">
+        <p className="text-gray-400 dark:text-gray-400 text-xs font-normal">
           {t("general.networkManagement")}
         </p>
       </div>
diff --git a/src/components/Sidebar/SidebarTab.tsx b/src/components/Sidebar/SidebarTab.tsx
index 9c3dc476..2c674fdb 100644
--- a/src/components/Sidebar/SidebarTab.tsx
+++ b/src/components/Sidebar/SidebarTab.tsx
@@ -17,7 +17,7 @@ const SidebarTab = ({
   return (
     <div>
       <p
-        className="sidebar-opacity-transition mb-2 text-[9px] text-gray-500 uppercase font-semibold"
+        className="sidebar-opacity-transition mb-2 text-[9px] text-gray-500 dark:text-gray-400 uppercase font-semibold"
         style={isSidebarExpanded ? { opacity: 1 } : { opacity: 0 }}
       >
         {title}
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index 80e62708..7f5a5a0b 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -24,7 +24,7 @@ const TableBody = <T,>({ title, data, columns }: ITableBodyProps<T>) => {
     <div>
       <div className="">
         <div className="flex flex-row justify-between">
-          <h1 className="text-4xl leading-10 font-semibold text-gray-700">
+          <h1 className="text-4xl leading-10 font-semibold text-gray-700 dark:text-gray-300">
             {title}
           </h1>
           {/* <input
@@ -37,12 +37,13 @@ const TableBody = <T,>({ title, data, columns }: ITableBodyProps<T>) => {
       <div>
         <table className="mt-9 w-full">
           {/* Header element */}
-          <thead className="text-gray-600 text-xs leading-4 font-semibold">
+          <thead className="text-gray-600 dark:text-gray-400 text-xs leading-4 font-semibold">
             {table.getHeaderGroups().map((headerGroup) => (
               // Row to contain header data
               <tr
                 key={headerGroup.id}
-                className="border-b-2 border-gray-200 border-solid"
+                // TODO how do we update the divider color of a table?
+                className="border-b-2 border-gray-200 dark:border-gray-500 border-solid"
               >
                 {headerGroup.headers.map((header) => (
                   // Mapping each header into the row
@@ -64,7 +65,7 @@ const TableBody = <T,>({ title, data, columns }: ITableBodyProps<T>) => {
                 {row.getVisibleCells().map((cell) => (
                   <td
                     key={cell.id}
-                    className="p-5 text-gray-500 text-sm leading-5 font-normal border-b"
+                    className="p-5 text-gray-500 dark:text-gray-400 text-sm leading-5 font-normal border-b border-gray-300 dark:border-gray-500"
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
diff --git a/src/components/Table/TableLayout.tsx b/src/components/Table/TableLayout.tsx
index 45fd7f8a..6c69b4d2 100644
--- a/src/components/Table/TableLayout.tsx
+++ b/src/components/Table/TableLayout.tsx
@@ -19,8 +19,8 @@ const TableLayout = <T,>({
   backtrace,
 }: ITableLayoutProps<T>) => {
   return (
-    <div className="flex flex-col w-full h-screen">
-      <div className="flex justify-center align-middle px-9 h-20 border-b border-gray-100">
+    <div className="flex flex-col w-full h-screen bg-white dark:bg-gray-800">
+      <div className="flex justify-center align-middle px-9 h-20 border-b border-gray-100 dark:border-gray-700">
         <NavigationBacktrace className="my-auto mr-auto" levels={backtrace} />
       </div>
 
diff --git a/src/components/Waypoints/WaypointMenu.tsx b/src/components/Waypoints/WaypointMenu.tsx
index cdc89bf6..d4d11595 100644
--- a/src/components/Waypoints/WaypointMenu.tsx
+++ b/src/components/Waypoints/WaypointMenu.tsx
@@ -65,24 +65,27 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
     activeWaypoint;
 
   return (
-    <div className="absolute top-24 right-9 bg-white p-6 rounded-lg drop-shadow-lg w-96">
+    <div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-6 rounded-lg drop-shadow-lg w-96">
       <button
         className="absolute top-6 right-6"
         type="button"
         onClick={() => dispatch(deviceSliceActions.setActiveWaypoint(null))}
       >
-        <X strokeWidth={1.5} className="w-5 h-5 text-gray-500" />
+        <X
+          strokeWidth={1.5}
+          className="w-5 h-5 text-gray-500 dark:text-gray-400"
+        />
       </button>
 
       <div className="flex flex-col gap-2">
         <div className="flex flex-row gap-2">
           {!!icon && <p className="text-2xl">{String.fromCodePoint(icon)}</p>}
-          <h1 className="mr-8 text-gray-600 leading-7 text-2xl font-semibold break-words">
+          <h1 className="mr-8 text-gray-600 dark:text-gray-300 leading-7 text-2xl font-semibold break-words">
             {getWaypointTitle(activeWaypoint)}
           </h1>
         </div>
 
-        <div className="text-gray-500 text-base">
+        <div className="text-gray-500 dark:text-gray-400 text-base">
           <h2 className="leading-6 font-semibold pt-2">
             {t("map.panes.waypointInfo.description")}
           </h2>
@@ -92,12 +95,12 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
         </div>
 
         <div>
-          <h2 className="text-gray-500 text-base leading-6 font-semibold pt-2 pb-1">
+          <h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-semibold pt-2 pb-1">
             {t("map.panes.waypointInfo.details")}
           </h2>
 
           <div className="flex flex-col gap-1 pt-1">
-            <div className="flex justify-between pb-1 text-gray-500">
+            <div className="flex justify-between pb-1 text-gray-500 dark:text-gray-400">
               <div className="flex justify-start">
                 {lockedTo ? (
                   <Lock strokeWidth={1.5} />
@@ -111,7 +114,7 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
                     ? t("map.panes.waypointInfo.onlyNodeEdit", {
                         nodeName: usersMap[lockedTo]?.shortName || lockedTo,
                       })
-                    : t("map.panes.waypointInfo.anyoneEdit")}
+                    : t("map.panes.waypointInfo.locked.anyoneEdit")}
                 </h2>
               </div>
 
@@ -133,7 +136,7 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
               </button>
             </div>
 
-            <div className="flex justify-between pb-1 text-gray-500">
+            <div className="flex justify-between pb-1 text-gray-500 dark:text-gray-400">
               <div className="flex justify-start">
                 <MapPin strokeWidth={1.5} />
                 <h2 className="text-base leading-6 font-normal pl-2">
@@ -159,7 +162,7 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
               </button>
             </div>
 
-            <div className="flex justify-between pb-1 text-gray-500">
+            <div className="flex justify-between pb-1 text-gray-500 dark:text-gray-400">
               <div className="flex justify-start">
                 {!expire ? (
                   <TimerOff strokeWidth={1.5} />
@@ -198,7 +201,7 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
             type="button"
             onClick={handleEditWaypoint}
             disabled={!!lockedTo && lockedTo !== device?.myNodeInfo.myNodeNum}
-            className=" text-gray-500 hover:text-gray-600 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors"
+            className=" text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:text-gray-300 dark:disabled:text-gray-600 disabled:cursor-not-allowed transition-colors"
           >
             {t("map.panes.waypointInfo.editWaypoint")}
           </button>
@@ -206,7 +209,7 @@ const WaypointMenu = ({ editWaypoint }: IWaypointMenuProps) => {
           <button
             type="button"
             onClick={handleDeleteWaypoint}
-            className="text-red-400 hover:text-red-500 transition-colors"
+            className="text-red-400 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300 transition-colors"
           >
             {t("map.panes.waypointInfo.deleteWaypoint")}
           </button>
diff --git a/src/components/config/ConfigInput.tsx b/src/components/config/ConfigInput.tsx
index c1f24ed4..4fa0fa21 100644
--- a/src/components/config/ConfigInput.tsx
+++ b/src/components/config/ConfigInput.tsx
@@ -24,7 +24,7 @@ const ConfigInput = forwardRef<
       <input
         className={`${
           rest.type === "checkbox" ? "mr-auto" : "w-full"
-        } px-3 py-1 rounded-lg text-base font-normal text-gray-700 border border-gray-200`}
+        } bg-white dark:bg-gray-800 px-3 py-1 rounded-lg text-base font-normal text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-500 disabled:text-gray-400 dark:disabled:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700`}
         type="url"
         {...rest}
         ref={ref}
diff --git a/src/components/config/ConfigLabel.tsx b/src/components/config/ConfigLabel.tsx
index 79f66e68..bc7ce9fe 100644
--- a/src/components/config/ConfigLabel.tsx
+++ b/src/components/config/ConfigLabel.tsx
@@ -17,7 +17,9 @@ const ConfigLabel = ({
   return (
     <div className={className}>
       <label className="">
-        <p className="m-0 mb-1 text-xs font-semibold text-gray-500">{text}</p>
+        <p className="m-0 mb-1 text-xs font-semibold text-gray-500 dark:text-gray-400">
+          {text}
+        </p>
         <div>{children}</div>
       </label>
       {error && <p>{error}</p>}
diff --git a/src/components/config/ConfigLayout.tsx b/src/components/config/ConfigLayout.tsx
index c7b634cf..f437a225 100644
--- a/src/components/config/ConfigLayout.tsx
+++ b/src/components/config/ConfigLayout.tsx
@@ -24,15 +24,15 @@ const ConfigLayout = ({
   children,
 }: IConfigLayoutProps) => {
   return (
-    <div className="flex flex-row w-full h-screen">
+    <div className="flex flex-row w-full h-screen bg-white dark:bg-gray-800">
       <div className="flex flex-col w-96 after:shadow-lg">
-        <div className="flex justify-center align-middle px-9 h-20 border-b border-gray-100">
+        <div className="flex justify-center align-middle px-9 h-20 border-b border-gray-100 dark:border-gray-700">
           <NavigationBacktrace className="my-auto mr-auto" levels={backtrace} />
         </div>
 
         <div className="flex flex-col flex-1 px-9 py-6 overflow-y-auto">
           <div className="flex flex-row justify-between align-middle mb-6">
-            <h1 className="text-4xl leading-10 font-semibold text-gray-700">
+            <h1 className="text-4xl leading-10 font-semibold text-gray-700 dark:text-gray-300">
               {title}
             </h1>
 
@@ -42,7 +42,9 @@ const ConfigLayout = ({
                 className="cursor-pointer"
                 onClick={() => onTitleIconClick()}
               >
-                {renderTitleIcon("w-6 h-6 text-gray-400 my-auto")}
+                {renderTitleIcon(
+                  "w-6 h-6 text-gray-400 dark:text-gray-400 my-auto"
+                )}
               </button>
             </DefaultTooltip>
           </div>
diff --git a/src/components/config/ConfigOption.tsx b/src/components/config/ConfigOption.tsx
index 10fc910b..ac518ff4 100644
--- a/src/components/config/ConfigOption.tsx
+++ b/src/components/config/ConfigOption.tsx
@@ -18,10 +18,12 @@ const ConfigOption = ({
       <button
         type="button"
         onClick={onClick}
-        className="flex flex-row justify-between items-baseline px-3 py-4 bg-gray-700 rounded-lg"
+        className="flex flex-row justify-between items-baseline px-3 py-4 bg-gray-700 dark:bg-gray-300 rounded-lg"
       >
-        <p className="text-sm font-semibold text-gray-100 text-left">{title}</p>
-        <p className="text-xs font-normal text-gray-200 text-right">
+        <p className="text-sm font-semibold text-gray-100 dark:text-gray-700 text-left">
+          {title}
+        </p>
+        <p className="text-xs font-normal text-gray-200 dark:text-gray-500 text-right">
           {subtitle}
         </p>
       </button>
@@ -31,10 +33,14 @@ const ConfigOption = ({
     <button
       type="button"
       onClick={onClick}
-      className="flex flex-row justify-between items-baseline px-3 py-4 bg-white rounded-lg"
+      className="flex flex-row justify-between items-baseline px-3 py-4 bg-white dark:bg-gray-800 rounded-lg"
     >
-      <p className="text-sm font-semibold text-gray-600 text-left">{title}</p>
-      <p className="text-xs font-normal text-gray-500 text-right">{subtitle}</p>
+      <p className="text-sm font-semibold text-gray-600 dark:text-gray-400 text-left">
+        {title}
+      </p>
+      <p className="text-xs font-normal text-gray-500 dark:text-gray-500 text-right">
+        {subtitle}
+      </p>
     </button>
   );
 };
diff --git a/src/components/config/ConfigSelect.tsx b/src/components/config/ConfigSelect.tsx
new file mode 100644
index 00000000..af0c4caa
--- /dev/null
+++ b/src/components/config/ConfigSelect.tsx
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import type { DetailedHTMLProps, SelectHTMLAttributes } from "react";
+import type { UseFormRegister } from "react-hook-form";
+
+import ConfigLabel from "@components/config/ConfigLabel";
+
+export interface IConfigSelectProps
+  extends DetailedHTMLProps<
+    SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  > {
+  text: string;
+  error?: string;
+}
+
+// eslint-disable-next-line react/display-name
+const ConfigSelect = forwardRef<
+  HTMLSelectElement,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  IConfigSelectProps & ReturnType<UseFormRegister<any>>
+>(({ text, error, ...rest }, ref) => {
+  return (
+    <ConfigLabel text={text} error={error}>
+      <select
+        className={
+          "bg-white dark:bg-gray-800 px-3 py-1 rounded-lg text-base font-normal text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-500 disabled:text-gray-400 dark:disabled:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700"
+        }
+        {...rest}
+        ref={ref}
+      />
+    </ConfigLabel>
+  );
+});
+
+export default ConfigSelect;
diff --git a/src/components/config/ConfigTitlebar.tsx b/src/components/config/ConfigTitlebar.tsx
index a50f0fd7..468cb63c 100644
--- a/src/components/config/ConfigTitlebar.tsx
+++ b/src/components/config/ConfigTitlebar.tsx
@@ -26,16 +26,20 @@ const ConfigTitle = ({
   children,
 }: IConfigTitleProps) => {
   return (
-    <div className={`flex flex-col w-full h-full bg-gray-100`}>
-      <div className="flex-initial flex flex-row justify-between items-center px-9 min-h-[5rem] h-20 bg-white border-b border-l border-gray-100">
+    <div className={`flex flex-col w-full h-full bg-gray-100 dark:bg-gray-700`}>
+      <div className="flex-initial flex flex-row justify-between items-center px-9 min-h-[5rem] h-20 bg-white dark:bg-gray-800 border-b border-l border-gray-100 dark:border-gray-700">
         <div>
-          <h2 className="text-sm font-semibold text-gray-700">{title}</h2>
-          <p className="text-xs font-normal text-gray-400">{subtitle}</p>
+          <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            {title}
+          </h2>
+          <p className="text-xs font-normal text-gray-400 dark:text-gray-500">
+            {subtitle}
+          </p>
         </div>
 
         <DefaultTooltip text={buttonTooltipText}>
           <button type="button" onClick={() => onIconClick()} {...buttonProps}>
-            {renderIcon("w-6 h-6 text-gray-400")}
+            {renderIcon("w-6 h-6 text-gray-400 dark:text-gray-400")}
           </button>
         </DefaultTooltip>
       </div>
diff --git a/src/components/config/channel/ChannelConfigDetail.tsx b/src/components/config/channel/ChannelConfigDetail.tsx
index 2f0f34f8..c6ea971e 100644
--- a/src/components/config/channel/ChannelConfigDetail.tsx
+++ b/src/components/config/channel/ChannelConfigDetail.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   ChannelConfigInput,
@@ -135,22 +135,20 @@ const ChannelConfigDetail = ({
         onIconClick={handleFormReset}
       >
         <div className="flex flex-col gap-6">
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.channel.detail.channelRole.title")}
-            error={errors.role?.message}
+            {...register("role")}
           >
-            <select {...register("role")}>
-              <option value="0">
-                {t("config.channel.detail.channelRole.disabled")}
-              </option>
-              <option value="1">
-                {t("config.channel.detail.channelRole.primary")}
-              </option>
-              <option value="2">
-                {t("config.channel.detail.channelRole.secondary")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.channel.detail.channelRole.disabled")}
+            </option>
+            <option value="1">
+              {t("config.channel.detail.channelRole.primary")}
+            </option>
+            <option value="2">
+              {t("config.channel.detail.channelRole.secondary")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="text"
diff --git a/src/components/config/device/BluetoothConfigPage.tsx b/src/components/config/device/BluetoothConfigPage.tsx
index 5319b5e7..2b0988ce 100644
--- a/src/components/config/device/BluetoothConfigPage.tsx
+++ b/src/components/config/device/BluetoothConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   BluetoothConfigInput,
@@ -123,22 +123,21 @@ const BluetoothConfigPage = ({ className = "" }: IBluetoothConfigPageProps) => {
             {...register("enabled")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.bluetooth.pairingMode.title")}
-            error={errors.mode?.message}
+            disabled={bluetoothDisabled}
+            {...register("mode")}
           >
-            <select disabled={bluetoothDisabled} {...register("mode")}>
-              <option value="0">
-                {t("config.radio.bluetooth.pairingMode.randomPin")}
-              </option>
-              <option value="1">
-                {t("config.radio.bluetooth.pairingMode.fixedPin")}
-              </option>
-              <option value="2">
-                {t("config.radio.bluetooth.pairingMode.noPin")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.bluetooth.pairingMode.randomPin")}
+            </option>
+            <option value="1">
+              {t("config.radio.bluetooth.pairingMode.fixedPin")}
+            </option>
+            <option value="2">
+              {t("config.radio.bluetooth.pairingMode.noPin")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
diff --git a/src/components/config/device/DeviceConfigPage.tsx b/src/components/config/device/DeviceConfigPage.tsx
index 17079416..c3272f90 100644
--- a/src/components/config/device/DeviceConfigPage.tsx
+++ b/src/components/config/device/DeviceConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   DeviceConfigInput,
@@ -98,34 +98,32 @@ const DeviceConfigPage = ({ className = "" }: IDeviceConfigPageProps) => {
         onIconClick={handleFormReset}
       >
         <div className="flex flex-col gap-6">
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.device.deviceRole.title")}
-            error={errors.role?.message}
+            {...register("role")}
           >
-            <select {...register("role")}>
-              <option value="0">
-                {t("config.radio.device.deviceRole.client")}
-              </option>
-              <option value="1">
-                {t("config.radio.device.deviceRole.clientMuted")}
-              </option>
-              <option value="2">
-                {t("config.radio.device.deviceRole.router")}
-              </option>
-              <option value="3">
-                {t("config.radio.device.deviceRole.routerClient")}
-              </option>
-              <option value="4">
-                {t("config.radio.device.deviceRole.repeater")}
-              </option>
-              <option value="5">
-                {t("config.radio.device.deviceRole.tracker")}
-              </option>
-              <option value="6">
-                {t("config.radio.device.deviceRole.sensor")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.device.deviceRole.client")}
+            </option>
+            <option value="1">
+              {t("config.radio.device.deviceRole.clientMuted")}
+            </option>
+            <option value="2">
+              {t("config.radio.device.deviceRole.router")}
+            </option>
+            <option value="3">
+              {t("config.radio.device.deviceRole.routerClient")}
+            </option>
+            <option value="4">
+              {t("config.radio.device.deviceRole.repeater")}
+            </option>
+            <option value="5">
+              {t("config.radio.device.deviceRole.tracker")}
+            </option>
+            <option value="6">
+              {t("config.radio.device.deviceRole.sensor")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
@@ -144,22 +142,20 @@ const DeviceConfigPage = ({ className = "" }: IDeviceConfigPageProps) => {
           {/* TODO BUTTON GPIO */}
           {/* TODO BUZZER GPIO */}
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.device.rebroadcastMode.title")}
-            error={errors.rebroadcastMode?.message}
+            {...register("rebroadcastMode")}
           >
-            <select {...register("rebroadcastMode")}>
-              <option value="0">
-                {t("config.radio.device.rebroadcastMode.all")}
-              </option>
-              <option value="1">
-                {t("config.radio.device.rebroadcastMode.allSkipDecoding")}
-              </option>
-              <option value="2">
-                {t("config.radio.device.rebroadcastMode.localOnly")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.device.rebroadcastMode.all")}
+            </option>
+            <option value="1">
+              {t("config.radio.device.rebroadcastMode.allSkipDecoding")}
+            </option>
+            <option value="2">
+              {t("config.radio.device.rebroadcastMode.localOnly")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
diff --git a/src/components/config/device/DisplayConfigPage.tsx b/src/components/config/device/DisplayConfigPage.tsx
index 3ce0d043..3cdce291 100644
--- a/src/components/config/device/DisplayConfigPage.tsx
+++ b/src/components/config/device/DisplayConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   DisplayConfigInput,
@@ -117,25 +117,23 @@ const DisplayConfigPage = ({ className = "" }: IDisplayConfigPageProps) => {
             {...register("compassNorthTop")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.display.displayMode.title")}
-            error={errors.displaymode?.message}
+            {...register("displaymode")}
           >
-            <select {...register("displaymode")}>
-              <option value="0">
-                {t("config.radio.display.displayMode.default")}
-              </option>
-              <option value="1">
-                {t("config.radio.display.displayMode.twoColor")}
-              </option>
-              <option value="2">
-                {t("config.radio.display.displayMode.inverted")}
-              </option>
-              <option value="3">
-                {t("config.radio.display.displayMode.color")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.display.displayMode.default")}
+            </option>
+            <option value="1">
+              {t("config.radio.display.displayMode.twoColor")}
+            </option>
+            <option value="2">
+              {t("config.radio.display.displayMode.inverted")}
+            </option>
+            <option value="3">
+              {t("config.radio.display.displayMode.color")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
@@ -144,31 +142,23 @@ const DisplayConfigPage = ({ className = "" }: IDisplayConfigPageProps) => {
             {...register("flipScreen")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.display.gpsFormat.title")}
-            error={errors.gpsFormat?.message}
+            {...register("gpsFormat")}
           >
-            <select {...register("gpsFormat")}>
-              <option value="0">
-                {t("config.radio.display.gpsFormat.decimal")}
-              </option>
-              <option value="1">
-                {t("config.radio.display.gpsFormat.dms")}
-              </option>
-              <option value="2">
-                {t("config.radio.display.gpsFormat.utm")}
-              </option>
-              <option value="3">
-                {t("config.radio.display.gpsFormat.mgrs")}
-              </option>
-              <option value="4">
-                {t("config.radio.display.gpsFormat.olc")}
-              </option>
-              <option value="5">
-                {t("config.radio.display.gpsFormat.osgr")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.display.gpsFormat.decimal")}
+            </option>
+            <option value="1">{t("config.radio.display.gpsFormat.dms")}</option>
+            <option value="2">{t("config.radio.display.gpsFormat.utm")}</option>
+            <option value="3">
+              {t("config.radio.display.gpsFormat.mgrs")}
+            </option>
+            <option value="4">{t("config.radio.display.gpsFormat.olc")}</option>
+            <option value="5">
+              {t("config.radio.display.gpsFormat.osgr")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
@@ -177,25 +167,23 @@ const DisplayConfigPage = ({ className = "" }: IDisplayConfigPageProps) => {
             {...register("headingBold")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.display.oledConfig.title")}
-            error={errors.oled?.message}
+            {...register("oled")}
           >
-            <select {...register("oled")}>
-              <option value="0">
-                {t("config.radio.display.oledConfig.autoDetect")}
-              </option>
-              <option value="1">
-                {t("config.radio.display.oledConfig.ssd1306")}
-              </option>
-              <option value="2">
-                {t("config.radio.display.oledConfig.sh1106")}
-              </option>
-              <option value="3">
-                {t("config.radio.display.oledConfig.sh1107")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.display.oledConfig.autoDetect")}
+            </option>
+            <option value="1">
+              {t("config.radio.display.oledConfig.ssd1306")}
+            </option>
+            <option value="2">
+              {t("config.radio.display.oledConfig.sh1106")}
+            </option>
+            <option value="3">
+              {t("config.radio.display.oledConfig.sh1107")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
@@ -204,19 +192,15 @@ const DisplayConfigPage = ({ className = "" }: IDisplayConfigPageProps) => {
             {...register("screenOnSecs")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.display.units.title")}
-            error={errors.units?.message}
+            {...register("units")}
           >
-            <select {...register("units")}>
-              <option value="0">
-                {t("config.radio.display.units.metric")}
-              </option>
-              <option value="1">
-                {t("config.radio.display.units.imperial")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">{t("config.radio.display.units.metric")}</option>
+            <option value="1">
+              {t("config.radio.display.units.imperial")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
diff --git a/src/components/config/device/LoRaConfigPage.tsx b/src/components/config/device/LoRaConfigPage.tsx
index 6dda6ed2..4c8a5d3f 100644
--- a/src/components/config/device/LoRaConfigPage.tsx
+++ b/src/components/config/device/LoRaConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   LoRaConfigInput,
@@ -123,32 +123,26 @@ const LoRaConfigPage = ({ className = "" }: ILoRaConfigPageProps) => {
         onIconClick={handleFormReset}
       >
         <div className="flex flex-col gap-6">
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.lora.region.title")}
-            error={errors.region?.message}
+            {...register("region")}
           >
-            <select {...register("region")}>
-              <option value="0">{t("config.radio.lora.region.unset")}</option>
-              <option value="1">{t("config.radio.lora.region.us")}</option>
-              <option value="2">{t("config.radio.lora.region.eu433")}</option>
-              <option value="3">{t("config.radio.lora.region.eu868")}</option>
-              <option value="4">{t("config.radio.lora.region.china")}</option>
-              <option value="5">{t("config.radio.lora.region.japan")}</option>
-              <option value="6">{t("config.radio.lora.region.auNz")}</option>
-              <option value="7">{t("config.radio.lora.region.korea")}</option>
-              <option value="8">{t("config.radio.lora.region.taiwan")}</option>
-              <option value="9">{t("config.radio.lora.region.russia")}</option>
-              <option value="10">{t("config.radio.lora.region.india")}</option>
-              <option value="11">{t("config.radio.lora.region.nz865")}</option>
-              <option value="12">
-                {t("config.radio.lora.region.ukraine")}
-              </option>
-              <option value="13">
-                {t("config.radio.lora.region.thailand")}
-              </option>
-              <option value="14">{t("config.radio.lora.region.24ghz")}</option>
-            </select>
-          </ConfigLabel>
+            <option value="0">{t("config.radio.lora.region.unset")}</option>
+            <option value="1">{t("config.radio.lora.region.us")}</option>
+            <option value="2">{t("config.radio.lora.region.eu433")}</option>
+            <option value="3">{t("config.radio.lora.region.eu868")}</option>
+            <option value="4">{t("config.radio.lora.region.china")}</option>
+            <option value="5">{t("config.radio.lora.region.japan")}</option>
+            <option value="6">{t("config.radio.lora.region.auNz")}</option>
+            <option value="7">{t("config.radio.lora.region.korea")}</option>
+            <option value="8">{t("config.radio.lora.region.taiwan")}</option>
+            <option value="9">{t("config.radio.lora.region.russia")}</option>
+            <option value="10">{t("config.radio.lora.region.india")}</option>
+            <option value="11">{t("config.radio.lora.region.nz865")}</option>
+            <option value="12">{t("config.radio.lora.region.ukraine")}</option>
+            <option value="13">{t("config.radio.lora.region.thailand")}</option>
+            <option value="14">{t("config.radio.lora.region.24ghz")}</option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
@@ -157,34 +151,33 @@ const LoRaConfigPage = ({ className = "" }: ILoRaConfigPageProps) => {
             {...register("usePreset")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.lora.modemPreset.title")}
-            error={errors.modemPreset?.message}
+            disabled={!useModemPreset}
+            {...register("modemPreset")}
           >
-            <select disabled={!useModemPreset} {...register("modemPreset")}>
-              <option value="0">
-                {t("config.radio.lora.modemPreset.longFast")}
-              </option>
-              <option value="1">
-                {t("config.radio.lora.modemPreset.longSlow")}
-              </option>
-              <option value="2">
-                {t("config.radio.lora.modemPreset.veryLongSlow")}
-              </option>
-              <option value="3">
-                {t("config.radio.lora.modemPreset.medSlow")}
-              </option>
-              <option value="4">
-                {t("config.radio.lora.modemPreset.shortSlow")}
-              </option>
-              <option value="5">
-                {t("config.radio.lora.modemPreset.shortFast")}
-              </option>
-              <option value="6">
-                {t("config.radio.lora.modemPreset.longModerate")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.lora.modemPreset.longFast")}
+            </option>
+            <option value="1">
+              {t("config.radio.lora.modemPreset.longSlow")}
+            </option>
+            <option value="2">
+              {t("config.radio.lora.modemPreset.veryLongSlow")}
+            </option>
+            <option value="3">
+              {t("config.radio.lora.modemPreset.medSlow")}
+            </option>
+            <option value="4">
+              {t("config.radio.lora.modemPreset.shortSlow")}
+            </option>
+            <option value="5">
+              {t("config.radio.lora.modemPreset.shortFast")}
+            </option>
+            <option value="6">
+              {t("config.radio.lora.modemPreset.longModerate")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             disabled={useModemPreset}
diff --git a/src/components/config/device/NetworkConfigPage.tsx b/src/components/config/device/NetworkConfigPage.tsx
index 1fd200be..25c525b5 100644
--- a/src/components/config/device/NetworkConfigPage.tsx
+++ b/src/components/config/device/NetworkConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   NetworkConfigInput,
@@ -145,19 +145,18 @@ const NetworkConfigPage = ({ className = "" }: INetworkConfigPageProps) => {
             {...register("ethEnabled")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.radio.network.addressMode.title")}
-            error={errors.addressMode?.message}
+            disabled={ethDisabled}
+            {...register("addressMode")}
           >
-            <select disabled={ethDisabled} {...register("addressMode")}>
-              <option value="0">
-                {t("config.radio.network.addressMode.dhcp")}
-              </option>
-              <option disabled value="1">
-                {t("config.radio.network.addressMode.static")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.radio.network.addressMode.dhcp")}
+            </option>
+            <option disabled value="1">
+              {t("config.radio.network.addressMode.static")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             disabled={wifiDisabled && ethDisabled}
diff --git a/src/components/config/module/AudioConfigPage.tsx b/src/components/config/module/AudioConfigPage.tsx
index 6e9b9472..4ff19ee6 100644
--- a/src/components/config/module/AudioConfigPage.tsx
+++ b/src/components/config/module/AudioConfigPage.tsx
@@ -6,8 +6,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import type { AudioModuleConfigInput } from "@features/config/configSlice";
 // import {
@@ -132,19 +132,21 @@ const AudioConfigPage = ({ className = "" }: IAudioConfigPageProps) => {
             {...register("pttPin")}
           />
 
-          <ConfigLabel text="Audio Bitrate" error={errors.bitrate?.message}>
-            <select disabled={codec2Disabled} {...register("bitrate")}>
-              <option value="0">Default (700B)</option>
-              <option value="1">3200 bps</option>
-              <option value="2">2400 bps</option>
-              <option value="3">1600 bps</option>
-              <option value="4">1400 bps</option>
-              <option value="5">1300 bps</option>
-              <option value="6">1200 bps</option>
-              <option value="7">700 bps</option>
-              <option value="8">700B bps</option>
-            </select>
-          </ConfigLabel>
+          <ConfigSelect
+            text="Audio Bitrate"
+            disabled={codec2Disabled}
+            {...register("bitrate")}
+          >
+            <option value="0">Default (700B)</option>
+            <option value="1">3200 bps</option>
+            <option value="2">2400 bps</option>
+            <option value="3">1600 bps</option>
+            <option value="4">1400 bps</option>
+            <option value="5">1300 bps</option>
+            <option value="6">1200 bps</option>
+            <option value="7">700 bps</option>
+            <option value="8">700B bps</option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
diff --git a/src/components/config/module/CannedMessageConfigPage.tsx b/src/components/config/module/CannedMessageConfigPage.tsx
index c79e2bf4..ea1500a9 100644
--- a/src/components/config/module/CannedMessageConfigPage.tsx
+++ b/src/components/config/module/CannedMessageConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   CannedMessageModuleConfigInput,
@@ -126,28 +126,27 @@ const CannedMessageConfigPage = ({
             {...register("enabled")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.module.cannedMessages.allowInputSource.title")}
-            error={errors.allowInputSource?.message}
+            disabled={moduleDisabled}
+            {...register("allowInputSource")}
           >
-            <select disabled={moduleDisabled} {...register("allowInputSource")}>
-              <option value="">
-                {t("config.module.cannedMessages.allowInputSource.noSelect")}
-              </option>
-              <option value="_any">
-                {t("config.module.cannedMessages.allowInputSource.any")}
-              </option>
-              <option value="rotEnc1">
-                {t("config.module.cannedMessages.allowInputSource.3200bps")}
-              </option>
-              <option value="upDownEnc1">
-                {t("config.module.cannedMessages.allowInputSource.encoder")}
-              </option>
-              <option value="cardkb">
-                {t("config.module.cannedMessages.allowInputSource.cardKb")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="">
+              {t("config.module.cannedMessages.allowInputSource.noSelect")}
+            </option>
+            <option value="_any">
+              {t("config.module.cannedMessages.allowInputSource.any")}
+            </option>
+            <option value="rotEnc1">
+              {t("config.module.cannedMessages.allowInputSource.3200bps")}
+            </option>
+            <option value="upDownEnc1">
+              {t("config.module.cannedMessages.allowInputSource.encoder")}
+            </option>
+            <option value="cardkb">
+              {t("config.module.cannedMessages.allowInputSource.cardKb")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="checkbox"
diff --git a/src/components/config/module/SerialModuleConfigPage.tsx b/src/components/config/module/SerialModuleConfigPage.tsx
index 6ab8f8cb..66eda9b9 100644
--- a/src/components/config/module/SerialModuleConfigPage.tsx
+++ b/src/components/config/module/SerialModuleConfigPage.tsx
@@ -7,8 +7,8 @@ import { RotateCcw } from "lucide-react";
 import debounce from "lodash.debounce";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
-import ConfigLabel from "@components/config/ConfigLabel";
 import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
 
 import {
   SerialModuleConfigInput,
@@ -131,28 +131,27 @@ const SerialModuleConfigPage = ({
             {...register("echo")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.module.serial.operatingMode.title")}
-            error={errors.mode?.message}
+            disabled={moduleDisabled}
+            {...register("mode")}
           >
-            <select disabled={moduleDisabled} {...register("mode")}>
-              <option value="0">
-                {t("config.module.serial.operatingMode.default")}
-              </option>
-              <option value="1">
-                {t("config.module.serial.operatingMode.simple")}
-              </option>
-              <option value="2">
-                {t("config.module.serial.operatingMode.protobuf")}
-              </option>
-              <option value="3">
-                {t("config.module.serial.operatingMode.text")}
-              </option>
-              <option value="4">
-                {t("config.module.serial.operatingMode.nmea")}
-              </option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.module.serial.operatingMode.default")}
+            </option>
+            <option value="1">
+              {t("config.module.serial.operatingMode.simple")}
+            </option>
+            <option value="2">
+              {t("config.module.serial.operatingMode.protobuf")}
+            </option>
+            <option value="3">
+              {t("config.module.serial.operatingMode.text")}
+            </option>
+            <option value="4">
+              {t("config.module.serial.operatingMode.nmea")}
+            </option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
@@ -170,32 +169,31 @@ const SerialModuleConfigPage = ({
             {...register("txd")}
           />
 
-          <ConfigLabel
+          <ConfigSelect
             text={t("config.module.serial.baudRate.title")}
-            error={errors.baud?.message}
+            disabled={moduleDisabled}
+            {...register("baud")}
           >
-            <select disabled={moduleDisabled} {...register("baud")}>
-              <option value="0">
-                {t("config.module.serial.baudRate.default")}
-              </option>
-              <option value="1">110 bps</option>
-              <option value="2">300 bps</option>
-              <option value="3">600 bps</option>
-              <option value="4">1200 bps</option>
-              <option value="5">2400 bps</option>
-              <option value="6">4800 bps</option>
-              <option value="7">9600 bps</option>
-              <option value="8">14400 bps</option>
-              <option value="9">19200 bps</option>
-              <option value="10">38400 bps</option>
-              <option value="11">57600 bps</option>
-              <option value="12">115200 bps</option>
-              <option value="13">230400 bps</option>
-              <option value="14">460800 bps</option>
-              <option value="15">576000 bps</option>
-              <option value="16">921600 bps</option>
-            </select>
-          </ConfigLabel>
+            <option value="0">
+              {t("config.module.serial.baudRate.default")}
+            </option>
+            <option value="1">110 bps</option>
+            <option value="2">300 bps</option>
+            <option value="3">600 bps</option>
+            <option value="4">1200 bps</option>
+            <option value="5">2400 bps</option>
+            <option value="6">4800 bps</option>
+            <option value="7">9600 bps</option>
+            <option value="8">14400 bps</option>
+            <option value="9">19200 bps</option>
+            <option value="10">38400 bps</option>
+            <option value="11">57600 bps</option>
+            <option value="12">115200 bps</option>
+            <option value="13">230400 bps</option>
+            <option value="14">460800 bps</option>
+            <option value="15">576000 bps</option>
+            <option value="16">921600 bps</option>
+          </ConfigSelect>
 
           <ConfigInput
             type="number"
diff --git a/src/components/connection/SerialPortOption.tsx b/src/components/connection/SerialPortOption.tsx
index 1c58f8c8..60459d6b 100644
--- a/src/components/connection/SerialPortOption.tsx
+++ b/src/components/connection/SerialPortOption.tsx
@@ -25,7 +25,7 @@ const SerialPortOption = ({
       return (
         <div className="flex justify-center select-none">
           <div className="flex flex-1 justify-left border rounded-lg border-gray-500 dark:border-gray-200 pl-4 pt-5 pb-5 pr-4 w-6/12 hover:cursor-wait bg-white dark:bg-gray-800">
-            <EllipsisHorizontalCircleIcon className="text-gray-500 dark:text-gray-400 w-6 h-6" />
+            <EllipsisHorizontalCircleIcon className="text-gray-500 dark:text-gray-300 w-6 h-6" />
             <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 dark:text-gray-400 mt-0.5">
               <Trans
                 i18nKey="connectPage.tabs.serial.portOption"
@@ -81,7 +81,7 @@ const SerialPortOption = ({
           <div className="flex justify-center select-none">
             <div className="flex flex-1 justify-left border rounded-lg border-gray-400 dark:border-gray-200 pl-4 pt-5 pb-5 pr-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-500 dark:hover:border-gray-50 hover:shadow-lg">
               <Usb className="text-gray-500 dark:text-gray-400 w-6 h-6" />
-              <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 dark:text-gray-400 mt-0.5">
+              <h1 className="ml-4 text-base leading-6 font-normal text-gray-600 dark:text-gray-300 mt-0.5">
                 <Trans
                   i18nKey="connectPage.tabs.serial.portOption"
                   values={{ portName: name }}
diff --git a/src/components/connection/TcpConnectPane.tsx b/src/components/connection/TcpConnectPane.tsx
index b5c16737..a2b41af1 100644
--- a/src/components/connection/TcpConnectPane.tsx
+++ b/src/components/connection/TcpConnectPane.tsx
@@ -54,14 +54,14 @@ const TcpConnectPane = ({
         {activeSocketState.status === "PENDING" ? (
           <>
             <EllipsisHorizontalCircleIcon className="w-6 h-6 text-gray-500 dark:text-gray-400" />
-            <p className="text-gray-700 dark:text-gray-400">
+            <p className="text-gray-700 dark:text-gray-300">
               {t("connectPage.tabs.tcp.connecting")}
             </p>
           </>
         ) : (
           <>
             <LinkIcon className="w-6 h-6 text-gray-500 dark:text-gray-400" />
-            <p className="text-gray-700 dark:text-gray-400">
+            <p className="text-gray-700 dark:text-gray-300">
               {t("connectPage.tabs.tcp.connect")}
             </p>
           </>
diff --git a/src/components/pages/ApplicationStatePage.tsx b/src/components/pages/ApplicationStatePage.tsx
index 710ee3de..10c7af7b 100644
--- a/src/components/pages/ApplicationStatePage.tsx
+++ b/src/components/pages/ApplicationStatePage.tsx
@@ -5,21 +5,29 @@ import ReactJson from "react-json-view";
 
 import NavigationBacktrace from "@components/NavigationBacktrace";
 import { selectRootState } from "@features/device/deviceSelectors";
+import { useIsDarkMode } from "@utils/hooks";
 
 const ApplicationStatePage = () => {
   const { t } = useTranslation();
 
+  const { isDarkMode } = useIsDarkMode();
+
   const rootState = useSelector(selectRootState());
   const backtrace = [t("applicationState.title")];
 
   return (
-    <div className="flex flex-col w-full h-screen">
-      <div className="flex justify-center align-middle px-9 min-h-[5rem] border-b border-gray-100">
+    <div className="flex flex-col w-full h-screen bg-white dark:bg-gray-800">
+      <div className="flex justify-center align-middle px-9 min-h-[5rem] border-b border-gray-100 dark:border-gray-700">
         <NavigationBacktrace className="my-auto mr-auto" levels={backtrace} />
       </div>
 
       <div className="px-9 py-6 overflow-x-hidden overflow-y-auto">
-        <ReactJson collapsed src={rootState ?? {}} />
+        <ReactJson
+          collapsed
+          theme={isDarkMode ? "tomorrow" : "rjv-default"}
+          iconStyle="square"
+          src={rootState ?? {}}
+        />
       </div>
     </div>
   );
diff --git a/src/components/pages/ConnectPage.tsx b/src/components/pages/ConnectPage.tsx
index 77bde5fa..e0d9d19c 100644
--- a/src/components/pages/ConnectPage.tsx
+++ b/src/components/pages/ConnectPage.tsx
@@ -4,12 +4,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { open } from "@tauri-apps/api/shell";
 import * as Tabs from "@radix-ui/react-tabs";
 
+import MeshLogoLight from "@app/assets/Mesh_Logo_Light.svg";
+import MeshLogoDark from "@app/assets/Mesh_Logo_Dark.svg";
 import Hero_Image from "@app/assets/onboard_hero_image.jpg";
 
-// TODO export these as svg
-import Meshtastic_Logo_Dark from "@app/assets/Mesh_Logo_Black.png";
-import Meshtastic_Logo_Light from "@app/assets/Mesh_Logo_White.svg";
-
 import ConnectTab from "@components/connection/ConnectTab";
 import TcpConnectPane from "@components/connection/TcpConnectPane";
 import SerialConnectPane from "@components/connection/SerialConnectPane";
@@ -34,6 +32,7 @@ import {
 import { requestSliceActions } from "@features/requests/requestReducer";
 
 import { ConnectionType } from "@utils/connections";
+import { useIsDarkMode } from "@utils/hooks";
 
 import "@components/SplashScreen/SplashScreen.css";
 
@@ -47,6 +46,8 @@ export interface IOnboardPageProps {
 const ConnectPage = ({ unmountSelf }: IOnboardPageProps) => {
   const { t } = useTranslation();
 
+  const { isDarkMode } = useIsDarkMode();
+
   const dispatch = useDispatch();
   const availableSerialPorts = useSelector(selectAvailablePorts());
   const autoConnectPort = useSelector(selectAutoConnectPort());
@@ -186,9 +187,8 @@ const ConnectPage = ({ unmountSelf }: IOnboardPageProps) => {
         <div className="flex justify-center">
           <div className="h-1/8">
             <img
-              className="w-11/12 h-11/12"
-              // TODO switch to light mode or get fill working
-              src={Meshtastic_Logo_Dark}
+              className="h-9"
+              src={isDarkMode ? MeshLogoLight : MeshLogoDark}
             ></img>
           </div>
         </div>
diff --git a/src/components/pages/MessagingPage.tsx b/src/components/pages/MessagingPage.tsx
index 382f8935..cc62bc53 100644
--- a/src/components/pages/MessagingPage.tsx
+++ b/src/components/pages/MessagingPage.tsx
@@ -45,8 +45,8 @@ const MessagingPage = () => {
         {activeChannelIdx != null && !!channels[activeChannelIdx] ? (
           <ChannelDetailView channel={channels[activeChannelIdx]} />
         ) : (
-          <div className="flex flex-col justify-center align-middle w-full h-full bg-gray-100">
-            <p className="m-auto text-base font-normal text-gray-700">
+          <div className="flex flex-col justify-center align-middle w-full h-full bg-gray-100 dark:bg-gray-700">
+            <p className="m-auto text-base font-normal text-gray-700 dark:text-gray-300">
               {t("messaging.noChannelsSelected")}
             </p>
           </div>
diff --git a/src/index.css b/src/index.css
index 8b0525fb..ccbcbda8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,6 +34,17 @@ body {
   @apply border;
   @apply border-gray-100;
   @apply shadow-lg;
+
+  /* Note: nesting of attributes not supported */
+  @media (prefers-color-scheme: dark) {
+    /* @apply bg-gray-800; */
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+
+    /* @apply border-gray-700; */
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  }
 }
 
 .default-overlay.no-shadow {
@@ -50,3 +61,8 @@ body {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+/* Overrides background color on react-json-view */
+.react-json-view {
+  background-color: transparent !important;
+}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 409ad839..24e17a33 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { error } from "@utils/errors";
 
 /**
  * This hook is intended for use in components that need to rerender
@@ -16,3 +17,34 @@ export const useComponentReload = (interval: number) => {
 
   return time;
 };
+
+// https://usehooks-ts.com/react-hook/use-dark-mode
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+
+export interface IUseDarkMode {
+  isDarkMode: boolean;
+}
+
+/**
+ * This hook is intended for use in components that need to know
+ * whether the user has dark mode enabled for conditional rendering.
+ * Developers should only use this when it is not possible to use
+ * CSS media queries.
+ * @returns Whether the user has dark mode enabled at the OS level
+ */
+export const useIsDarkMode = (): IUseDarkMode => {
+  // Browser needs to support matchMedia but can't make useState conditional
+  if (!window.matchMedia) {
+    error("Browser doesn't support window.matchMedia method");
+  }
+
+  const runQuery = () => window.matchMedia(COLOR_SCHEME_QUERY);
+
+  const [query, setQuery] = useState<MediaQueryList>(runQuery);
+
+  query.onchange = () => {
+    setQuery(runQuery);
+  };
+
+  return { isDarkMode: query.matches };
+};
diff --git a/src/utils/nodes.ts b/src/utils/nodes.ts
index 37b9ccb5..dc58e48e 100644
--- a/src/utils/nodes.ts
+++ b/src/utils/nodes.ts
@@ -61,35 +61,35 @@ export const getColorClassFromNodeState = (
   switch (nodeState) {
     case "selected":
       return {
-        text: "text-blue-500",
-        fill: "fill-blue-500",
-        background: "bg-blue-500",
-        border: "border-blue-500",
+        text: "text-blue-500 dark:text-blue-300",
+        fill: "fill-blue-500 dark:text-blue-300",
+        background: "bg-blue-500 dark:bg-blue-300",
+        border: "border-blue-500 dark:border-blue-300",
       };
 
     case "warning":
       return {
-        text: "text-orange-500",
-        fill: "fill-orange-500",
-        background: "bg-orange-500",
-        border: "border-orange-500",
+        text: "text-orange-500 dark:text-orange-300",
+        fill: "fill-orange-500 dark:text-orange-300",
+        background: "bg-orange-500 dark:bg-orange-300",
+        border: "border-orange-500 dark:border-orange-300",
       };
 
     case "error":
       return {
-        text: "text-red-500",
-        fill: "fill-red-500",
-        background: "bg-red-500",
-        border: "border-red-500",
+        text: "text-red-500 dark:text-red-300",
+        fill: "fill-red-500 dark:text-red-300",
+        background: "bg-red-500 dark:bg-red-300",
+        border: "border-red-500 dark:border-red-300",
       };
 
     // Nominal
     default:
       return {
-        text: "text-gray-500",
-        fill: "fill-gray-500",
-        background: "bg-gray-500",
-        border: "border-gray-500",
+        text: "text-gray-500 dark:text-gray-400",
+        fill: "fill-gray-500 dark:text-gray-400",
+        background: "bg-gray-500 dark:bg-gray-400",
+        border: "border-gray-500 dark:border-gray-400",
       };
   }
 };

From 5ef9488ec9d14adaed952882183cdbaae470e1ec Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Wed, 26 Jul 2023 16:05:39 -0700
Subject: [PATCH 3/6] Refactored map style config into appConfig

---
 src/components/Map/MapView.tsx                |  7 +++--
 .../Messaging/TextMessageBubble.tsx           | 10 +++----
 .../config/application/MapConfigPage.tsx      | 11 ++++----
 src/features/appConfig/appConfigSagas.ts      |  6 +++--
 src/features/appConfig/appConfigSelectors.ts  | 10 ++++++-
 src/features/appConfig/appConfigSlice.ts      | 26 ++++++++++++++++++-
 src/features/map/mapSlice.ts                  | 11 --------
 7 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx
index efdd3a7c..55a1718f 100644
--- a/src/components/Map/MapView.tsx
+++ b/src/components/Map/MapView.tsx
@@ -40,6 +40,7 @@ import MapNodeTooltip from "@components/Map/MapNodeTooltip";
 import MeshWaypoint from "@components/Waypoints/MeshWaypoint";
 import WaypointMenu from "@components/Waypoints/WaypointMenu";
 
+import { selectMapConfigState } from "@features/appConfig/appConfigSelectors";
 import {
   selectActiveNodeId,
   selectActiveWaypoint,
@@ -75,9 +76,11 @@ export const MapView = () => {
   const activeNodeId = useSelector(selectActiveNodeId());
   const showInfoPane = useSelector(selectInfoPane());
 
-  const { nodesFeatureCollection, edgesFeatureCollection, viewState, config } =
+  const { nodesFeatureCollection, edgesFeatureCollection, viewState } =
     useSelector(selectMapState());
 
+  const { style } = useSelector(selectMapConfigState());
+
   const waypoints = useSelector(selectAllWaypoints());
   const activeWaypoint = useSelector(selectActiveWaypoint());
 
@@ -243,7 +246,7 @@ export const MapView = () => {
         <Map
           id={MapIDs.MapView}
           reuseMaps={false} // ! Crashes map on switch back to map tab if set to `true`
-          mapStyle={config.style}
+          mapStyle={style}
           mapLib={maplibregl}
           onDragEnd={handleUpdateViewState}
           onZoomEnd={handleUpdateViewState}
diff --git a/src/components/Messaging/TextMessageBubble.tsx b/src/components/Messaging/TextMessageBubble.tsx
index 1ade078e..100caa69 100644
--- a/src/components/Messaging/TextMessageBubble.tsx
+++ b/src/components/Messaging/TextMessageBubble.tsx
@@ -85,7 +85,7 @@ const TextMessageBubble = ({
         <div
           className={`ml-auto ${
             type === "waypoint" ? "w-2/5" : "w-fit"
-          } max-w-[40%] rounded-l-lg rounded-br-lg border border-gray-200 dark:border-gray-400`}
+          } max-w-[40%] rounded-l-lg rounded-br-lg border border-gray-200 dark:border-gray-600`}
         >
           <p
             className={`px-3 py-2 rounded-tl-lg bg-gray-700 dark:bg-gray-300 text-sm font-normal text-gray-100 dark:text-gray-600 break-words border-b border-gray-400 dark:border-gray-600 ${
@@ -153,10 +153,10 @@ const TextMessageBubble = ({
   return (
     <div className={`${className}`}>
       <p className="flex flex-row justify-start mb-1 gap-2 items-baseline">
-        <span className="text-sm font-semibold text-gray-700">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">
           {usernameDisplayText}
         </span>
-        <span className="text-xs font-semibold text-gray-400">
+        <span className="text-xs font-semibold text-gray-400 dark:text-gray-400">
           {formatMessageTime(packet.rxTime)}
         </span>
       </p>
@@ -164,10 +164,10 @@ const TextMessageBubble = ({
       <div
         className={`mr-auto ${
           type === "waypoint" ? "w-2/5" : "w-fit"
-        } max-w-[40%] rounded-r-lg rounded-bl-lg border border-gray-200`}
+        } max-w-[40%] rounded-r-lg rounded-bl-lg border border-gray-200 dark:border-gray-600`}
       >
         <p
-          className={`px-3 py-2 rounded-tr-lg bg-white text-sm font-normal text-gray-600 break-words border-b border-gray-100 ${
+          className={`px-3 py-2 rounded-tr-lg bg-white dark:bg-gray-800 text-sm font-normal text-gray-600 dark:text-gray-300 break-words border-b border-gray-100 dark:border-gray-700 ${
             message.payload.type !== "waypoint" ? "rounded-b-lg" : ""
           }`}
         >
diff --git a/src/components/config/application/MapConfigPage.tsx b/src/components/config/application/MapConfigPage.tsx
index 669734fa..c5a00e21 100644
--- a/src/components/config/application/MapConfigPage.tsx
+++ b/src/components/config/application/MapConfigPage.tsx
@@ -8,8 +8,9 @@ import { v4 } from "uuid";
 
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
 import ConfigInput from "@components/config/ConfigInput";
-import { selectMapState } from "@features/map/mapSelectors";
-import { mapSliceActions } from "@features/map/mapSlice";
+
+import { appConfigSliceActions } from "@features/appConfig/appConfigSlice";
+import { selectMapConfigState } from "@app/features/appConfig/appConfigSelectors";
 
 export interface IMapConfigPageProps {
   className?: string;
@@ -23,16 +24,16 @@ const MapConfigPage = ({ className = "" }: IMapConfigPageProps) => {
   const { t } = useTranslation();
 
   const dispatch = useDispatch();
-  const { config } = useSelector(selectMapState());
+  const { style } = useSelector(selectMapConfigState());
 
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<MapConfigFormInput>({ defaultValues: { style: config.style } });
+  } = useForm<MapConfigFormInput>({ defaultValues: { style } });
 
   const handleSubmitSuccess = (data: MapConfigFormInput) => {
-    dispatch(mapSliceActions.updateConfig(data));
+    dispatch(appConfigSliceActions.setMapStyle(data.style));
   };
 
   const handleFormSubmit: FormEventHandler = (e) => {
diff --git a/src/features/appConfig/appConfigSagas.ts b/src/features/appConfig/appConfigSagas.ts
index ae2bef14..f2acd794 100644
--- a/src/features/appConfig/appConfigSagas.ts
+++ b/src/features/appConfig/appConfigSagas.ts
@@ -5,7 +5,7 @@ import {
   requestFetchLastTcpConnectionMeta,
   requestPersistLastTcpConnectionMeta,
 } from "@features/appConfig/appConfigActions";
-import { appConfigActions } from "@features/appConfig/appConfigSlice";
+import { appConfigSliceActions } from "@features/appConfig/appConfigSlice";
 import { requestSliceActions } from "@features/requests/requestReducer";
 
 import type { CommandError } from "@utils/errors";
@@ -30,7 +30,9 @@ function* fetchLastTcpConnectionMetaWorker(
       PersistedStateKeys.LastTcpConnection
     )) as IPersistedState[PersistedStateKeys.LastTcpConnection];
 
-    yield put(appConfigActions.setLastTcpConnection(persistedValue ?? null));
+    yield put(
+      appConfigSliceActions.setLastTcpConnection(persistedValue ?? null)
+    );
 
     yield put(requestSliceActions.setRequestSuccessful({ name: action.type }));
   } catch (error) {
diff --git a/src/features/appConfig/appConfigSelectors.ts b/src/features/appConfig/appConfigSelectors.ts
index acd1a64d..5770db79 100644
--- a/src/features/appConfig/appConfigSelectors.ts
+++ b/src/features/appConfig/appConfigSelectors.ts
@@ -1,7 +1,15 @@
 import type { RootState } from "@app/store";
-import type { TcpConnectionMeta } from "@features/appConfig/appConfigSlice";
+import type {
+  IMapConfigState,
+  TcpConnectionMeta,
+} from "@features/appConfig/appConfigSlice";
 
 export const selectPersistedTCPConnectionMeta =
   () =>
   (state: RootState): TcpConnectionMeta | null =>
     state.appConfig.lastTcpConnection;
+
+export const selectMapConfigState =
+  () =>
+  (state: RootState): IMapConfigState =>
+    state.appConfig.map;
diff --git a/src/features/appConfig/appConfigSlice.ts b/src/features/appConfig/appConfigSlice.ts
index 0f3b7c88..1a642422 100644
--- a/src/features/appConfig/appConfigSlice.ts
+++ b/src/features/appConfig/appConfigSlice.ts
@@ -5,12 +5,30 @@ export type TcpConnectionMeta = {
   port: number;
 };
 
+export interface IMapConfigState {
+  style: string;
+}
+
+export type ColorMode = "light" | "dark" | "system";
+
+export interface IGeneralConfigState {
+  colorMode: ColorMode;
+}
+
 export interface IAppConfigState {
   lastTcpConnection: TcpConnectionMeta | null;
+  map: IMapConfigState;
+  general: IGeneralConfigState;
 }
 
 export const initialAppConfigState: IAppConfigState = {
   lastTcpConnection: null,
+  map: {
+    style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+  },
+  general: {
+    colorMode: "system",
+  },
 };
 
 export const appConfigSlice = createSlice({
@@ -23,8 +41,14 @@ export const appConfigSlice = createSlice({
     ) => {
       state.lastTcpConnection = action.payload;
     },
+    setMapStyle: (state, action: PayloadAction<string>) => {
+      state.map.style = action.payload;
+    },
+    setColorMode: (state, action: PayloadAction<ColorMode>) => {
+      state.general.colorMode = action.payload;
+    },
   },
 });
 
-export const { actions: appConfigActions, reducer: appConfigReducer } =
+export const { actions: appConfigSliceActions, reducer: appConfigReducer } =
   appConfigSlice;
diff --git a/src/features/map/mapSlice.ts b/src/features/map/mapSlice.ts
index af2658fd..fa16847b 100644
--- a/src/features/map/mapSlice.ts
+++ b/src/features/map/mapSlice.ts
@@ -1,10 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import type { ViewState } from "react-map-gl";
 
-export interface IMapConfig {
-  style: string;
-}
-
 export interface IMapUIState {
   searchDockExpanded: boolean;
 }
@@ -13,7 +9,6 @@ export interface IMapState {
   viewState: Partial<ViewState>;
   nodesFeatureCollection: GeoJSON.FeatureCollection | null;
   edgesFeatureCollection: GeoJSON.FeatureCollection | null;
-  config: IMapConfig;
   mapUIState: IMapUIState;
 }
 
@@ -25,9 +20,6 @@ export const initialMapState: IMapState = {
   },
   nodesFeatureCollection: null,
   edgesFeatureCollection: null,
-  config: {
-    style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
-  },
   mapUIState: {
     searchDockExpanded: true,
   },
@@ -62,9 +54,6 @@ export const mapSlice = createSlice({
     ) => {
       state.edgesFeatureCollection = action.payload;
     },
-    updateConfig: (state, action: PayloadAction<Partial<IMapConfig>>) => {
-      state.config = { ...state.config, ...action.payload };
-    },
     setMapUIState: (state, action: PayloadAction<Partial<IMapUIState>>) => {
       state.mapUIState = { ...state.mapUIState, ...action.payload };
     },

From fe5e2e4a1a7353073ffb6bd1216853816bab2bda Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Thu, 27 Jul 2023 06:47:52 -0700
Subject: [PATCH 4/6] Added manual color mode selector with persistence

---
 .../config/application/GeneralConfigPage.tsx  |  79 ++++++++++
 .../config/application/MapConfigPage.tsx      |   6 +-
 .../pages/config/ApplicationSettingsPage.tsx  |  15 +-
 src/features/appConfig/appConfigActions.ts    |  14 +-
 src/features/appConfig/appConfigSagas.ts      | 149 +++++++++++++++++-
 src/features/appConfig/appConfigSelectors.ts  |   6 +
 src/features/appConfig/appConfigSlice.ts      |  17 +-
 src/locales/en/translation.json               |  11 ++
 src/utils/persistence.ts                      |  12 +-
 tailwind.config.cjs                           |   9 +-
 10 files changed, 298 insertions(+), 20 deletions(-)
 create mode 100644 src/components/config/application/GeneralConfigPage.tsx

diff --git a/src/components/config/application/GeneralConfigPage.tsx b/src/components/config/application/GeneralConfigPage.tsx
new file mode 100644
index 00000000..5d196b72
--- /dev/null
+++ b/src/components/config/application/GeneralConfigPage.tsx
@@ -0,0 +1,79 @@
+import React, { useMemo } from "react";
+import type { FormEventHandler } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { Save } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+
+import ConfigTitlebar from "@components/config/ConfigTitlebar";
+// import ConfigInput from "@components/config/ConfigInput";
+import ConfigSelect from "@components/config/ConfigSelect";
+
+import { requestPersistGeneralConfig } from "@features/appConfig/appConfigActions";
+import { selectGeneralConfigState } from "@features/appConfig/appConfigSelectors";
+import type { ColorMode } from "@features/appConfig/appConfigSlice";
+
+export interface IGeneralConfigPageProps {
+  className?: string;
+}
+
+type GeneralConfigFormInput = {
+  colorMode: ColorMode;
+};
+
+const GeneralConfigPage = ({ className = "" }: IGeneralConfigPageProps) => {
+  const { t } = useTranslation();
+
+  const dispatch = useDispatch();
+  const { colorMode } = useSelector(selectGeneralConfigState());
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<GeneralConfigFormInput>({ defaultValues: { colorMode } });
+
+  const handleSubmitSuccess = (data: GeneralConfigFormInput) => {
+    dispatch(requestPersistGeneralConfig({ colorMode: data.colorMode }));
+  };
+
+  const handleFormSubmit: FormEventHandler = (e) => {
+    e.preventDefault();
+    void handleSubmit(handleSubmitSuccess, console.warn)(e);
+  };
+
+  const formId = useMemo(() => v4(), []);
+
+  return (
+    <div className={`${className} flex-1 h-screen`}>
+      <ConfigTitlebar
+        title={t("applicationSettings.general.title")}
+        subtitle={t("applicationSettings.general.description")}
+        renderIcon={(c) => <Save strokeWidth={1.5} className={`${c}`} />}
+        buttonTooltipText={t("applicationSettings.saveChanges")}
+        buttonProps={{ type: "submit", form: formId }}
+      >
+        <form id={formId} onSubmit={handleFormSubmit}>
+          <ConfigSelect
+            text={t("applicationSettings.general.colorMode.title")}
+            error={errors.colorMode?.message}
+            {...register("colorMode")}
+          >
+            <option value="system">
+              {t("applicationSettings.general.colorMode.system")}
+            </option>
+            <option value="light">
+              {t("applicationSettings.general.colorMode.light")}
+            </option>
+            <option value="dark">
+              {t("applicationSettings.general.colorMode.dark")}
+            </option>
+          </ConfigSelect>
+        </form>
+      </ConfigTitlebar>
+    </div>
+  );
+};
+
+export default GeneralConfigPage;
diff --git a/src/components/config/application/MapConfigPage.tsx b/src/components/config/application/MapConfigPage.tsx
index c5a00e21..2d971480 100644
--- a/src/components/config/application/MapConfigPage.tsx
+++ b/src/components/config/application/MapConfigPage.tsx
@@ -9,8 +9,8 @@ import { v4 } from "uuid";
 import ConfigTitlebar from "@components/config/ConfigTitlebar";
 import ConfigInput from "@components/config/ConfigInput";
 
-import { appConfigSliceActions } from "@features/appConfig/appConfigSlice";
-import { selectMapConfigState } from "@app/features/appConfig/appConfigSelectors";
+import { requestPersistMapConfig } from "@features/appConfig/appConfigActions";
+import { selectMapConfigState } from "@features/appConfig/appConfigSelectors";
 
 export interface IMapConfigPageProps {
   className?: string;
@@ -33,7 +33,7 @@ const MapConfigPage = ({ className = "" }: IMapConfigPageProps) => {
   } = useForm<MapConfigFormInput>({ defaultValues: { style } });
 
   const handleSubmitSuccess = (data: MapConfigFormInput) => {
-    dispatch(appConfigSliceActions.setMapStyle(data.style));
+    dispatch(requestPersistMapConfig({ style: data.style }));
   };
 
   const handleFormSubmit: FormEventHandler = (e) => {
diff --git a/src/components/pages/config/ApplicationSettingsPage.tsx b/src/components/pages/config/ApplicationSettingsPage.tsx
index 3b4f8763..71a8eb5c 100644
--- a/src/components/pages/config/ApplicationSettingsPage.tsx
+++ b/src/components/pages/config/ApplicationSettingsPage.tsx
@@ -6,16 +6,27 @@ import i18next from "@app/i18n";
 
 import ConfigLayout from "@components/config/ConfigLayout";
 import ConfigOption from "@components/config/ConfigOption";
+
+import GeneralConfigPage from "@components/config/application/GeneralConfigPage";
 import MapConfigPage from "@components/config/application/MapConfigPage";
 
+import type { IAppConfigState } from "@features/appConfig/appConfigSlice";
+
 export const ApplicationSettingsOptions = {
+  general: i18next.t("applicationSettings.options.general"),
   map: i18next.t("applicationSettings.options.map"),
 };
 
-const _ActiveOption = ({ activeOption }: { activeOption: string }) => {
+const _ActiveOption = ({
+  activeOption,
+}: {
+  activeOption: keyof IAppConfigState;
+}) => {
   const { t } = useTranslation();
 
   switch (activeOption) {
+    case "general":
+      return <GeneralConfigPage />;
     case "map":
       return <MapConfigPage />;
     default:
@@ -33,7 +44,7 @@ const ApplicationSettingsPage = () => {
   const { t } = useTranslation();
 
   const [activeOption, setActiveOption] =
-    useState<keyof typeof ApplicationSettingsOptions>("map");
+    useState<keyof typeof ApplicationSettingsOptions>("general");
 
   return (
     <div className="flex-1">
diff --git a/src/features/appConfig/appConfigActions.ts b/src/features/appConfig/appConfigActions.ts
index 18ad4084..d2560446 100644
--- a/src/features/appConfig/appConfigActions.ts
+++ b/src/features/appConfig/appConfigActions.ts
@@ -1,5 +1,9 @@
 import { createAction } from "@reduxjs/toolkit";
-import type { TcpConnectionMeta } from "@features/appConfig/appConfigSlice";
+import type {
+  IGeneralConfigState,
+  IMapConfigState,
+  TcpConnectionMeta,
+} from "@features/appConfig/appConfigSlice";
 
 export const requestFetchLastTcpConnectionMeta = createAction(
   "@appConfig/fetch-last-tcp-connection-meta"
@@ -9,3 +13,11 @@ export const requestPersistLastTcpConnectionMeta =
   createAction<TcpConnectionMeta | null>(
     "@appConfig/persist-last-tcp-connection-meta"
   );
+
+export const requestPersistGeneralConfig = createAction<IGeneralConfigState>(
+  "@appConfig/persist-general-config"
+);
+
+export const requestPersistMapConfig = createAction<IMapConfigState>(
+  "@appConfig/persist-map-config"
+);
diff --git a/src/features/appConfig/appConfigSagas.ts b/src/features/appConfig/appConfigSagas.ts
index f2acd794..cf1e53ba 100644
--- a/src/features/appConfig/appConfigSagas.ts
+++ b/src/features/appConfig/appConfigSagas.ts
@@ -1,11 +1,17 @@
-import { all, put, takeEvery } from "redux-saga/effects";
+import { all, call, put, takeEvery } from "redux-saga/effects";
 import { Store } from "tauri-plugin-store-api";
 
 import {
   requestFetchLastTcpConnectionMeta,
   requestPersistLastTcpConnectionMeta,
+  requestPersistGeneralConfig,
+  requestPersistMapConfig,
 } from "@features/appConfig/appConfigActions";
-import { appConfigSliceActions } from "@features/appConfig/appConfigSlice";
+import {
+  ColorMode,
+  appConfigSliceActions,
+} from "@features/appConfig/appConfigSlice";
+import { requestInitializeApplication } from "@features/device/deviceActions";
 import { requestSliceActions } from "@features/requests/requestReducer";
 
 import type { CommandError } from "@utils/errors";
@@ -78,6 +84,142 @@ function* persistLastTcpConnectionMetaWorker(
   }
 }
 
+/**
+ * Check if dark mode was manually selected or if system color mode is dark
+ * Add or remove the "dark" class from the document based on the selected mode
+ * https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
+ * @throws {Error} If the browser doesn't support the `matchMedia` API
+ * @param colorMode Color mode to apply a CSS class for
+ */
+function setColorModeClassWorker(colorMode: ColorMode) {
+  if (
+    colorMode === "dark" || // Manual dark mode
+    (colorMode === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches) // System dark mode
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}
+
+function* persistGeneralConfigWorker(
+  action: ReturnType<typeof requestPersistGeneralConfig>
+) {
+  try {
+    yield put(requestSliceActions.setRequestPending({ name: action.type }));
+
+    yield setValueInPersistedStore(
+      defaultStore,
+      PersistedStateKeys.GeneralConfig,
+      action.payload
+    );
+
+    // Fetch value from store to ensure it was set correctly
+    const persistedValue = (yield getValueFromPersistedStore(
+      defaultStore,
+      PersistedStateKeys.GeneralConfig
+    )) as IPersistedState[PersistedStateKeys.GeneralConfig];
+
+    if (JSON.stringify(persistedValue) !== JSON.stringify(action.payload)) {
+      throw new Error("Failed to persist general application config");
+    }
+
+    yield call(setColorModeClassWorker, action.payload.colorMode);
+
+    // Update redux cache value
+    yield put(appConfigSliceActions.updateGeneralConfig(action.payload));
+
+    yield put(requestSliceActions.setRequestSuccessful({ name: action.type }));
+  } catch (error) {
+    yield put(
+      requestSliceActions.setRequestFailed({
+        name: action.type,
+        message: (error as CommandError).message,
+      })
+    );
+  }
+}
+
+function* persistMapConfigWorker(
+  action: ReturnType<typeof requestPersistMapConfig>
+) {
+  try {
+    yield put(requestSliceActions.setRequestPending({ name: action.type }));
+
+    yield setValueInPersistedStore(
+      defaultStore,
+      PersistedStateKeys.MapConfig,
+      action.payload
+    );
+
+    // Fetch value from store to ensure it was set correctly
+    const persistedValue = (yield getValueFromPersistedStore(
+      defaultStore,
+      PersistedStateKeys.MapConfig
+    )) as IPersistedState[PersistedStateKeys.MapConfig];
+
+    if (JSON.stringify(persistedValue) !== JSON.stringify(action.payload)) {
+      throw new Error("Failed to persist map config");
+    }
+
+    // Update redux cache value
+    yield put(appConfigSliceActions.updateMapConfig(action.payload));
+
+    yield put(requestSliceActions.setRequestSuccessful({ name: action.type }));
+  } catch (error) {
+    yield put(
+      requestSliceActions.setRequestFailed({
+        name: action.type,
+        message: (error as CommandError).message,
+      })
+    );
+  }
+}
+
+function* initializeAppConfigWorker(
+  action: ReturnType<typeof requestInitializeApplication>
+) {
+  try {
+    yield put(requestSliceActions.setRequestPending({ name: action.type }));
+
+    const persistedGeneralConfig = (yield getValueFromPersistedStore(
+      defaultStore,
+      PersistedStateKeys.GeneralConfig
+    )) as IPersistedState[PersistedStateKeys.GeneralConfig];
+
+    if (persistedGeneralConfig) {
+      yield put(
+        appConfigSliceActions.updateGeneralConfig(persistedGeneralConfig)
+      );
+    }
+
+    const persistedMapConfig = (yield getValueFromPersistedStore(
+      defaultStore,
+      PersistedStateKeys.MapConfig
+    )) as IPersistedState[PersistedStateKeys.MapConfig];
+
+    if (persistedMapConfig) {
+      yield put(appConfigSliceActions.updateMapConfig(persistedMapConfig));
+    }
+
+    // Initialize color theme when data loaded
+    yield call(
+      setColorModeClassWorker,
+      persistedGeneralConfig?.colorMode ?? "system"
+    );
+
+    yield put(requestSliceActions.setRequestSuccessful({ name: action.type }));
+  } catch (error) {
+    yield put(
+      requestSliceActions.setRequestFailed({
+        name: action.type,
+        message: (error as CommandError).message,
+      })
+    );
+  }
+}
+
 export function* appConfigSaga() {
   yield all([
     takeEvery(
@@ -88,5 +230,8 @@ export function* appConfigSaga() {
       requestPersistLastTcpConnectionMeta.type,
       persistLastTcpConnectionMetaWorker
     ),
+    takeEvery(requestPersistGeneralConfig.type, persistGeneralConfigWorker),
+    takeEvery(requestPersistMapConfig.type, persistMapConfigWorker),
+    takeEvery(requestInitializeApplication.type, initializeAppConfigWorker),
   ]);
 }
diff --git a/src/features/appConfig/appConfigSelectors.ts b/src/features/appConfig/appConfigSelectors.ts
index 5770db79..d0259556 100644
--- a/src/features/appConfig/appConfigSelectors.ts
+++ b/src/features/appConfig/appConfigSelectors.ts
@@ -1,5 +1,6 @@
 import type { RootState } from "@app/store";
 import type {
+  IGeneralConfigState,
   IMapConfigState,
   TcpConnectionMeta,
 } from "@features/appConfig/appConfigSlice";
@@ -9,6 +10,11 @@ export const selectPersistedTCPConnectionMeta =
   (state: RootState): TcpConnectionMeta | null =>
     state.appConfig.lastTcpConnection;
 
+export const selectGeneralConfigState =
+  () =>
+  (state: RootState): IGeneralConfigState =>
+    state.appConfig.general;
+
 export const selectMapConfigState =
   () =>
   (state: RootState): IMapConfigState =>
diff --git a/src/features/appConfig/appConfigSlice.ts b/src/features/appConfig/appConfigSlice.ts
index 1a642422..5a3ed4cc 100644
--- a/src/features/appConfig/appConfigSlice.ts
+++ b/src/features/appConfig/appConfigSlice.ts
@@ -22,7 +22,10 @@ export interface IAppConfigState {
 }
 
 export const initialAppConfigState: IAppConfigState = {
+  // This is not intended to be manually updated by the user
+  // Might be worth adding a new "hidden" object
   lastTcpConnection: null,
+
   map: {
     style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
   },
@@ -41,11 +44,17 @@ export const appConfigSlice = createSlice({
     ) => {
       state.lastTcpConnection = action.payload;
     },
-    setMapStyle: (state, action: PayloadAction<string>) => {
-      state.map.style = action.payload;
+    updateGeneralConfig: (
+      state,
+      action: PayloadAction<Partial<IGeneralConfigState>>
+    ) => {
+      state.general = { ...state.general, ...action.payload };
     },
-    setColorMode: (state, action: PayloadAction<ColorMode>) => {
-      state.general.colorMode = action.payload;
+    updateMapConfig: (
+      state,
+      action: PayloadAction<Partial<IMapConfigState>>
+    ) => {
+      state.map = { ...state.map, ...action.payload };
     },
   },
 });
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index bd04d19a..a9510194 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -474,8 +474,19 @@
     "saveChanges": "Save Changes",
     "unknownOption": "Unknown option selected",
     "options": {
+      "general": "General Settings",
       "map": "Map Settings"
     },
+    "general": {
+      "title": "General Settings",
+      "description": "Edit general application settings",
+      "colorMode": {
+        "title": "Application Color Mode",
+        "light": "Light Mode",
+        "dark": "Dark Mode",
+        "system": "System Default"
+      }
+    },
     "map": {
       "title": "Map Settings",
       "description": "Edit application map settings",
diff --git a/src/utils/persistence.ts b/src/utils/persistence.ts
index 72e05409..bd492f3c 100644
--- a/src/utils/persistence.ts
+++ b/src/utils/persistence.ts
@@ -1,16 +1,22 @@
-import type { TcpConnectionMeta } from "@features/appConfig/appConfigSlice";
+import type {
+  IGeneralConfigState,
+  IMapConfigState,
+  TcpConnectionMeta,
+} from "@features/appConfig/appConfigSlice";
 import type { Store } from "tauri-plugin-store-api";
 
 export const DEFAULT_STORE_FILE_NAME = "config.bin";
 
 export enum PersistedStateKeys {
   LastTcpConnection = "lastTcpConnection",
-  OtherKey = "otherKey",
+  GeneralConfig = "generalConfig",
+  MapConfig = "mapConfig",
 }
 
 export interface IPersistedState {
   [PersistedStateKeys.LastTcpConnection]?: TcpConnectionMeta;
-  [PersistedStateKeys.OtherKey]?: string;
+  [PersistedStateKeys.GeneralConfig]?: IGeneralConfigState;
+  [PersistedStateKeys.MapConfig]?: IMapConfigState;
 }
 
 export function* setValueInPersistedStore<TKey extends keyof IPersistedState>(
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6834dfab..8ef11183 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,14 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {
       borderWidth: {
-        '065': '0.65px',
-      }
+        "065": "0.65px",
+      },
     },
   },
-  plugins: [
-    require("tailwindcss-radix")(),
-  ],
+  plugins: [require("tailwindcss-radix")()],
 };

From 4beae9194b5a9dcc05bdb4fcf714bf5a14605041 Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Thu, 27 Jul 2023 06:54:48 -0700
Subject: [PATCH 5/6] Removed WIP button from app settings page

---
 .../pages/config/ApplicationSettingsPage.tsx          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/config/ApplicationSettingsPage.tsx b/src/components/pages/config/ApplicationSettingsPage.tsx
index 71a8eb5c..c93f271b 100644
--- a/src/components/pages/config/ApplicationSettingsPage.tsx
+++ b/src/components/pages/config/ApplicationSettingsPage.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Construction } from "lucide-react";
 
 import i18next from "@app/i18n";
 
@@ -51,11 +50,11 @@ const ApplicationSettingsPage = () => {
       <ConfigLayout
         title={t("applicationSettings.title")}
         backtrace={[t("sidebar.applicationSettings")]}
-        renderTitleIcon={(c) => (
-          <Construction strokeWidth={1.5} className={`${c}`} />
-        )}
-        titleIconTooltip={t("general.wip")}
-        onTitleIconClick={() => console.warn(t("general.wip"))}
+        // Hides the title icon as the user doesn't need to take secondary action
+        // to persist application settings after committing within a pane
+        renderTitleIcon={() => <></>}
+        titleIconTooltip={""}
+        onTitleIconClick={() => null}
         renderOptions={() =>
           Object.entries(ApplicationSettingsOptions).map(([k, displayName]) => (
             <ConfigOption

From ed36968fd75d4fbd0f18489a705660de8d79f0d8 Mon Sep 17 00:00:00 2001
From: Adam McQuilkin <46639306+ajmcquilkin@users.noreply.github.com>
Date: Thu, 27 Jul 2023 06:59:07 -0700
Subject: [PATCH 6/6] Minor tweaks

---
 src/components/NodeSearch/NodeSearchInput.tsx           | 2 +-
 src/components/config/application/GeneralConfigPage.tsx | 6 +++---
 src/locales/en/translation.json                         | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/NodeSearch/NodeSearchInput.tsx b/src/components/NodeSearch/NodeSearchInput.tsx
index 01d52e36..91e5e025 100644
--- a/src/components/NodeSearch/NodeSearchInput.tsx
+++ b/src/components/NodeSearch/NodeSearchInput.tsx
@@ -14,7 +14,7 @@ const NodeSearchInput = ({
   return (
     <div className="flex-grow">
       <input
-        className="w-full h-full px-4 py-3 default-overlay font-sans text-base font-normal text-gray-500 dark:text-gray-300 placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:text-gray-300"
+        className="w-full h-full px-4 py-3 default-overlay font-sans text-base font-normal text-gray-500 dark:text-gray-300 placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:text-gray-400"
         type="text"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
diff --git a/src/components/config/application/GeneralConfigPage.tsx b/src/components/config/application/GeneralConfigPage.tsx
index 5d196b72..cb6dadd7 100644
--- a/src/components/config/application/GeneralConfigPage.tsx
+++ b/src/components/config/application/GeneralConfigPage.tsx
@@ -60,15 +60,15 @@ const GeneralConfigPage = ({ className = "" }: IGeneralConfigPageProps) => {
             error={errors.colorMode?.message}
             {...register("colorMode")}
           >
-            <option value="system">
-              {t("applicationSettings.general.colorMode.system")}
-            </option>
             <option value="light">
               {t("applicationSettings.general.colorMode.light")}
             </option>
             <option value="dark">
               {t("applicationSettings.general.colorMode.dark")}
             </option>
+            <option value="system">
+              {t("applicationSettings.general.colorMode.system")}
+            </option>
           </ConfigSelect>
         </form>
       </ConfigTitlebar>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index a9510194..186afbaf 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -484,7 +484,7 @@
         "title": "Application Color Mode",
         "light": "Light Mode",
         "dark": "Dark Mode",
-        "system": "System Default"
+        "system": "Follow System"
       }
     },
     "map": {