From 68a23531a377cf99dafc9a2e3de5dca4aff3f5cc Mon Sep 17 00:00:00 2001
From: Justin Yang <justiny3497@gmail.com>
Date: Fri, 7 Feb 2025 23:29:28 -0800
Subject: [PATCH] Add dark mode UI to Topbar component

---
 src/renderer/Topbar.css | 22 ++++++++++++++++++++--
 src/renderer/Topbar.tsx |  5 ++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/renderer/Topbar.css b/src/renderer/Topbar.css
index 4a747c0..a8b5a73 100644
--- a/src/renderer/Topbar.css
+++ b/src/renderer/Topbar.css
@@ -1,10 +1,28 @@
-.Topbar {
+
+/* light mode */
+/* unoptimized code... o-o */
+.Topbar-light { 
+  width: calc(100% - 20px);
+  padding: 10px;
+  font-family: Arial, sans-serif;
+  border-bottom: 1px solid var(--body-accent-color);
+}
+.Topbar-light > * {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+/* dark mode */
+.Topbar-dark { 
   width: calc(100% - 20px);
   padding: 10px;
   font-family: Arial, sans-serif;
   border-bottom: 1px solid var(--body-accent-color);
+  color: white;
+  background-color: #121212;
 }
-.Topbar > * {
+.Topbar-dark > * {
   height: 100%;
   display: flex;
   flex-direction: row;
diff --git a/src/renderer/Topbar.tsx b/src/renderer/Topbar.tsx
index 41b185f..cd7d849 100644
--- a/src/renderer/Topbar.tsx
+++ b/src/renderer/Topbar.tsx
@@ -20,6 +20,7 @@ const FAIR_LATENCY_MS = 200;
  * @param props.robotBatteryVoltage - battery voltage in volts of the currently connected robot. The
  * value is not displayed to the user if robotLatencyMs is -1
  * @param props.dawnVersion - version string of Dawn
+ * @param props.isDarkMode - whether UI is in dark mode
  */
 export default function Topbar({
   onConnectionConfigModalOpen,
@@ -27,12 +28,14 @@ export default function Topbar({
   robotBatteryVoltage,
   robotLatencyMs,
   dawnVersion,
+  isDarkMode,
 }: {
   onConnectionConfigModalOpen: () => void;
   onHelpModalOpen: () => void;
   robotBatteryVoltage: number;
   robotLatencyMs: number;
   dawnVersion: string;
+  isDarkMode: boolean;
 }) {
   let batteryColor;
   if (robotBatteryVoltage > GOOD_BATTERY_VOLTAGE) {
@@ -66,7 +69,7 @@ export default function Topbar({
       </>
     );
   return (
-    <div className="Topbar">
+    <div className={`Topbar-${isDarkMode ? 'dark' : 'light'}`}>
       <div className="Topbar-left-group">
         <div className="Topbar-dawn-version">Dawn v{dawnVersion}</div>
         {robotInfo}