Darkmode

src/renderer/App.css

@@ -1,8 +1,8 @@
 body {
   margin: 0;
 }
-
-.App {
+/* Light Mode */
+.App-light {
   --window-head-color: navy;
   --window-head-text-color: white;
   --window-accent-color: grey;
@@ -15,6 +15,20 @@ body {
   height: 100vh;
   user-select: none;
 }
+/* Dark Mode */
+.App-dark {
+  --window-head-color: #1F1A24;
+  --window-head-text-color: white;
+  --window-accent-color: grey;
+  --body-color: #1F1F1F;
+  --body-text-color: #FFFFFF;
+  --body-accent-color: lightgray;
+
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  user-select: none;
+}
 .App-cols {
   display: flex;
   flex-direction: row;
@@ -38,3 +52,9 @@ body {
 .App-confirm-dialog-text {
   margin-top: 0;
 }
+.link-dark {
+  color: lightblue;
+}
+.link-light {
+  color: blue;
+}

src/renderer/App.tsx

@@ -114,6 +114,8 @@ export default function App() {
   const [deviceInfoState, setDeviceInfoState] = useState(
     [] as DeviceInfoState[],
   );
+  // Dark Mode UI State
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   const changeActiveModal = (newModalName: string) => {
     if (document.activeElement instanceof HTMLElement) {
@@ -177,6 +179,9 @@ export default function App() {
     window.electron.ipcRenderer.sendMessage('main-update-robot-mode', mode);
     setRobotRunning(mode !== RobotRunMode.IDLE);
   };
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
 
   const closeWindow = useCallback(() => {
     window.electron.ipcRenderer.sendMessage('main-quit', {
@@ -409,7 +414,7 @@ export default function App() {
 
   return (
     <StrictMode>
-      <div className="App">
+      <div className={`App-${isDarkMode ? 'dark' : 'light'}`}>
         <Topbar
           onConnectionConfigModalOpen={() =>
             changeActiveModal('ConnectionConfig')
@@ -418,6 +423,7 @@ export default function App() {
           dawnVersion={dawnVersion}
           robotLatencyMs={robotLatencyMs}
           robotBatteryVoltage={robotBatteryVoltage}
+          isDarkMode={isDarkMode}
         />
         <div className="App-cols">
           <Editor
@@ -456,14 +462,17 @@ export default function App() {
                 v === 'on' ? 'offEdge' : 'on',
               );
             }}
+            isDarkMode={isDarkMode}
+            onToggleDarkMode={toggleDarkMode}
           />
           <ResizeBar
             onStartResize={startEditorResize}
             onUpdateResize={updateEditorResize}
             onEndResize={endEditorResize}
             axis="x"
+            isDarkMode={isDarkMode}
           />
-          <DeviceInfo deviceStates={deviceInfoState} />
+          <DeviceInfo deviceStates={deviceInfoState} isDarkMode={isDarkMode} />
         </div>
         {consoleIsOpen && (
           <>
@@ -472,8 +481,13 @@ export default function App() {
               onUpdateResize={updateColsResize}
               onEndResize={endColsResize}
               axis="y"
+              isDarkMode={isDarkMode}
+            />
+            <AppConsole
+              height={consoleSize}
+              messages={consoleMsgs}
+              isDarkMode={isDarkMode}
             />
-            <AppConsole height={consoleSize} messages={consoleMsgs} />
           </>
         )}
         <div className="App-modal-container">
@@ -484,11 +498,17 @@ export default function App() {
             IPAddress={IPAddress}
             FieldIPAddress={FieldIPAddress}
             FieldStationNum={FieldStationNum}
+            isDarkMode={isDarkMode}
+          />
+          <HelpModal
+            isActive={activeModal === 'Help'}
+            onClose={closeModal}
+            isDarkMode={isDarkMode}
           />
-          <HelpModal isActive={activeModal === 'Help'} onClose={closeModal} />
           <GamepadInfoModal
             isActive={activeModal === 'GamepadInfo'}
             onClose={closeModal}
+            isDarkMode={isDarkMode}
           />
           <ConfirmModal
             isActive={activeModal === 'DirtyLoadConfirm'}
@@ -499,6 +519,7 @@ export default function App() {
               });
             }}
             modalTitle="Confirm load"
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               You have unsaved changes. Really load?
@@ -510,6 +531,7 @@ export default function App() {
             onConfirm={closeWindow}
             modalTitle="Confirm quit"
             noAutoClose
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               You have unsaved changes. Really quit?
@@ -520,6 +542,7 @@ export default function App() {
             onClose={closeModal}
             onConfirm={() => uploadDownloadFile(true)}
             modalTitle="Confirm upload"
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               Unsaved changes in the editor will not be uploaded. Really upload?
@@ -538,6 +561,7 @@ export default function App() {
             onClose={closeModal}
             onConfirm={() => uploadDownloadFile(false)}
             modalTitle="Confirm download"
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               You have unsaved changes. Really replace editor contents with
@@ -549,6 +573,7 @@ export default function App() {
             onClose={closeModal}
             onConfirm={createNewFile}
             modalTitle="Confirm create new file"
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               You have unsaved changes. Really close file?
@@ -559,6 +584,7 @@ export default function App() {
             onClose={closeModal}
             onConfirm={loadStaffCode}
             modalTitle="Confirm load staff code"
+            isDarkMode={isDarkMode}
           >
             <p className="App-confirm-dialog-text">
               You have unsaved changes. Really replace contents of editor with

src/renderer/AppConsole.css

@@ -7,7 +7,25 @@
   flex-shrink: 0;
   user-select: text;
 }
-.AppConsole-inner {
+/* Light Mode */
+.AppConsole-light {
+  padding: 10px;
+  font-family: "Courier New", monospace;
+  min-height: 0;
+  height: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  user-select: text;
+}
+.AppConsole-message-robot-info-light {
+  padding-left: 4px;
+  border-left: 6px solid var(--window-accent-color);
+}
+.AppConsole-message-light {
+  padding: 2px;
+  text-wrap: wrap;
+}
+.AppConsole-inner-light {
   height: 100%;
   background-color: #eee;
   overflow-y: scroll;
@@ -17,19 +35,62 @@
   min-height: 0;
   scroll-behavior: smooth;
 }
-.AppConsole-message {
-  padding: 2px;
-  text-wrap: wrap;
-}
-.AppConsole-message-dawn-err {
+.AppConsole-message-dawn-err-light {
   color: red;
 }
-.AppConsole-message-robot-err {
+.AppConsole-message-robot-err-light {
   background-color: salmon;
   padding-left: 4px;
   border-left: 6px solid crimson;
 }
-.AppConsole-message-robot-info {
+/* Dark Mode */
+.AppConsole-dark {
+  padding: 10px;
+  font-family: "Courier New", monospace;
+  min-height: 0;
+  height: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  user-select: text;
+  background-color: #121212;
+}
+.AppConsole-message-robot-info-dark {
   padding-left: 4px;
   border-left: 6px solid var(--window-accent-color);
+  color: #FFFFFF
+}
+.AppConsole-message-dark {
+  padding: 2px;
+  text-wrap: wrap;
+  color: #FFFFFF;
+}
+.AppConsole-inner-dark {
+  height: 100%;
+  background-color: #1E1E1E;
+  overflow-y: scroll;
+  word-break: break-word;
+  margin: 0;
+  margin-bottom: 50px;
+  padding: 0 0 0 10px;
+  min-height: 0;
+  scroll-behavior: smooth;
+}
+.AppConsole-message-dawn-err-dark {
+  color: #f44336;
+}
+.AppConsole-message-robot-err-dark {
+  background-color: #ED6C02;
+  padding-left: 4px;
+  border-left: 6px solid crimson;
+}
+.AppConsole-inner-dark::-webkit-scrollbar {
+  width: 10px;
+  background-color: #2E2E2E;
+}
+.AppConsole-inner-dark::-webkit-scrollbar-thumb {
+  background-color: #6b6b6b;
+  border-radius: 4px;
 }
+.AppConsole-inner-dark::-webkit-scrollbar-thumb:hover {
+  background-color: #7f7f7f;
+}

src/renderer/AppConsole.tsx

@@ -7,13 +7,16 @@ import './AppConsole.css';
  * @param props - props
  * @param props.height - the height of the console in pixels
  * @param props.messages - array of console messages to display
+ * @param props.isDarkMode - whether UI is in dark mode
  */
 export default function AppConsole({
   height,
   messages,
+  isDarkMode,
 }: {
   height: number;
   messages: AppConsoleMessage[];
+  isDarkMode: boolean;
 }) {
   // Add autoscroll feature to AppConsole by setting the current scrollTop prop to the current scrollHeight value
   const consoleRef = useRef<HTMLPreElement>(null);
@@ -25,12 +28,20 @@ export default function AppConsole({
   }, [messages]);
 
   return (
-    <div className="AppConsole" style={{ height }}>
-      <pre ref={consoleRef} className="AppConsole-inner">
+    <div
+      className={`AppConsole-${isDarkMode ? 'dark' : 'light'}`}
+      style={{ height }}
+    >
+      <pre
+        ref={consoleRef}
+        className={`AppConsole-inner-${isDarkMode ? 'dark' : 'light'}`}
+      >
         {messages.map((msg: AppConsoleMessage) => (
           <div
             key={msg.uuid}
-            className={`AppConsole-message AppConsole-message-${msg.type}`}
+            className={`AppConsole-message-${
+              isDarkMode ? 'dark' : 'light'
+            } AppConsole-message-${msg.type}-${isDarkMode ? 'dark' : 'light'}`}
           >
             {msg.text}
           </div>