From 86a26d07cae24dd7153771ce1f33ac20cf000573 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 1 Dec 2022 16:25:28 -0600
Subject: [PATCH] StatusBar: always use dark mode styling

Since the background doesn't change, we shouldn't change the foreground
either. White shows up better than black on the blue, so we prefer the
dark mode styling.
---
 src/status-bar/StatusBar.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/status-bar/StatusBar.tsx b/src/status-bar/StatusBar.tsx
index 6e4622a5..1cc46350 100644
--- a/src/status-bar/StatusBar.tsx
+++ b/src/status-bar/StatusBar.tsx
@@ -3,6 +3,7 @@
 
 import {
     Button,
+    Classes,
     Icon,
     IconSize,
     Intent,
@@ -10,6 +11,7 @@ import {
     Spinner,
 } from '@blueprintjs/core';
 import { Classes as Classes2, Popover2, Popover2Props } from '@blueprintjs/popover2';
+import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { BleConnectionState } from '../ble/reducers';
 import { CompletionEngineStatus } from '../editor/redux/codeCompletion';
@@ -142,7 +144,11 @@ const StatusBar: React.VFC = (_props) => {
     const connection = useSelector((s) => s.ble.connection);
 
     return (
-        <div className="pb-status-bar" role="status" aria-live="off">
+        <div
+            className={classNames('pb-status-bar', Classes.DARK)}
+            role="status"
+            aria-live="off"
+        >
             <div className="pb-status-bar-group">
                 <CompletionEngineIndicator />
             </div>