dark mode fixes

eez-open · Nov 9, 2024 · c1c8405 · c1c8405
1 parent 8178e78
commit c1c8405
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 8 deletions.
diff --git a/packages/eez-studio-ui/_images/eez_studio_logo_with_title_dark.png b/packages/eez-studio-ui/_images/eez_studio_logo_with_title_dark.png
diff --git a/packages/eez-studio-ui/_stylesheets/app.less b/packages/eez-studio-ui/_stylesheets/app.less
@@ -476,8 +476,10 @@ input::placeholder {
 }
 
 button.EezStudio_Action {
-    &:active {
-        transform: translate(1px, 1px);
+    &:not(:disabled) {
+        &:active {
+            transform: translate(1px, 1px);
+        }
     }
 
     &:not(.btn-outline-success, .btn-outline-danger) {

diff --git a/packages/eez-studio-ui/_stylesheets/vars.less b/packages/eez-studio-ui/_stylesheets/vars.less
@@ -1,7 +1,7 @@
 @backgroundColor: var(--bs-body-bg);
 @textColor: var(--bs-body-color);
 @sectionBackgroundColor: #f0f0f0;
-@borderColor: #e0e0e0;
+@borderColor: #e2e2e2;
 @darkBorderColor: #c5c5c5;
 @panelHeaderColor: var(--bs-tertiary-bg);
 @selectionBackgroundColor: #337bb7;
@@ -93,7 +93,7 @@
 @componentShadow: 1px 1px 4px rgba(22, 33, 74, 0.2);
 @componentBodyShadow: none;
 
-@panelHeaderColorInsideFlexLayout: #e6eaed;
+@panelHeaderColorInsideFlexLayout: var(--bs-tertiary-bg);
 
 @formControlBorderColor: #ced4da;
 

diff --git a/packages/eez-studio-ui/about-box.tsx b/packages/eez-studio-ui/about-box.tsx
@@ -7,6 +7,7 @@ import { showDialog, Dialog } from "eez-studio-ui/dialog";
 import { Loader } from "eez-studio-ui/loader";
 
 import { isArray } from "eez-studio-shared/util";
+import { settingsController } from "home/settings";
 
 const STUDIO_RELEASES_URL =
     "https://api.github.com/repos/eez-open/studio/releases";
@@ -177,7 +178,13 @@ const AboutBox = observer(
                 <Dialog cancelButtonText="Close">
                     <div className="EezStudio_AboutBox">
                         <div className="EezStudio_Logo">
-                            <img src="../eez-studio-ui/_images/eez_studio_logo_with_title.png"></img>
+                            <img
+                                src={
+                                    settingsController.isDarkTheme
+                                        ? "../eez-studio-ui/_images/eez_studio_logo_with_title_dark.png"
+                                        : "../eez-studio-ui/_images/eez_studio_logo_with_title.png"
+                                }
+                            ></img>
                         </div>
 
                         <div className="EezStudio_Version">
@@ -204,7 +211,7 @@ const AboutBox = observer(
                         {this.versionInfo}
 
                         <button
-                            className="EezStudio_CheckForUpdate btn btn-sm btn-light"
+                            className="EezStudio_CheckForUpdate btn btn-sm btn-secondary"
                             onClick={this.checkForUpdates}
                             disabled={this.checkingForUpdates}
                         >

diff --git a/packages/main/settings.ts b/packages/main/settings.ts
@@ -1,5 +1,5 @@
 import fs from "fs";
-import { app, screen, ipcMain, BrowserWindow } from "electron";
+import { app, screen, ipcMain, BrowserWindow, nativeTheme } from "electron";
 import {
     observable,
     action,
@@ -113,6 +113,10 @@ class Settings {
                 window.webContents.send("mru-changed", mru)
             );
         });
+
+        autorun(() => {
+            nativeTheme.themeSource = this.isDarkTheme ? "dark" : "light";
+        });
     }
 
     async readSettings(settingsJs: Partial<Settings>) {

diff --git a/packages/project-editor/ui-components/icons.tsx b/packages/project-editor/ui-components/icons.tsx
@@ -2256,7 +2256,7 @@ export const ACTIVE_FLOWS_PANEL_ICON = (
 );
 
 export const BREAKPOINTS_PANEL_ICON = (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" fill="currentColor">
         <circle cx="12" cy="12" r="8" />
     </svg>
 );