Add dark mode UI to Topbar component

pioneers · Feb 8, 2025 · 68a2353 · 68a2353
1 parent 916c5b9
commit 68a2353
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -20,19 +20,22 @@ 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,
   onHelpModalOpen,
   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}